FocusFlow 🍅

FocusFlow is a sleek, distraction-free productivity application built with React and TypeScript. It leverages the Pomodoro Technique to help users manage their time effectively, offering detailed analytics and a customizable environment to maximize focus.

📱 Screenshots

Splash Screen	Focus Timer
Statistics	Settings

Note: For the Focus Timer image, I used the placeholder link based on your pattern. Make sure to paste the correct timer.jpg link if it differs!

✨ Key Features

• ⏱️ Advanced Timer Logic: Custom hooks handle focus sessions, short breaks, and long breaks with precise TypeScript state management.
• 📊 Productivity Analytics: * Track daily focus vs. break time.
  • Weekly consistency trends with visual charts.
• 🎨 Personalization: Toggle themes (Dark/Light), adjust typography, and customize notification sounds.
• 💾 Persistent Storage: Uses localStorage to keep your stats and settings saved even after closing the browser.

🛠️ Tech Stack

• Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Icons: Phosphor Icons / Lucide React
• State Management: React Hooks (useState, useEffect, useMemo)

🚀 Getting Started

To run this project locally, follow these steps:

1. Clone the repository:

   git clone [https://github.com/MoHamed-B-M/FocusFlow.git](https://github.com/MoHamed-B-M/FocusFlow.git)

2. Navigate to the project directory:

   cd FocusFlow

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

👤 Author

Hama

• IT Student at ISET Sidi Bouzid
• GitHub: @MoHamed-B-M

---

*Built with ❤️ and focus.