2026 · Full Stack Developer
FocusFlow
A Pomodoro timer to help you focus
- Next.js
- TypeScript
- Tailwind CSS
- SVG
- Framer Motion
Overview
FocusFlow is a Pomodoro timer that helps you work in focused intervals. It offers Focus, Short Break, and Long Break modes, tracks how many focus sessions you've completed, and lets you customize the length of each interval.
I built it to work with time-based logic and SVG — the centerpiece is a hand-built circular progress ring that drains smoothly as the timer counts down, with no charting library.
Key features
- Three modes: Focus, Short Break, and Long Break.
- Animated circular countdown ring built with SVG.
- Start, pause, and reset controls.
- Session tracker that fills in as you complete focus sessions.
- Adjustable durations saved in the browser, plus an end-of-session chime.
Challenges
- Building the circular progress ring by hand using an SVG circle's stroke-dasharray and stroke-dashoffset, driven by the elapsed time.
- Running a reliable countdown that only ticks while active and cleans up its interval, avoiding memory leaks and race conditions.
Architecture
Built with Next.js (App Router) and TypeScript. A usePomodoro hook centralizes the timer logic with a 1-second interval, mode switching, and session counting. The progress ring is a pure SVG component using stroke-dashoffset, and settings persist via a reusable useLocalStorage hook. A short Web Audio chime signals the end of each session.
Future improvements
- Desktop notifications and auto-starting the next session.
- Daily focus statistics and a task-linked focus log.
Interested in working together?
Let's talk about your next project.