A sleek, minimalistic Pomodoro timer & deep-work workflow suite to help you lock in and do your best work.
🚀 Experience FocusFlow live in your browser: focus-flow-mauve-delta.vercel.app
- Custom Durations: Set Pomodoro focus, short break, and long break intervals (1–120 min).
- Smart Presets: Instant one-click presets — Classic (25/5), Deep Work (50/10), Quick Tasks (15/3).
- Auto-Advance: Seamlessly transitions from focus to break sessions.
- Focus Mode (
F): PressFto hide all UI controls for a 100% distraction-free environment.
- Subtask Checklists: Break complex projects down into smaller subtask steps with real-time completion tracking.
- Priority Level Tagging: Tag tasks with 🔴 High, 🟡 Medium, or 🟢 Low priority badges.
- Category Filters: Filter task views instantly by
All,High Priority,Work,Study,Coding, orPersonal. - Task Notes: Add detailed notes or post-session reflections directly inside any task card.
- Atomic Session Tracking: Real-time logging of completed sessions, total focus time, and tasks completed.
- Streak Counter 🔥: Build momentum with consecutive active days tracking.
- Weekly Visual Breakdown: Interactive 7-day session distribution charts powered by Recharts.
- Daily Session Goals: Customize and track your daily target Pomodoro sessions.
- Built-in Soundscapes: Rain, Forest, Ocean Waves, and Café audio powered by Howler.js.
- Spotify Integration: Embed your favorite focus playlist directly into the workspace.
- Supabase Auth: Secure email/password login and account management.
- Offline-First Resilience: Local state caching in
localStoragewith automatic cloud database sync.
| Key | Action |
|---|---|
Space |
Start / Pause timer |
R |
Reset timer |
S |
Skip to next session |
F |
Toggle Focus Mode (distraction-free) |
→ / ← |
Cycle timer modes (Pomodoro ↔ Short Break ↔ Long Break) |
↑ / ↓ |
Adjust time duration (±5 minutes) |
| Layer | Technology |
|---|---|
| Frontend Core | React 19, TypeScript 5.9, Vite 7 |
| Styling & Motion | TailwindCSS v4, Framer Motion |
| Icons & Visuals | Lucide React, Recharts |
| Audio Engine | Howler.js |
| Auth & Database | Supabase (JS SDK v2) |
| Deployment | Vercel |
- Node.js: v18.0.0 or higher
- npm: v9.0.0 or higher
-
Clone the repository:
git clone https://github.com/Infinite-L00pBaCk/FocusFlow.git cd FocusFlow -
Install dependencies:
npm install
-
Configure Environment Variables: Create a
.envfile in the root directory:VITE_SUPABASE_URL=your_supabase_project_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Run the Development Server:
npm run dev
Open http://localhost:5173 in your browser 🚀
# Typecheck and build bundle
npm run build
# Preview production build locally
npm run previewFocusFlow/
├── public/
│ └── sounds/ # Ambient audio assets (rain, forest, cafe, ocean)
├── src/
│ ├── components/
│ │ ├── AmbientSound/ # Soundscape player panel
│ │ ├── Auth/ # Supabase authentication modal
│ │ ├── Header/ # Main navigation bar & logo
│ │ ├── Settings/ # Timer, sound, and theme settings
│ │ ├── Spotify/ # Spotify web player embed
│ │ ├── Stats/ # Session statistics & charts modal
│ │ ├── Tasks/ # Advanced workflow & subtasks panel
│ │ └── Timer/ # Core Pomodoro display & controls
│ ├── contexts/ # React Context state management
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Supabase client setup
│ └── types/ # TypeScript interfaces & definitions
├── supabase-schema.sql # Supabase DB schema & RLS policies
├── index.html
└── package.json
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ by Infinite-L00pBaCk
⭐ If you find FocusFlow helpful, please give it a star on GitHub!