Workout Tracker
A mobile-friendly web‑app that tracks workouts and keeps records.
Project Overview
Workout Tracker is a simple and focused hobby project I built in June 2023 to make logging sets painless on my phone. It’s fully client-side and fast, so I can open it at the gym, tap a few big buttons, and get back to lifting. Built with Svelte and JavaScript.
Motivation
Most workout apps felt heavy or slow for simple strength sessions. I wanted a dead-simple way to record reps and weights without sign‑ups, ads, or a dozen screens. The goal was building something with more structure than a notes app, while keeping it simple and intuitive to use with only key features. Having frictionless logging: big controls, one screen per workout, and instant save to history.
Current Features
• PWA (Installable and Offline)
Install to the home screen and use it without a network connection. The app shell is cached for fast loads, and all records persist locally.
• Dashboard
A clean landing with a bold title, a motivational quote, and a list of workouts shown as large, tappable cards (e.g., Bench Press, Pull Ups). An “Add Workout” button lets you create a new workout entry.
• Workout Detail Layout
Each workout has a top navigation bar (back button + workout name) and three tabs: Record, History, and Settings.
• Record Tab
Reps selector and Weight (kg) selector with left/right arrows for quick changes. An “Add Set” button appends the current reps × weight to this session. A “Completed Sets” list shows sets in order, and “Record Workout” saves the whole session to history.
• History Tab
A read‑only list of all sets saved for that date. Data is persisted in localStorage per workout.
• Settings Tab
Destructive actions scoped to the current workout: “Delete Records” clears logged sets/history; “Delete Workout” removes the workout from the app.
• Mobile‑first UX
Large, thumb‑friendly controls, consistent card and button styling, and clear hierarchy. Back navigation always returns to the dashboard.
Technical Architecture
Frontend (Svelte + JavaScript)
- Svelte components for a small, reactive UI without much overhead
- Tailwindcss and Hyper UI for a minimalistic design
Storage and Data
- localStorage for persistence (no backend) so it works offline
- Simple data model per workout:
- Workout: name, id
- Sessions keyed by date (YYYY‑MM‑DD)
- Sets: array of { reps, weightKg } in order of entry
- Guardrails for destructive actions (confirmations) to avoid accidental wipes
Challenges and Solutions
Keep it fast on mobile
Big tap targets and minimal re-renders were important. Svelte’s reactivity made it straightforward to update only what changed while keeping the interface snappy.
Date handling
Different phones format dates differently. I normalized the storage key to ISO‑like strings (YYYY‑MM‑DD), then formatted for display so the History tab is reliable across time zones and locales.
Lessons Learned and Future Enhancements
Less friction = more consistent logging
Big controls and fewer steps made me log every set, not just the last one. I understand now that micro‑interactions matter more than fancy features.
Possible future improvements
- Stats and charts (PRs, volume per day/week)
- CSV export and import for backups
- Unit toggles (lb/kg) and custom increments
- Cloud sync as an optional add‑on if I ever need multi‑device
Conclusion
Workout Tracker is a tiny, focused tool that does exactly what I need: record sets quickly and keep them organized by date. Building it with Svelte kept it lightweight and easy to maintain, and storing data in localStorage means it’s fast and works anywhere. If you’re curious, check out the live demo or the GitHub repo—let me know what you think!