Tomodoro banner

Tomodoro

Created by: dhanush290707
2 devlogs
50m 23s

Tomodoro is a sleek Pomodoro timer web app built with React and Vite. It features a beautiful circular timer with customizable Focus, Short Break, and Long Break modes. Personalize your experience with dark/light themes, gradient backgrounds, or custom images with a glossy overlay effect. Stay focused with ambient soundscapes like rain, forest, ocean, and white noise. Track your productivity with session statistics, daily streaks, and a built-in task list. Keyboard shortcuts, fullscreen mode, and sound notifications enhance usability. Fully responsive for desktop, tablet, and mobile. All settings persist automatically via localStorage.

This project uses AI

I used AI (ChatGPT) to get suggestions for UI design, CSS styling (including background and layout), and to debug minor issues while building the Pomodoro app. All AI suggestions were reviewed, adapted, and manually implemented by me.

Demo Repository

README

Loading README...
dhanush290707
dhanush290707 shipped Tomodoro
about 11 hours ago

Shipped this project!

Tomodoro is a sleek Pomodoro timer web app built with React and Vite. It features a beautiful circular timer with customizable Focus, Short Break, and Long Break modes. Personalize your experience with dark/light themes, gradient backgrounds, or custom images with a glossy overlay effect. Stay focused with ambient soundscapes like rain, forest, ocean, and white noise. Track your productivity with session statistics, daily streaks, and a built-in task list. Keyboard shortcuts, fullscreen mode, and sound notifications enhance usability. Fully responsive for desktop, tablet, and mobile. All settings persist automatically via localStorage.

dhanush290707
dhanush290707 worked on Tomodoro
about 11 hours ago
0h 16m logged

Fixed some bugs, experimented some things, Fun!

Attachment
0
dhanush290707
dhanush290707 shipped Tomodoro
11 days ago

Shipped this project!

Hours: 0.56
Cookies: 🍪 1
Multiplier: 1.5 cookies/hr

I built Tomodoro, a sleek and modern Pomodoro timer designed for deep focus. It features customizable session lengths, a minimalist task list, and detailed productivity tracking with daily streaks and weekly charts to visualize your progress.

The most technically interesting part is the Procedural Ambient Soundscape. Instead of using heavy MP3 files, I used the Web Audio API to mathematically generate relaxing sounds like rain, ocean waves, and forest birds in real-time. This keeps the app incredibly lightweight and lets it work perfectly offline.

I also focused heavily on aesthetics, implementing a glassmorphism UI with custom background options and a “glossy” overlay effect. This project taught me a ton about state management in React, local persistence, and creative ways to use browser APIs for a better user experience. 🚀

dhanush290707
dhanush290707 worked on Tomodoro
11 days ago
0h 33m logged

One of the most technically rewarding features implemented in Tomodoro is the Procedural Ambient Soundscape system. Instead of loading heavy MP3 or WAV files—which would increase the website’s load time and require hosting assets—I used the Web Audio API to generate sounds mathematically in real-time.

By creating a raw AudioBuffer and filling it with random mathematical values, I generated “White Noise” as a base. To transform this noise into something calming, I applied different digital signal processing (DSP) techniques:

Rain was created by passing white noise through a low-pass filter and adding occasional high-amplitude “spikes” to simulate individual raindrops.
Ocean Waves use a Low-Frequency Oscillator (LFO) to slowly modulate the volume of filtered noise, mimicking the rhythmic ebb and flow of the tide.
Forest Ambience combines soft “Brownian” noise with short, high-frequency sine waves that have an exponential decay to simulate distant bird chirps.
This approach results in zero extra asset size, perfectly seamless infinite looping, and the ability to work entirely offline. It transforms a standard timer into a truly immersive focus environment without the technical overhead of traditional media handling.

Attachment
0