What I Built
HabitFlow is a browser-based habit tracker — no account, no server, no install. Open the HTML file and start tracking. Add up to 10 habits, check them off each day, and watch your streak grow.
What Inspired It
I kept downloading habit apps and abandoning them after a week. The friction of signing up, the notifications, the gamification — it all felt like more things to manage. I wanted something that felt more like a sticky note than an app. The prompt to build something I'd actually use made the choice easy.
How I Built It
I followed the spec-driven development process from start to finish:
- Scope doc — defined exactly what the app would and wouldn't do before writing a single line of code
- PRD — wrote user stories with acceptance criteria for every feature
- Technical spec — decided on a single-file architecture and designed the data model upfront
- Build checklist — tracked progress phase by phase
The app itself is a single index.html file — HTML, CSS, and JavaScript all in one. Data lives in localStorage so it persists across sessions without any backend. Streak logic is calculated at render time from a simple array of completion dates.
What I Learned
The biggest shift was planning before building. I've always jumped straight to code and then hit walls that required starting over. Writing the scope doc first — especially defining what's out of scope — kept the build focused. When I was tempted to add reminders or categories, I had a document that said "no" for me.
I also learned how much cleaner the code stays when the data model is decided upfront. Storing completions as an array of date strings made streak calculation and the 7-day grid trivial to implement.
Challenges
- Streak edge cases: deciding whether to count today's streak even if today isn't checked yet (I went with yes — don't penalize someone for not checking in at 7am)
- Keeping scope tight: every productivity app wants to become a second brain. Saying no to categories, reminders, and cloud sync was the right call for a first version
- No build tools: committing to a single HTML file meant no hot reload, no modules — just a text editor and a browser refresh
