I built TimerMe - a simple productivity timer that focuses on doing one thing well.
GitHub: https://github.com/imseantang/timerme Live site: https://www.timerme.com
What's interesting about it:
Dynamic theming system - The entire UI (including favicon!) changes color instantly. Built with CSS custom properties for seamless theme switching.
Multiple timer types - Countdown timer with preset durations, precision stopwatch with lap recording, and world clock for multiple timezones.
Fast and lightweight - Using HonoX (Hono + Vite) deployed on Cloudflare Pages. No JavaScript frameworks on the client except for interactive components.
Smart World Clock - Auto-detects your timezone, shows time-of-day indicators (morning/afternoon/evening), and includes country flags.
Technical decisions:
1. Islands architecture - Only timer/stopwatch components hydrate on client, everything else is static;
2. SEO-friendly URLs - Every timer duration gets its own path (/timer/25, /timer/5, etc.) for better discoverability;
3. No external dependencies for core features - Used Web Audio API for timer sounds;
4. Mobile-first responsive - Flexbox order properties to reorder layout on small screens;
Why I built this:
Couldn't find a timer tool that worked exactly how I wanted, so I built one.
Try it:
25-min Pomodoro: https://www.timerme.com/timer/25
5-min break: https://www.timerme.com/timer/5
Stopwatch: https://www.timerme.com/stopwatch
World Clock: https://www.timerme.com/world-clock
Built this over a few weekends. Would love feedback on the UX or technical approach!
Tech stack: HonoX, TypeScript, Tailwind CSS, Cloudflare Pages