Pomodoro Timer

The Pomodoro Technique, named after the tomato-shaped kitchen timer Francesco Cirillo used as a university student in the late 1980s, breaks work into 25-minute focused intervals separated by 5-minute short breaks. After four cycles, you take a longer 15-30 minute break. The fixed cadence reduces decision fatigue and creates artificial deadlines that combat the Zeigarnik effect — the tendency to ruminate on incomplete tasks.

This timer is implemented with setInterval ticking every 1000 ms inside a useEffect hook, decrementing remaining seconds and triggering a state transition (work → break → work → long break) when the counter reaches zero. The interval ID is stored in a useRef and cleared on unmount or pause to prevent timer leaks.

Browsers throttle setInterval and setTimeout in inactive (background) tabs to a minimum of once per second or once per minute depending on browser, but they do not stop the JS execution entirely. To stay accurate when the tab is backgrounded, the timer compares Date.now() against the original start timestamp on each tick, so a 25-minute Pomodoro completes in roughly real time even if the tab was minimized.

When a session ends, the timer plays a notification sound via the HTMLAudioElement API and (with permission) fires a desktop Notification through the browser's Notification API. Both require explicit user permission — Notification.requestPermission() must be called from a user gesture in modern Chrome and Safari — so grant permission on the first manual session start to enable end-of-session alerts.

Audio playback policies in Chrome and Safari require a user interaction before any sound can play. The first Pomodoro you start counts as that interaction, so subsequent sessions can play the bell automatically. Some macOS browsers also require the system sound to be unmuted, which is independent of the page's mute state.

Customization is stored in component state for the session — work, short-break, and long-break durations are sliders/inputs that adjust the seconds-per-phase. There's no persistence to localStorage in this build, so closing the tab resets everything to defaults.

Pomodoro is most effective when you treat the 25-minute interval as inviolable: silence Slack, close email, and resist the urge to switch tasks mid-Pomodoro. If interrupted, restart the Pomodoro from zero rather than crediting a partial session — the technique's original protocol explicitly recommends this.