DEV Community

Om Vaghani
Om Vaghani

Posted on Edited on

I Built ClockAura: A Free Online Timer Platform with React + Vite (My Solo Dev Journey)

#javascript #react #showdev #webdev

Update — October 2026: ClockAura has grown a lot since I first wrote this in May. It now has 190+ pages, 8 UI languages (English, Hindi, Gujarati, Spanish, Portuguese, French, German, Indonesian), link timers (type clockaura.com/t/5m and a 5-minute timer starts), and it opens offline after your first visit. Numbers below are marked as "at launch" where they changed.

TL;DR

I built ClockAura — a free online timer site with countdowns, a stopwatch, Pomodoro, alarm clock, interval timers and classroom tools. Built with React + Vite. No sign-up needed. Live at clockaura.com.

Why I Built ClockAura

As a solo developer, I kept running into the same problems with "free online timer" sites:

  • Dated, cluttered interfaces
  • Intrusive ads that cover the timer
  • Sign-up walls for basic features
  • Only one timer type per site

I wanted one clean place for all of it, so I built the timer site I wanted to use myself. About three months later, ClockAura went live.

What's Inside

Core tools

Things I'm proud of

  • Link timers: clockaura.com/t/90s, /t/1h30m, /t/until/17:00 start instantly — handy as bookmarks
  • Classroom mode for projectors, with a QR code to share the timer
  • Embeddable widget for blogs and LMS pages
  • OBS overlay mode for streamers (transparent background)
  • 8 languages, with proper hreflang

The Tech Stack 

{
  "frontend": "React 18",
  "build": "Vite",
  "styling": "Tailwind CSS",
  "routing": "React Router",
  "hosting": "Hostinger (static + .htaccess)",
  "analytics": "Google Analytics 4",
  "monetization": "Google AdSense"
}
Enter fullscreen mode Exit fullscreen mode

SEO Challenges in a SPA

The biggest challenge was making every tool page crawlable. My first fix (at launch) was a static fallback inside index.html. Later I moved to prerendering every route at build time, so each URL ships its own HTML with title, description, canonical and structured data, and React takes over in the browser.

Lessons from that:

  • Keep the prerendered HTML and the runtime <head> in sync — it's easy for the two to drift.
  • Replace page-owned JSON-LD and hreflang on every client-side route change, not just on first load.
  • Treat redirects and the SPA router as one system, or a page can work on click but redirect on reload.

Keeping Timers Accurate

Browsers throttle requestAnimationFrame in background tabs, so a timer that counts frames drifts. ClockAura stores the end timestamp and computes the remaining time from it, with a single setTimeout as a backstop so the alarm still fires when the tab is hidden.

Performance

At launch, PageSpeed showed about 87 mobile / 94 desktop. After moving CSS out of the HTML, self-hosting fonts and deferring third-party scripts until interaction, the homepage scores 100 on mobile in Lighthouse (October 2026). Lab scores aren't a ranking guarantee, but a fast first load matters on cheap phones.

Lessons Learned

  1. Start simple, then iterate. Launch with a few tools, then listen.
  2. SEO takes time. Organic clicks were tiny for the first months and only started growing after real fixes and useful pages.
  3. Thin pages don't help. I pruned dozens of near-empty pages and merged them into stronger ones.
  4. Performance is UX.
  5. Don't skip the boring stuff — Privacy, Terms, About and a clear contact page matter for trust.

What's Next

  • Better classroom workflows with real teacher feedback
  • More useful content around study and workout timing
  • A mobile app, eventually

Try It

🔗 clockaura.com — or just type clockaura.com/t/5m.

I'd love feedback: what timer feature is missing for you?

Connect

Thanks for reading!

Top comments (0)