Habit Tracker

CASE STUDY

A minimal habit tracker with an AI coach that tells the truth. Built with React and the Claude API, no backend database, and in daily use: mine.

Try the live app → View the code →

0 accountscross-device sync with no signup and no user database

Offline-firstlocalStorage architecture, installable as a PWA

Daily usethe app I actually open every morning

01 · The idea

Habit apps cheerlead. This one doesn't.

I wanted something that reads what I actually did and says so plainly. The coach persona is deliberately honest: it names the blind spot instead of celebrating the streak. I built it for myself and use it every day, which is exactly what shaped that design.

02 · What it does

Tracking, an honest coach, and a vocabulary trainer

Tracking

Habits & stats

Configurable daily and weekly habits with a monthly calendar, week grid, year heatmap, streaks, and stats. Confetti when you finish everything.

Claude · Monthly

The honest coach

Claude reads real patterns: weekday versus weekend splits, week-by-week trajectory, longest gaps, trends against last month. It names a blind spot and gives three concrete actions.

Claude · Daily

Vocabulary trainer

Import words from your reading and take a short daily quiz. You type the meaning; Claude grades it semantically (pass, fuzzy, miss) to drive a Leitner spaced-repetition schedule.

Sync

Journal & accountless sync

A one-line "Today I learned" journal feeds the analysis. Sync uses a private code whose SHA-256 hash keys a Vercel Blob document; the code never leaves your devices.

03 · Design decisions

Private by architecture

SecurityThe key never ships to the browserClaude API calls run through Vercel serverless functions, so the API key stays server-side. Sync is keyed by hashing a client-side secret.

ResilienceOffline-first, migration-safelocalStorage-first: the app works fully offline and installs as a PWA. When the habit schema changed, stored data migrated automatically.

04 · Honest footnote

Built with Claude Code, used for real

Built end to end with Claude Code, Anthropic's agentic coding tool. The live demo shows generic example habits for visitors; personal data only ever exists in each user's own browser.

05 · Under the hood

Stack

React · Vite Claude API (Opus 4.8) Vercel serverless + Blob localStorage · PWA

Live at habit-tracker-six-wheat.vercel.app · code on GitHub.