Pomodoro Timer
A practical Svelte example: Create a Pomodoro timer with work/break cycles and notifications
What You'll Learn
- Working with timers and intervals
- State machine implementation
- Browser notifications API
- Custom audio playback
- Settings persistence
- Circular progress indicators
Project Structure
pomodoro-timer/ ├── src/ │ ├── lib/ │ │ ├── Timer.svelte │ │ ├── Controls.svelte │ │ ├── Settings.svelte │ │ ├── ProgressRing.svelte │ │ └── Notifications.svelte │ ├── stores/ │ │ ├── timer.js │ │ └── settings.js │ ├── utils/ │ │ └── timeUtils.js │ └── App.svelte ├── public/ │ ├── sounds/ │ └── index.html └── package.json
Key Features
- Customizable work/break durations
- Visual and audio notifications
- Session statistics tracking
- Circular progress indicator
- Desktop notifications
- Auto-start breaks
- Dark/light theme support