(N.B. This repo is a demo app being used as part of copilot training exercises, the app was generated by GitHub Spark and is not presently deployed or hosted anywhere)
FitTrack is a comprehensive workout tracking application that helps you plan workouts, track progress, and improve your fitness journey with AI-powered form feedback.
- Create and organize custom workout plans
- Add multiple exercises with sets, reps, and weight targets
- Edit and manage your workout library
- Quick-start workouts from your saved plans
- Searchable database of exercises with detailed instructions
- Filter by muscle group and difficulty level
- View form cues and proper technique
- Add exercises directly to your workout plans
- Real-time workout session tracking
- Log completed sets with reps and weight
- Visual progress indicators
- Resume incomplete workouts
- Timer for rest periods
- Get personalized form tips during workouts
- Ask questions about exercise technique
- Receive instant feedback to improve your form
- Prevent injuries with proper guidance
- Visual charts showing workout history
- Track volume trends over time
- Monitor personal records
- View detailed workout logs
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/esmcelroy/workout-tracker-coach.git
cd workout-tracker-coach- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildnpm run lint- Framework: React 19 with TypeScript
- Build Tool: Vite
- UI Components: Radix UI primitives
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- State Management: React hooks + GitHub Spark KV storage
- Charts: Recharts
- Icons: Phosphor Icons
- Forms: React Hook Form with Zod validation
All workout data is stored locally using GitHub Spark's KV storage (browser local storage), which persists data in your browser without requiring a backend or user accounts. Note that data is specific to your browser and device.
- Desktop: Full tabbed interface with comprehensive views
- Mobile: Bottom navigation bar optimized for thumb access
- Touch-friendly controls and large tap targets on mobile
The interface is designed to be motivating, clear, and efficient - getting out of your way during workouts while providing rich insights when reviewing progress.
- Primary Color: Deep Energetic Blue - Conveys trust and focus
- Accent Color: Vibrant Lime Green - Highlights achievements and progress
- Typography: Inter font family for athletic, modern feel
- Animations: Snappy, purposeful motion that celebrates achievements
This project uses the MIT License. The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.
Run unit tests headless, in UI mode, or with coverage:
npm test
npm run test:ui
npm run test:coverageConfigs and helpers:
- Vitest config: vitest.config.ts
- Test setup (jsdom, mocks): tests/setup.ts
- Render helper with providers: tests/test-utils.tsx
Install browsers once, then run tests (ensure the app is running):
npx playwright install
npm run dev
npm run test:e2ePlaywright configuration: playwright.config.ts
We follow strict Test-Driven Development (TDD):
- Write a failing test first (Vitest for units; Playwright for flows).
- Implement only what's needed to pass; then refactor.
- Include tests with all feature PRs; new functionality requires coverage.
- Mock
fetchandlocalStoragewhere relevant (see tests/setup.ts). - Use the shared
render()helper with providers from tests/test-utils.tsx. - Keep tests deterministic and fast; avoid time-based flakiness.
For deeper guidance, see the engineering notes in .github/copilot-instructions.md.