🌊 Focus Flow

Your Ultimate Digital Sanctuary for Productivity & Zen.

Focus Flow is a premium, immersive web application designed exclusively to enhance your deep work, study sessions, and relaxation. It seamlessly merges stunning visual environments (live 3D scenes & videos), ambient soundscapes, YouTube Music integration, and essential productivity tools into a single, cohesive, glassmorphism-inspired interface.

✨ Core Features

• 🖼️ Immersive 3D Environments: Choose from breathtaking, high-quality video and image backgrounds.
• 🎧 YouTube Music & Mixer: Integrated YouTube player that works flawlessly in the background without lag, plus an ambient noise mixer (rain, cafe, fire, etc.).
• ⏱️ Smart Timer & Stopwatch: Features a Pomodoro timer with a Strict Mode (fails if you switch tabs), configurable durations, and 5 typography styles ranging from Minimal to Serif and Handwritten.
• ✨ Focus Pets: Level up your virtual companions by completing focus sessions. Keep them fed and happy!
• 📝 Task Board & Notes: Drag-and-drop Kanban task management and a quick-access notes panel.
• 🏆 Achievements & Stats: Track your daily tasks, weekly average focus time, and earn achievements to level up your Focus Rank.
• 🎨 Glassmorphism UI: A highly polished, dynamic aesthetic with heavily customized drop-shadows, animations, and "glass" window effects.

🚀 Tech Stack

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS (Custom Tokens, Backdrop Blur), CSS Modules
• UI & State: React Context API, Lucide React (Icons), Radix UI / Ant Design
• Key Libraries: dnd-kit (drag & drop), react-youtube (media playback)

⌨️ Global Shortcuts

Speed up your workflow using built-in hotkeys:

• Space : Play / Pause Music
• F : Toggle Fullscreen
• M : Open Audio Mixer
• T : Open Giant Timer
• N : Open Quick Notes
• B : Open Task Board
• S : Open Scene Selector
• Z : Toggle Zen Mode (Hides all UI elements)
• Esc : Close active panels

📦 Local Installation

1. Clone the repository:

   git clone https://github.com/tanh1c/FlowFocus.git
   cd FlowFocus

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open your browser: Visit http://localhost:3000

☁️ Deployment

This project is fully optimized for continuous deployment on Vercel. Simply import the GitHub repository into your Vercel dashbord and the Build Settings will be automatically configured for a Next.js framework.

---

Built with ❤️ for better focus and mindfulness.