Focus Timer
A pomodoro timer that keeps running when you switch tabs.
BeginnerWeb appProductivity5–12hAI-buildable 5/5no setupworth shipping
The timer everyone builds, done properly. Browsers throttle timers in background tabs, so a naive countdown drifts badly — the fix is computing elapsed time from a stored start timestamp rather than decrementing. Add a session log and it becomes something you'd actually use.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Work and break intervals with configurable lengths
- The timer stays accurate when the tab is backgrounded
- Automatic transition between work and break with a notification
- A session log records completed intervals with what you worked on
- Daily and weekly totals are shown
- Pause, resume and skip controls
- State survives a page reload mid-interval
The interesting part
- Background tab throttling, which makes decrementing counters drift
- Requesting notification permission at a sensible moment
- Restoring an in-progress interval correctly after a reload
Once it works
- Add a long break after a set number of cycles
- Add ambient sound during focus intervals
- Add a weekly focus chart
Suggested stack
reacttypescripttailwindlocalstorage