HIIT Timer

HIIT Timer

A no-friction interval timer that works offline. Built for real workouts and real devices.

Next.jsTypeScriptTailwindWeb Audio APICypressJestAccessibility

TL;DR

Think of HIIT Timer as a metronome for your workout with a coach’s voice on top. Configure exercises, press start, and let clear visuals and voice prompts carry you through sets, rests, and rounds. Works offline, keeps the screen awake, and saves your preferences so setup stays out of the way.

Live: https://timer.adriancares.com


Problem → Insight

Most workout timers either bury you in settings or fail on mobile at the worst time. Audio cuts out, the screen sleeps, or the browser loses state. The job to be done: when the heart rate climbs, the tool should disappear. HIIT Timer leans on reliable audio, wake lock, and lightweight persistence so the timer behaves like a steady training partner.


What I built

  • Flexible setup: exercise time, rest, round rest, exercises per round, rounds. One screen, fast changes.
  • Voice prompts: “halfway there”, “round complete”, “workout complete”. Uses Web Audio API for dependable playback on mobile.
  • Clear visuals: circular progress and large time display you can read at a glance.
  • Controls that forgive: pause, resume, skip forward and back if your flow changes mid-set.
  • Stays awake: wake lock indicator and logic so the screen does not sleep mid-round.
  • Works anywhere: mobile friendly, offline support, and settings persistence for a quick start next time.

Product decisions and trade-offs

  • Audio first on mobile: chose Web Audio API and an explicit unlock flow to reduce latency and platform quirks, especially on iOS. Think seatbelt click before the ride.
  • Keep users in flow: skip controls and big visuals beat dense configuration screens during a session.
  • Trust through predictability: offline mode and local persistence mean the timer behaves the same in a garage gym or on a plane.
  • Small surface, real quality: unit tests, integration tests, and E2E runs with Cypress and Percy for visual regressions. The goal is no surprises between builds.

Architecture snapshot

  • UI: Next.js App Router, React, Tailwind, Radix primitives.
  • State: Context for global settings, custom hooks for wake lock and audio.
  • Audio system: single shared AudioContext, buffered sounds, explicit mobile unlock, and preloading. Like staging your gear before a sprint.

Quality bar

  • Testing strategy: unit, integration, and E2E. Jest and RTL for components, Cypress for flows. Visual checks with Percy.
  • Accessibility: semantic markup, ARIA, keyboard paths, screen reader friendly prompts. The timer should speak clearly to everyone.

Who it is for

  • Lifters and runners who want a no-guess timer that just works.
  • Coaches who need a clean, shareable setup on any device.
  • Travelers who train offline and still want prompts and pacing.

Roadmap

Nothing planned.