Focus Timer
A 25/5 pomodoro timer with phase auto-switching and a progress bar — and a React interval bug the agent had to fix properly.
The app — live, try it
Focus · session 1
25:00
The build log — every prompt
Press Play to replay this transcript step-by-step.
0 / 11
Condensed from the real build session: every user prompt is shown; repetitive tool turns are trimmed. Scrub through it — the corrections are the curriculum.
What to notice
- The first version flipped phases *inside* the setLeft updater — React calls updaters twice in StrictMode, so breaks were skipped. The fix: updaters stay pure; the phase flip moved to its own effect watching for zero.
- "Paste the error/behavior verbatim" applies to bugs you can *see* too: describing the exact symptom ("break phase gets skipped sometimes") let the agent name the StrictMode double-invoke immediately.
- Deriving the progress bar from (total − left) / total means no extra state to keep in sync.
Remix it — one prompt
Paste this into Claude Code (or Codex, or Cursor) and compare what you get with the live version above. Changing one requirement and seeing what moves is the fastest way to learn the loop.
Build a pomodoro focus timer as a single React component (TypeScript).
25-minute focus / 5-minute break phases that switch automatically. Show MM:SS big,
a thin progress bar, Start/Pause/Resume and Reset buttons, and a completed-sessions
counter. The setInterval must be cleaned up correctly (no drift, no double ticks in
StrictMode), and state updater functions must stay pure — no side effects inside them.Go deeper
This demo is a two-minute taste of the loop. Lesson: Debugging with the agent teaches it properly — free, no signup. Prompt logs and source live in the open-source repo — ★ star it if these demos help.