Habit tracker with streaks

Track daily habits, tick them off, and see current and longest streaks. Data stays in localStorage.

Why build it

Streak logic forces you to handle dates correctly, which is where most beginner apps go wrong. It is small enough to finish and polished enough to show.

Features

• Add, edit and archive habits
• Daily check-in with one tap
• Current and longest streak per habit
• Weekly grid view
• Persist to localStorage

Roadmap

1. p1

   Data model and state

   • Define Habit and CheckIn types
   • Write a pure function that computes the current streak from a list of dates
   • Unit-test streak edge cases: gaps, same day twice, month boundaries
   • Store state with useReducer and localStorage
2. p2

   Core UI

   • Habit list with a check-in button
   • Add and edit form with validation
   • Empty state with a clear first action
3. p3

   Streaks and history

   • Show current and longest streak
   • Build a 7-day grid per habit
   • Allow back-filling a missed day
4. p4

   Polish and deploy

   • Keyboard and screen-reader pass
   • Responsive layout at 320px
   • Deploy to Vercel or Netlify
   • Write a README with a screenshot

Common pitfalls

• Comparing dates with timestamps instead of calendar days, which breaks streaks across time zones
• Storing derived streaks instead of computing them from check-ins

Skills you will practise

• Date handling
• Reducer-based state
• Unit testing pure functions