Welcome to Focus Hub — your all-in-one productivity companion designed to help students, creators, and professionals achieve deep focus and flow. Whether you're studying, coding, or working on a big project, Focus Hub empowers you to eliminate distractions and maximize your productivity with customizable tools — all in one beautiful interface.
- ✅ Customizable Productivity Dashboard: Design your perfect workspace by adding and arranging the widgets you love.
- 🕒 Advanced Pomodoro Timer: Boost your productivity with focused work sessions, short and long breaks, and personalized timing.
- 📋 Task Tracker: Quickly add, remove, and mark tasks as complete to keep your workflow organized and motivating.
- 📝 Quick Notes: Capture ideas, reminders, and important thoughts instantly.
- 🎥 Minimal Distraction YouTube Mode: Watch tutorials or learning videos without clutter.
- 🎧 Lofi Music Radio & Spotify Playlists: Immerse yourself in calming sounds or your favorite playlists to stay in the zone.
- 🗓 Calendar Integration: Plan your tasks and deadlines visually and effortlessly.
- 🖌 Personalization Options:
- Change backgrounds to match your mood.
- Choose from default and preset modes with different styles and widget configurations.
- Arrange and select widgets exactly how you like them.
- ⚡ Utility Tools:
- One-click reset
- Fullscreen mode
- Sidebar overview of active widgets and controls
- 🤖 AI-Powered Focus Assistant: Uses your camera to analyze focus levels during work sessions and provides personalized insights on effective work durations.
Focus Hub can be used as a personal productivity dashboard to help you concentrate and manage your study or work sessions more effectively. Combine different widgets like the Pomodoro timer, lofi music, and notes to create your ideal focused environment.
# Clone the project
git clone https://github.com/hawkaii/focushub.git
cd focushub
# Install dependencies
npm install
# Copy environment variables template
cp .env.sample .env
# Edit .env as needed- Frontend: React, TypeScript, Vite
- Styling: Tailwind CSS, Sass, Emotion
- State Management: Zustand
- UI Libraries: React Beautiful DnD, React Draggable, React Icons, React Joyride, React Hot Toast, React Textarea Autosize, RC Slider, Tsparticles
- Media & Integrations: YouTube, Spotify, Lofi Radio
- Productivity Tools: Pomodoro, Task Tracker, Calendar, Quick Notes
- AI & Utilities: AI Focus Assistant (camera-based), Ethers.js (blockchain interactions), Firebase (authentication, database)
- Development Tools: Prettier, PostCSS, TypeScript, Vite
.
├── public/ # Static assets
├── src/ # Source code
│ ├── components/ # React components
│ ├── widgets/ # Productivity widgets (Pomodoro, Notes, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── store/ # Zustand stores
│ ├── utils/ # Utility functions
│ └── styles/ # Styling (Tailwind, Sass, Emotion)
├── .env.sample # Environment variables template
├── package.json # Project configuration
└── README.md # Project documentation
Contributions are welcome! Please open issues and pull requests for new features, bug fixes, or suggestions.
- Fork the repository.
- Create your feature branch:
git checkout -b feature/AmazingFeature - Commit your changes:
git commit -m 'Add some AmazingFeature' - Push to the branch:
git push origin feature/AmazingFeature - Open a pull request.
This project is open source. See LICENSE for details.
Thanks to all contributors and users for making Focus Hub better every day!