A modern, customizable High-Intensity Interval Training timer web application built with Next.js and TypeScript.
Try it here: timer.adriancares.com
Workout Configuration |
Active Workout Timer |
- ⚙️ Fully Customizable Workouts: Configure exercise time, rest periods, number of exercises, and rounds
- 🔊 Audio Announcements: Voice prompts for workout phases including "halfway there", "round complete", and "workout complete"
- ⏱️ Timer Interface: Visual circular progress indicator with clear time display
- ⏭️ Skip Controls: Navigate forward and backward through workout phases
- 📱 Screen Wake Lock: Prevents device screen from turning off during workouts
- 🌓 Dark Mode Support: Toggle between light and dark themes
- 📊 Progress Tracking: Workout streak counter to maintain motivation
- 📲 Mobile Friendly: Responsive design that works on all devices
- 🔌 Offline Support: Works without an internet connection
- 💾 Settings Persistence: Saves your workout preferences
- Node.js 20.9.0 or newer (LTS)
- npm, yarn, or pnpm
-
Clone the repository:
git clone https://github.com/adriansprk/HIIT-Timer.git cd HIIT-Timer -
Install dependencies:
npm install # or yarn # or pnpm install
-
Start the development server:
npm run dev # or yarn dev # or pnpm dev
-
Open http://localhost:3000 in your browser.
-
Configure Your Workout:
- Set exercise duration (in seconds)
- Set rest period duration (in seconds)
- Set round rest duration (in seconds)
- Choose number of exercises per round
- Choose number of rounds
-
Start Your Workout:
- Press the "Start Workout" button
- Follow the visual and audio cues
- Use pause/play and skip controls as needed
-
Complete Workout:
- Receive congratulations and workout statistics
- View your streak progress
- Start a new workout or return to the configuration screen
- Framework: Next.js 16.1.x with App Router
- Language: TypeScript
- Styling: Tailwind CSS 3.4.x
- UI Components: Custom components with Radix UI primitives
- Icons: Lucide React
- State Management: React Context API
- Theme Switching: next-themes
- Audio: Web Audio API
- Screen Wake Lock: Web Wake Lock API with video fallback for iOS
- Testing: Jest for unit and integration tests, Cypress for E2E tests
- CI/CD: GitHub Actions for automated testing and deployment
HIIT-Timer/
├── app/ # Next.js App Router pages
├── components/ # React components
├── contexts/ # React Context providers
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── styles/ # Global styles
├── public/ # Static assets
│ └── audio/ # Voice announcements
├── __tests__/ # Jest test files
│ ├── components/ # Component tests
│ ├── contexts/ # Context tests
│ ├── hooks/ # Hook tests
│ ├── integration/ # Integration tests
│ └── lib/ # Utility function tests
├── cypress/ # Cypress test files
│ ├── e2e/ # E2E test specifications
│ └── support/ # Test support files
├── .github/ # GitHub actions workflows
│ └── workflows/ # CI/CD pipeline definitions
├── docs/ # Documentation files
└── types/ # TypeScript type definitions
This project employs a comprehensive testing strategy:
- Unit Tests: Testing individual components and utilities
- Integration Tests: Testing interactions between components
- End-to-End Tests: Cypress tests that simulate real user interactions
Run tests with:
# Run Jest tests
npm test
# Run Cypress tests in interactive mode
npm run cypress:open
# Run Cypress tests in headless mode
npm run cypress:runFor more detailed information about the testing architecture, see docs/testing.md.
All documentation is centralized in the docs folder with an index for easy navigation.
- Architecture Document - Detailed overview of the app architecture and design decisions
- Audio System Documentation - Documentation for the audio playback system
- Testing Reference - Reference guide for testing implementations
This project is licensed under the MIT License