Fitness Tracker

A React-based fitness tracking application for managing workouts, exercises, and training logs.

Setup Instructions

# Install dependencies
npm install

# Start development server
npm start

The application will be available at http://localhost:3000.

Architecture Overview

Project Structure

src/
├── components/          # UI components organized by feature
│   ├── Common/          # Shared components (ErrorBoundary, AppLayout, etc.)
│   ├── ExerciseLibrary/ # Exercise browsing and creation
│   ├── TrainingLog/     # Workout logging and history
│   └── WorkoutManagement/ # Workout templates
├── contexts/            # React Context providers
│   ├── Exercise/        # Exercise state management
│   ├── Workout/         # Workout state management
│   └── TrainingLog/     # Training log state management
├── hooks/               # Custom React hooks
├── pages/               # Page-level components
├── types/               # TypeScript type definitions
├── utils/               # Utility functions
├── data/                # Static data (predefined exercises)
├── i18n/                # Internationalization (English, German)
├── App.tsx              # Root component with routing and context providers
├── index.tsx            # Application entry point
├── index.html           # HTML template
├── theme.ts             # Material-UI theme configuration
├── setupTests.ts        # Jest test configuration
└── test-utils.tsx       # Custom test render utilities with providers

State Management

The application uses React Context API with useReducer for state management.

Three Context Providers:

Context	Purpose	Persistence
ExerciseContext	Manages exercise library and custom exercises	localStorage
WorkoutContext	Manages workout templates	localStorage
TrainingLogContext	Tracks completed workout sessions	localStorage

Each context follows the same pattern:

• Context.tsx - Provider component
• reducer.ts - useReducer logic with actions
• storage.ts - localStorage persistence
• types.ts - TypeScript interfaces

Custom Hooks

Hook	Purpose
useExercises	Access exercise state and actions (add, delete)
useExerciseForm	Manage exercise creation form state and validation
useWorkouts	Access workout state and actions (add, update, delete)
useWorkoutForm	Manage workout form state with exercise management
useTrainingLog	Access training log entries and actions
useTrainingLogForm	Manage training log form state and validation
useLocalStorage	Generic hook for localStorage with type safety

Testing Instructions

# Run unit tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage report
npm run test:coverage

End-to-End Tests

# Run Playwright E2E tests
npm run test:e2e

# Run E2E tests with UI
npm run test:e2e:ui

# Run E2E tests in headed mode
npm run test:e2e:headed

Testing Stack

• Jest - Test runner with 80% coverage threshold
• React Testing Library - Component testing utilities
• Playwright - End-to-end testing

Data Structure Explanation

Exercise

Represents an exercise in the library.

interface Exercise {
  id: string;
  name: string;
  muscleGroup: MuscleGroup; // Chest, Back, Shoulders, Biceps, Triceps, Legs, Core, Glutes
  difficulty: Difficulty; // Beginner, Intermediate, Advanced
  description: string;
  equipment?: Equipment; // None, Barbell, Dumbbell, Kettlebell, Cable, etc.
  category?: ExerciseCategory; // Strength, Cardio, Flexibility, Balance, etc.
}

Workout

A workout template containing a collection of exercises.

interface WorkoutExercise {
  exercise: Exercise;
  sets: number;
  reps: number;
}

interface Workout {
  id: string;
  name: string;
  date: Date;
  duration: number; // in minutes
  exercises: WorkoutExercise[];
}

Training Log Entry

A completed workout session with actual performance data.

interface CompletedExercise {
  exerciseId: string;
  exerciseName: string;
  sets: number;
  reps: number;
  notes?: string;
}

interface TrainingLogEntry {
  id: string;
  workoutId: string;
  workoutName: string;
  date: Date;
  duration: number; // in minutes
  exercises: CompletedExercise[];
  notes?: string;
  completedAt: number; // timestamp
}

Pages

Workout Management (/workouts)

• Create, edit, and delete workout templates
• Add exercises from the library to workouts
• Configure sets, reps, and duration for each exercise

Exercise Library (/exercises)

• Browse predefined exercises with filtering by muscle group, difficulty, and equipment
• Search exercises by name
• View exercise details including description and instructions
• Create custom exercises

Training Log (/training-log)

• Log completed workout sessions
• Record actual sets and reps performed
• Add notes to individual exercises and sessions (for tracking weights, RPE, or other metrics)
• Filter and search past entries by date range or workout
• Export training history to PDF or CSV

Technologies

• React 19 with TypeScript
• Material-UI (MUI) for UI components
• React Router v7 for navigation
• i18next for internationalization (English, German)
• jsPDF for PDF export
• Webpack for bundling