Habit Grid
One row per habit, one square per day, and a streak you don't want to break.
BeginnerWeb appProductivity6–12hAI-buildable 5/5no setupworth shipping
The habit tracker reduced to its most legible form: a grid where every habit is a row and every day is a square you tap. Simple to describe, but the date handling is where it gets real — week boundaries, month rollovers, and a grid that stays readable whether you track two habits or twenty.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Add and remove habits
- A grid shows the last N days as tappable squares per habit
- Tapping a square toggles completion for that habit and day
- Current streak and longest streak show per habit
- The grid scrolls horizontally on narrow screens without breaking alignment
- State persists across reloads
The interesting part
- Streak calculation that survives timezone changes and skipped days
- Keeping row labels aligned with a horizontally scrolling grid
Once it works
- Add weekly targets rather than daily all-or-nothing
- Add a month view alongside the rolling view
- Export the grid as an image
Suggested stack
reacttypescripttailwinddate-fnslocalstorage