How I Built a Private AWS Builder Center Badge Tracker with Vanilla JavaScript
I built a browser-only AWS Builder Center Badge Tracker to turn badge progress into a simple daily routine. It helps me record activities, understand streaks, and plan the next milestone, while keeping my information private in my own browser.
Why I built this tool
AWS Builder Center badges are a fun way to build consistent community habits: reading, commenting, liking useful content, voting on Wishes, and sharing knowledge. However, it can be difficult to remember which small activity matters today, how close a streak is to a milestone, or which badge should be my next focus.
I wanted a lightweight personal companion that answered one practical question: what should I do today to keep moving forward?
That idea became the AWS Builder Center Badge Tracker. It is a static productivity tool that lets me manually record my Builder Center activity and see the resulting progress in one place.
The guiding principle: private, simple, and manual
I deliberately built this as a personal tracker instead of an AWS integration. The application does not scrape Builder Center, request passwords, store AWS credentials, or claim to verify official badge eligibility.
Instead, I manually confirm my own activities. The tool then performs the useful local calculations: streaks, weekly consistency, badge progress, completion dates, milestone targets, and daily recommendations.
Everything runs in the browser. There is no backend, database, API, authentication flow, or build process required.
The technology stack
I kept the project intentionally small:
- HTML for accessible structure and semantic forms
- CSS for the AWS-inspired responsive interface
- Vanilla JavaScript for state, calculations, rendering, and interactions
- localStorage for persistent browser-only data
- Font Awesome for clear visual navigation and status icons
- Kiro to iterate on the user experience, refine the data model, troubleshoot edge cases, and improve the interface during development
Building with Kiro
I used Kiro as my AI-powered development environment while building this project. It helped me move from an initial idea to a working tool by breaking the work into clear pieces: onboarding, local storage, badge rules, streak calculations, calendar interactions, responsive styling, and final UI refinements.
Kiro was especially useful when I needed to separate similar-looking progress concepts. For example, an already-earned badge, a current daily streak, a weekly publishing record, and an article with likes should not all be stored or calculated in the same way. Iterating on those details helped me make the tracker more accurate and easier to use.
Designing the data model
The most important design decision was separating badge status from activity history.
For example, I may have already earned the 7-Day Visit Streak badge before I started using this tracker. That badge should remain complete, even if my newly recorded visit streak begins at Day 1 today.
The application stores this information under one localStorage key:
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"profile": {
"fullName": "Sugam Ghale",
"builderId": "sugamghale",
"startDate": "2026-09-23"
},
"activities": {},
"counts": {},
"articles": [],
"comments": [],
"weeklyArticles": [],
"badges": {}
}
This separation prevents a common tracking mistake: assuming an older badge automatically represents a current activity streak.
Building the daily tracker and streak engine
The Daily Activity Tracker records five actions for any selected date:
- Visited Builder Center
- Read an article
- Commented
- Liked content
- Voted on a Wish
Each date is stored in the
YYYY-MM-DD format. I used local calendar-date helper functions instead of relying on UTC date conversions, which helps avoid timezone-related off-by-one errors.For each visit, comment, and like streak, the application calculates:
- Current consecutive streak
- Longest historical streak
- Progress toward 7-day, 30-day, and 90-day badges
If I miss a required day, the current streak resets while the historical data remains available. If I later add a missing activity date manually, the tracker recalculates the streak from the complete date history.
Making progress easy to understand
The dashboard is designed around quick decisions rather than raw data. It shows:
- Completed badges out of 21
- Overall completion percentage
- Current daily streak and days tracking
- Today’s checklist
- Streak-risk warnings
- Next milestone countdowns
- Quick Wins and Consistency badge progress
I also added a What should I do today? section to reduce the mental effort of deciding what to do next. It turns badge requirements into a simple daily routine: visit, read, comment, like, and vote on a Wish.
Calendar and weekly consistency
The calendar view gives me a visual history of activity. It supports previous and future dates, lets me select a date to edit, and shows different visual states for partial and complete daily routines.
I gave the calendar separate visual states for the current day and the selected day. A complete daily routine is represented with a small checkmark, making it easy to scan without confusing activity status with date selection.
For weekly goals, I created a separate publishing record flow. This is important because these concepts should not be mixed:
- First Article is a one-time badge.
- Valued Creator tracks article likes.
- 4-Week Article Publishing Streak tracks one published article per week.
Keeping them separate makes the tracker more accurate and easier to understand.
Supporting existing progress and data portability
During onboarding, I can select any badges I already earned. Those badges count immediately on the dashboard without requiring me to recreate historical activity data.
The tracker also includes:
- Editable profile and completed-badge settings
- Optional completion dates
- JSON export for backups
- JSON import for moving progress between browsers
- A clear-all-data confirmation flow
Because the data stays in localStorage, my progress remains available after refreshing or closing the browser unless I deliberately clear it.
Responsive and accessible by design
I designed the tool for desktop, tablet, and mobile use. On larger screens, the sidebar keeps navigation visible. On mobile, the interface uses a compact header and bottom navigation while ensuring forms, calendars, dialogs, and long content remain usable.
I also focused on practical accessibility details: proper labels, visible focus states, semantic buttons, keyboard-friendly dialogs, readable contrast, and icons that supplement rather than replace text.
What I learned
This project reminded me that useful tools do not always need a complex backend. A thoughtful local-first application can solve a real productivity problem while respecting privacy and keeping the user in control.
I also learned the value of separating related-looking data. An already-earned badge, a current streak, a weekly publishing entry, and an article with likes may all involve similar actions, but they represent different progress stories.
Final thoughts
The AWS Builder Center Badge Tracker is my personal way of applying a simple loop:
Learn → Build → Share → Repeat
The tool does not replace Builder Center or verify official results. It helps me build consistent habits, see my progress clearly, and stay focused on the next meaningful action.
Explore the tool
You can try the live AWS Builder Center Badge Tracker here:
Want to build one yourself?
I’m also sharing a step-by-step guide covering how I built the tracker, including the data model, localStorage structure, streak calculations, badge logic, and interface.
View my next article for the complete step-by-step guide.
If you build something similar, start small: identify the daily behavior you want to encourage, store progress locally, make the next step obvious, and improve the experience as you use it.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article