A fully interactive and gamified website for synchronized Pomodoro sessions. Create shareable "focus rooms" with real-time timers perfect for virtual co-working, study groups, and productivity sessions with friends.
- Real-time synchronized Pomodoro timers across all participants
- Automatic session transitions: 25min focus → 5min break → repeat → 15min long break
- Visual progress indicators with beautiful circular timers
- Live participant tracking with individual statistics
- Session completion tracking and achievements
- Real-time notifications and celebrations
- Beautiful visual feedback and animations
- See who's currently active in your room
- Real-time participant join/leave notifications
- Shareable room links for easy collaboration
- Individual progress tracking per participant
- Total sessions completed counter
- Focus time accumulation
- Personal and room-wide statistics
- Visual progress indicators
- Responsive design that works on all devices
- Beautiful gradients and glassmorphism effects
- Smooth animations and transitions
- Intuitive controls and interactions
- Node.js (version 14 or higher)
- npm or yarn package manager
-
Clone and setup the project:
cd Pomodoro npm install -
Start the development server:
npm run dev
Or for production:
npm start
-
Open your browser and navigate to:
http://localhost:3000
- Go to the homepage
- Enter your name in the "Create a Room" section
- Click "Create Room" to generate a unique room code
- Share the room link with friends or colleagues
- Get a room code from someone who created a room
- Enter the room code and your name
- Click "Join Room" to enter the session
- Start/Pause: Click the main timer button to start or pause the session
- Skip: Use the skip button to move to the next session type
- Progress: Watch the circular progress indicator and time display
- Notifications: Receive audio and visual notifications when sessions complete
- Copy Link: Use the copy button next to the room code to share the room
- Live Stats: Monitor participant count and completed sessions
- Participant List: See everyone in the room and their individual progress
- Node.js with Express.js framework
- Socket.IO for real-time communication
- UUID for unique room generation
- CORS for cross-origin resource sharing
- Vanilla JavaScript with modern ES6+ features
- HTML5 with semantic structure
- CSS3 with advanced features (Grid, Flexbox, Animations)
- Socket.IO Client for real-time updates
- Real-time synchronization via WebSocket connections
- Responsive design with mobile-first approach
- Progressive Web App capabilities
- Cross-browser compatibility
The application is fully responsive and works seamlessly across:
- 📱 Mobile phones (portrait and landscape)
- 📱 Tablets
- 💻 Laptops and desktops
- 🖥️ Large monitors
- Glassmorphism effects with backdrop filters
- Gradient backgrounds and smooth color transitions
- Circular progress indicators with SVG animations
- Notification system with slide-in animations
- Modal dialogs for session transitions
- High contrast color schemes
- Clear typography with Inter font family
- Intuitive button layouts and hover effects
- Responsive touch targets for mobile devices
Current timer settings (can be modified in server.js):
- Focus Session: 25 minutes
- Short Break: 5 minutes
- Long Break: 15 minutes
- Long Break Interval: Every 4 completed focus sessions
- Modify timer durations in the server configuration
- Customize colors and themes in the CSS file
- Add additional gamification features
- Extend participant statistics
npm run dev # Uses nodemon for auto-restartnpm start # Standard Node.js serverPORT: Server port (default: 3000)
This is a complete, ready-to-use Pomodoro room application. Feel free to:
- Add new gamification features
- Improve the UI/UX design
- Add more timer customization options
- Implement user accounts and persistent data
- Add audio/music integration
MIT License - feel free to use this project for personal or commercial purposes.
Ready to focus together? Start your Silent Pomodoro Room now! 🎯⏰