FocusFlow is a clean, distraction-free productivity tool designed to help you focus on what truly matters - your work, study, and personal growth. Built with intentional simplicity, it provides just the essential features you need without the clutter of bloated apps. Part of my #100DaysOfCode challenge journey.
- Interactive to-do list with completion tracking
- Visual progress indicators (percentage and progress bar)
- "All caught up!" motivational messages
- Customizable Pomodoro timer (25/5 default)
- Session counter with break tracking
- Browser notifications for session transitions
- Daily focus time tracking (auto-resets at midnight)
- Clean visual dashboard
- Persistent data (local storage)
This project represents my first fully-developed React application, created during my #100DaysOfCode challenge. Here's what I gained:
- Mastered React hooks (useState, useEffect, useRef)
- Advanced React state management techniques
- Browser Notification API implementation
- Clean UI/UX design principles
- Developed custom progress tracker
- Responsive layout strategies
- Practiced clean component architecture
- React.js with Vite for fast development
- Vanilla CSS for clean, lightweight styling
- Browser APIs (Notifications, Local Storage)
- JavaScript (ES6+)
- Clone the repository:
git clone https://github.com/dipanshu447/FocusFlow.git
- Install dependencies:
npm install
- Run the development server:
npm run dev
FocusFlow is inspired by the Pomodoro technique and minimal task management tools like Pomofocus.io. Icons by Icons8, styling ideas from Dribbble shots.
I’m always open to feedback, suggestions, or improvements. Feel free to open an issue or fork this repository to contribute. Every bit of feedback helps me learn and grow.