Description
Focus Flow is a clean and distraction-free Pomodoro app designed for deep work sessions. It combines time tracking, task management, and focus scoring into a single lightweight experience. Built to be fast, intuitive, and minimal, it helps users stay in flow without unnecessary features or clutter.
Tech Stack
- Frontend: React 19, Tailwind CSS
- Language: TypeScript
Key Features
- Smart Pomodoro Timer — Automatically cycles between focus and break sessions.
- Task Management — Add, track, and auto-cycle through active tasks.
- Focus Metrics — Tracks focus score and distractions based on pause events.
- Skip Break Option — Lets users jump back into work instantly.
- Resilient Logic — Prevents timer from starting without active tasks.
- Lightweight & Minimal — Optimized for speed with minimal dependencies.
- Session Alerts — Plays a sound when a session ends to keep you on track.
Challenges & Solutions
1. Keeping Timer and Tasks in Sync
Challenge: Maintaining accurate state between the timer, current task, and session type without drifting or mismatches.
Solution: Used useEffect with controlled setInterval hooks, isolated work/break logic, and guard clauses to handle edge cases such as task depletion or manual timer skips.
2. Preventing Logic Breaks During Rapid User Actions
Challenge: Users could pause, skip, or end tasks in quick succession, sometimes breaking the session state.
Solution: Implemented a state-lock mechanism that queues state changes and only applies them at safe update points in the timer cycle.
3. Designing an Intuitive Focus Scoring System
Challenge: Creating a scoring method that encourages consistent focus without being punitive.
Solution: Calculated scores based on completed Pomodoro cycles and deducted points for distractions (pauses), giving users a tangible metric for improvement.
4. Balancing Feature Set with Simplicity
Challenge: Avoiding feature creep while still making the app genuinely useful.
Solution: Focused on core Pomodoro principles, implementing only the most impactful features first and leaving advanced analytics for a future release.
What I Learned
- Managing complex timer state and side-effects in React with hooks.
- Designing robust user interaction handling to avoid race conditions.
- Creating lightweight UI flows that feel instant without overengineering.
Screenshots
