A Professional Sanctuary for Deep Work: Pomodoro + Kanban + Atmosphere Engine
View Demo »
View Code
·
Report Bug
·
Request Feature
Table of Contents
FocusFlow is a premium, distraction-free productivity dashboard designed to facilitate the "Flow State." By consolidating a High-Precision Pomodoro Timer, a Minimalist Kanban Board, and an Integrated Atmosphere Engine into a single hardware-accelerated interface, FocusFlow eliminates the cognitive load of switching between apps.
Built with Next.js 15, React 19, and the Midnight Slate design system, it delivers a smooth, professional experience even on lower-specification hardware.
- 🍅 Precision Pomodoro System Features custom work/break intervals and a Mini-Widget Mode that automatically appears via Intersection Observer when you scroll, keeping your timer visible at all times.
- 📋 Deep Work Kanban Board A visual task manager designed for clarity. Includes drag-and-drop functionality and a workspace reset feature to keep your environment clutter-free.
- 🍃 Native Atmosphere Engine Replaces external streaming widgets with a lightweight, built-in audio engine. Includes professionally curated Brown Noise, Rain, and Forest soundscapes with smooth volume pulsing animations.
- 📊 Performance Analytics A robust metrics suite that tracks Daily Streaks, Focus Intensity, and Best Streaks using intelligent consecutive-date validation logic.
- 🎨 Midnight Slate Design A professional glassmorphism aesthetic built with Tailwind CSS 4 and Radix UI, optimized for reduced eye strain during long-duration focus sessions.
| Category | Technology | Description |
|---|---|---|
| Framework | Next.js 15 | App Router architecture with React 19 concurrent features. |
| Styling | Tailwind 4 | Ultra-efficient utility engine for modern design systems. |
| Animations | Framer Motion | GPU-accelerated micro-interactions and spring physics. |
| Components | Shadcn UI | Accessible, headless UI primitives via Radix UI. |
| State | Context API | Unified global state for timer logic and performance metrics. |
To ensure a lightweight experience, FocusFlow utilizes a specialized rendering strategy:
graph TD
A[Timer Context] -->|Functional Updates| B[Pomodoro Timer]
A -->|Memoized Stats| C[Analytics Dashboard]
D[Atmosphere Engine] -->|GPU-Pulse| E[Volume Icon]
F[User Scroll] -->|Intersection Observer| G[Mini Widget Toggle]
B -->|Metric Trigger| A
H[Kanban Drag] -->|Framer Layout| I[Task Update]
- GPU Offloading: Animations use compositor-only properties (
scale,opacity) to ensure 60fps on older CPUs. - Memoization:
React.memoanduseCallbackprevent unnecessary re-renders during the 1-second timer tick.
focusflow/
├── app/ # App Router Pages & Layouts
│ ├── page.tsx # Main Dashboard
│ └── layout.tsx # Root layout with TimerProvider
├── components/
│ ├── AtmosphereEngine # Built-in ambient sound controls
│ ├── KanbanBoard # Drag-and-drop task management
│ ├── PomodoroTimer # Main timer & Mini-widget logic
│ ├── YourMetrics # Performance analytics dashboard
│ └── ui/ # Optimized Shadcn primitives
├── contexts/ # Global State (Timer & Metrics)
├── public/ # Audio assets (Zen Bell, Brown Noise)
└── utils/ # Date validation & calculation helpers
- Node.js (v18 or higher)
- Clone the repository
git clone https://github.com/priyanshubh/focusflow.git
cd focusflow
- Install dependencies
npm install
- Run the development server
npm run dev
Contributions are welcome! If you have ideas for professional features or performance improvements:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Open a Pull Request
Built with ❤️ by Priyanshu Bharti