🌍 Translations: English | Türkçe
A minimalist, AMOLED-first Rep Counter PWA designed for peak performance and zero distractions. Built with Svelte 5 and Tailwind CSS v4.
- AMOLED-First Design: Pure black background (
#000000) to save battery life on modern OLED screens while looking incredibly sleek. - Smart Persistence: Never lose your workout. The timer and session state survive page refreshes and accidental browser closes by calculating delta timestamps (
lastTick). - PWA Ready (Rich Install UI): Installs as a standalone application on mobile and desktop. Includes high-quality app screenshots and description in the installation prompt.
- Custom Routines: Easily create, edit, and delete custom workout routines.
- Seamless Flow: 0-second rest support for high-intensity training with a 600ms transition pause to keep the visual pacing natural.
- Haptic & Sound Feedback: Short haptic taps for reps and rich audio feedback for completed sets. Fully toggleable in settings.
- Privacy Focused: No trackers, no ads, no cloud database. Everything is securely stored in your browser's local storage.
The app uses Svelte 5 Runes combined with persistent writable stores to maintain an offline-first state structure:
graph TD
UI[App.svelte & Components] -->|Trigger Actions| Store[store.ts]
Store -->|Update State| Session[SessionState Store]
Store -->|Update Config| Settings[Settings Store]
Session -->|Reactivity via Svelte Runes| UI
Settings -->|Apply Theme & Sound| UI
Store -->|Auto-save / Auto-load| LS[(LocalStorage)]
Timer[Timer.svelte] -->|Unix Timestamp Delta| SmartTick[updateTimer]
SmartTick -->|Prevent Ghost Ticks| Session
Feedback[feedback.ts] -->|Haptic & Audio Beep| User((User))
- Framework: Svelte 5 (utilizing Svelte runes:
$state,$derived,$effect) - Styling: Tailwind CSS v4 + Vanilla CSS Custom Variables for flexible theming
- PWA Engine:
vite-plugin-pwawith custom Workbox caching strategy - Build Tool: Vite
- Testing Suite: Vitest + Testing Library + JSDom
- Brave / Chrome (Android): Open the site, tap the "Install" button. The browser will present a rich app store-like overlay with screenshots. Tap "Install" to add it to your launcher.
- Firefox (Android): Open the site, tap the
⋮menu, and select "Install". - Safari (iOS): Open the site, tap the Share button, and select "Add to Home Screen".
- Note: If you click add but the icon doesn't appear on Android, make sure the browser has the
"Add home screen shortcuts"system permission enabled under your phone's App Info settings.
- Open the site in any Chromium-based browser (Brave, Chrome, Edge), click the Install icon in the right-side of the address bar, and confirm the installation.
- Node.js (v18 or higher)
- npm or pnpm / yarn
-
Clone the repository:
git clone https://github.com/Murqin/rep-counter.git cd rep-counter -
Install dependencies:
npm install
-
Start development server:
npm run dev
-
Build production bundle:
npm run build
The project is protected by a solid unit and integration testing suite located in the /tests folder.
To run the Vitest suite:
npm testTo perform a Svelte type check:
npm run checkIf you find this tool helpful, consider supporting its development:
To keep this PWA robust, lightweight, and modern, the following features are planned for future releases:
-
Workout History & Analytics:
- Persistent tracking of completed exercise sessions.
- Elegant interactive progress charts, calendar heatmaps, and personal records tracking.
-
Secure Data Backup & Sync:
- JSON format export/import of all custom presets, session history, and application settings to keep your data safe offline.
-
Alternative Timer Formats:
- Support for EMOM (Every Minute on the Minute), Tabata, and AMRAP (As Many Rounds As Possible) training protocols.
-
Customizable Voice Guide & Sounds:
- Multiple professional vocal cues and guide tones for rep milestones and transitions, fully toggleable in preferences.
Made with ❤️ by Murqin