Show HN: TimerMe – A fast, theme-aware productivity timer built with HonoX

3 months ago 2

A modern web application providing professional timer, stopwatch, and world clock tools for productivity and time management. TimerMe is designed to help users focus better and work smarter with intuitive timing solutions.

This website is built with HonoX and features a clean, responsive design with theme customization capabilities.

Timer: Professional countdown timers with customizable durations, perfect for Pomodoro technique and focused work sessions
Stopwatch: Precision timing with lap recording for training, sports, and time tracking
World Clock: Track time across multiple timezones simultaneously, ideal for global teams
Theme Support: Dynamic color themes (Orange, Blue, Green) with system-wide consistency
Responsive Design: Optimized for desktop, tablet, and mobile devices
PWA Ready: Progressive Web App capabilities for native-like experience

HonoX: HonoX is a simple and fast supersonic meta-framework for creating full-stack websites and web APIs. It is built on top of Hono, Vite, and a UI library.
Biome: Biome is a performant toolchain for web projects, aimed at providing developer tools to maintain the health of the project.
Tailwind CSS: A utility-first CSS framework packed with classes for rapid UI development.
TypeScript: Strongly typed programming language for better development experience.
Cloudflare Pages: Fast and secure hosting platform for modern web applications.

This section explains how to set up your environment for local development.

Note that this step does not necessarily have to be done with npm; you may use other package managers like bun or pnpm.

npm run dev open http://localhost:5173/

npm run build npm run preview

timerme.com/ ├── app/ │ ├── components/ # Reusable UI components │ ├── islands/ # Client-side interactive components │ ├── routes/ # Page routes and API endpoints │ └── style.css # Global styles and theme variables ├── public/ │ ├── favicon*.svg # Dynamic theme-aware favicons │ └── sitemap.xml # SEO sitemap └── wrangler.toml # Cloudflare deployment configuration

Multiple preset durations (1, 2, 3, 5, 10, 15, 20, 25, 30, 45, 60, 90, 120 minutes)
Custom timer input for any duration
SEO-optimized URL paths for specific timers (/timer/5, /timer/25, etc.)
Audio notifications and visual alerts
Fullscreen mode for distraction-free timing