"Master your focus, grow your potential."
FlowState is a premium, high-performance productivity dashboard designed for deep work. It combines a sleek glassmorphism aesthetic with powerful focus tools to help you eliminate distractions and maintain long-term consistency.
Important
This is a Private Repository. Access and usage are restricted to authorized users. Please do not share or distribute this codebase publicly.
FlowState is engineered for individuals who prioritize cognitive performance and digital wellbeing:
- Deep Work & Flow: Ideal for developers, writers, and creators who need a distraction-free environment to enter the "Flow State."
- Academic Excellence: Helps students manage study blocks and build consistent learning habits.
- Digital Wellbeing: Balances intensive focus with health-conscious hydration reminders and motivational insights.
- Habit Tracking: Perfect for anyone looking to visualize their consistency through gamified rewards.
- Evolutionary Growth: Your focus streak is represented by a digital tree that evolves from a seed to a majestic full-grown tree as you hit your goals.
- Rescue Mission Logic: A unique recovery system that allows you to restore a broken streak by maintaining a 3-day "rescue" session.
- Visual Rewards: Stages include Seed, Dead Tree (if neglected), Sprout, Sapling, and Full-Grown Tree.
- Interactive Intro: A cinematic dark-mode boot sequence with typing animations and motivational quotes from iconic figures like Prophet Muhammad and Hazrat Ali.
- Premium UI: A "frosted glass" interface (Glassmorphism) with fluid micro-animations that feel alive yet non-intrusive.
- Precision Timer: A specialized countdown timer optimized for deep work sessions.
- Goal-Oriented Sessions: Define your mission before you start. The timer tracks your progress specifically against your stated goal.
- Session Recap: An automated wizard at the end of each session to analyze your performance.
- Handwritten Sticky Notes: A colorful, "Caveat" font-powered to-do list that persists across sessions.
- Hydration Tracking: Smart alerts with custom "water drop" audio cues to keep you healthy during long grinds.
- Activity Heatmap: A GitHub-inspired streak graph to visualize your productivity patterns over time.
- Core: React (Vite)
- Styling: Vanilla CSS (Custom tokens, Glassmorphism, Responsive Design)
- State Management: React Context API &
useState - Persistence:
LocalStorage: Settings, streaks, and focus history.IndexedDB: Local storage for session-specific media.
- Experience: Custom SVG branding and cinematic animations.
- Clone the repository:
git clone [repo-url]
- Install dependencies:
npm install
- Launch the environment:
npm run dev
FlowState includes a global ErrorBoundary with an Emergency Reset feature. If the application state ever becomes inconsistent, you can clear all local data with a single click to restore the original factory settings.
Created with focus and precision.