A Beautiful, Feature-Rich Pomodoro Timer for Maximum Productivity
🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • 💡 Request Feature
Transform your productivity with the power of focused work sessions, intelligent task management, and comprehensive progress tracking.
- Customizable Sessions - Adjust work, short break, and long break durations
- Smart Persistence - Timer continues running even when you close the browser
- Audio Notifications - Optional sound alerts for session transitions
- Auto-Start Options - Automatically begin breaks or work sessions
- Visual Progress - Beautiful circular progress indicator with real-time updates
- Session Tracking - Complete history of all your focus sessions
- Intelligent Task Linking - Connect Pomodoro sessions to specific tasks
- Progress Tracking - Monitor completed vs. estimated Pomodoros per task
- Task Completion - Mark tasks as done with celebration notifications
- Flexible Organization - Add descriptions and estimate effort for each task
- Visual Progress Bars - See task completion at a glance
- Session Scheduling - Plan your focus sessions in advance
- Monthly View - Visual calendar showing all scheduled activities
- Task Linking - Connect scheduled sessions to your tasks
- One-Click Start - Launch scheduled sessions directly from the calendar
- Session Types - Schedule work sessions, breaks, or long breaks
- Today's Focus - Dedicated view for today's planned activities
- 16+ Achievements - Unlock badges for various productivity milestones
- Rarity System - Common, Rare, Epic, and Legendary achievements
- Daily/Weekly/Monthly Goals - Set and track productivity targets
- Streak Tracking - Build and maintain productive habits
- Progress Visualization - See your journey toward each achievement
- Gamification - Make productivity fun and engaging
- Comprehensive Statistics - Track sessions, focus time, and productivity trends
- Streak Analysis - Monitor your consistency over time
- Weekly/Monthly Reports - Detailed breakdowns of your productivity
- Visual Charts - Beautiful graphs showing your activity patterns
- Export Capabilities - Download your data as CSV for external analysis
- Dark/Light Themes - Seamless theme switching with system preference detection
- Responsive Design - Perfect experience on desktop, tablet, and mobile
- Glass Morphism - Modern, elegant UI with backdrop blur effects
- Smooth Animations - Delightful micro-interactions throughout the app
- Accessibility - Built with screen readers and keyboard navigation in mind
- Complete Backup System - Export all your data as JSON
- Selective Exports - Export only tasks, sessions, or settings
- Import/Restore - Restore from backups with merge or replace options
- Local Storage - All data stored securely in your browser
- Cross-Device Sync - Use backup/restore to sync between devices
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/rawveg/focus.git cd focus -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser
Navigate to
http://localhost:8080to see the app in action!
npm run build
# or
yarn buildThe built files will be in the dist directory, ready for deployment.
- Click the play button on the timer
- Focus on your work for 25 minutes
- Take a 5-minute break when the timer rings
- Repeat for maximum productivity!
- Navigate to the "Tasks" tab
- Add tasks with estimated Pomodoro counts
- Select a task before starting your timer
- Watch your progress grow with each completed session
- Use the "Calendar" tab to plan ahead
- Schedule focus sessions at specific times
- Link sessions to your tasks for better organization
- Start scheduled sessions with one click
- Check the "Goals" tab for achievements and daily targets
- View detailed statistics in the "Statistics" tab
- Export your data for external analysis
- Celebrate your productivity milestones!
- Frontend Framework: React 18 with TypeScript
- Styling: Tailwind CSS with shadcn/ui components
- State Management: React Hooks with localStorage persistence
- Build Tool: Vite for fast development and building
- Icons: Lucide React for beautiful, consistent icons
- Animations: CSS transitions and transforms
Focus works on all modern browsers:
- ✅ Chrome (recommended)
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
We love contributions! Here's how you can help make Focus even better:
Found a bug? Please open an issue with:
- A clear description of the problem
- Steps to reproduce the issue
- Your browser and operating system
- Screenshots if applicable
Have an idea for a new feature? Create an issue and describe:
- The feature you'd like to see
- Why it would be useful
- How you envision it working
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Follow the existing code style
- Add tests if applicable
- Update documentation as needed
- Commit your changes
git commit -m "Add amazing feature" - Push to your branch
git push origin feature/amazing-feature
- Open a Pull Request
- Code Style: We use TypeScript and follow React best practices
- Components: Create small, focused, reusable components
- Styling: Use Tailwind CSS classes and shadcn/ui components
- State: Prefer React hooks and localStorage for persistence
- Testing: Test your changes across different browsers
This project is licensed under the GNU Affero General Public License v3.0 - see the LICENSE file for details.
- ✅ Free to use for personal and commercial purposes
- ✅ Free to modify and distribute
- ✅ Source code must remain open if you distribute the software
- ✅ Network use is distribution - if you run this on a server, you must provide source code
- Pomodoro Technique - Created by Francesco Cirillo
- shadcn/ui - For the beautiful component library
- Lucide - For the amazing icon set
- Tailwind CSS - For making styling a joy
- React Team - For the incredible framework
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Made with ❤️ by Tim Green
If Focus helps boost your productivity, consider giving it a ⭐ on GitHub!
