StreakKit

Inspiration

Every habit-tracking app I've tried fights me with onboarding, accounts, sync, premium tiers, and notification permissions. The one I actually used last year was a notebook with a 30-day grid drawn in pen. StreakKit is that notebook in a browser tab.

What it does

One page, no signup. You add 3-7 habits (name + emoji), and each habit gets a 30-day grid. Tap a cell to mark the day done. The current streak count shows next to the habit. When a streak hits 7, 14, or 30 days, a celebratory toast pops.

Everything lives in localStorage. Open the tab tomorrow, your grid is exactly where you left it. No cloud, no account, no tracking.

How I built it with MeDo

One Deep Build prompt described the layout (habit list with emoji, 30-day grid per habit, tap-to-toggle cells, streak counter on the right, milestone toast), the mint and white palette, and the localStorage persistence rule. MeDo produced the requirements doc with the page tree (Header, Add Habit Modal, Habit Grid component, Toast notifications) and built the React/Tailwind app including a useStreakData hook that calculates current streak from completion records. The streak-recalculation logic was correct first try.

Plugins and APIs used

• React + Vite + Tailwind (MeDo default stack)
• lucide-react icons (Check, Trash2)
• sonner for toast notifications
• LocalStorage for habit + completion persistence

No backend, no auth, no external API calls. Whole app is client-side.

Challenges I ran into

The streak calculation has an edge case: if you mark days 1-7 done then skip day 8, the streak should reset to 0 the moment you open the app on day 8. MeDo's first pass kept showing streak=7 until you tapped something. I asked for a check on app mount and that fixed it. The other call was tap-target size on the 30-cell grid — first pass was 24px squares which felt cramped on a phone; bumped to 36px which uses more horizontal space but actually feels right.

What I learned

MeDo handles the boilerplate (state shape, hook plumbing, component split) so quickly that I spent my real attention on the behaviors that matter (streak edge cases, tap target size). That ratio is the value prop.

What is next

• Weekly habits (some habits don't need daily, like "run 3x/week")
• Export to CSV for users who want to graph their data
• Optional Web Push reminder at the user's chosen time

Built With

• localstorage
• medo
• no-code
• react
• tailwind
• typescript
• vite