A React Native fitness tracker with real-time anatomical muscle visualization, structured training programs, and gamified progression.
Track workouts, visualize muscle balance with an interactive SVG body map, follow structured programs designed for progressive overload, and earn XP through a gladiator-themed rank system.
- Anatomical Muscle Map — Interactive SVG body visualization (front/back) with 20+ muscle groups. Color intensity reflects training volume across week, month, and all-time views
- Workout Logging — Log exercises, sets, reps, and weight with auto-fill from previous sessions, PR detection, and rest timer with haptic feedback
- Structured Programs — Pre-built programs (PPL, Full-Body, Upper-Lower) with superset support, warm-up sets, substitution suggestions, and "Save to My Routines" conversion
- Routine System — Create, edit, and launch custom workout templates for quick session starts
- XP & Rank System — Gamified progression through 8 gladiator-themed ranks (Novice to Immortal) with achievement unlocks
- Workout History — Calendar heatmap (GitHub-style) showing training frequency and session detail view
- Recovery Tracking — Per-muscle recovery status based on volume and time since last training
- Training Insights — Muscle balance scoring, volume distribution, and weekly consistency streaks
- Offline-First — All data persisted locally with AsyncStorage and automatic state hydration
| Layer | Technology |
|---|---|
| Framework | React Native 0.81.5 + Expo 54 |
| Language | TypeScript (strict mode, zero any) |
| State | Redux Toolkit with 7 slices |
| Navigation | Expo Router 6 (file-based) |
| Visualization | React Native SVG (muscle maps) + Victory Native (charts) |
| Animation | React Native Reanimated 4 |
| Persistence | AsyncStorage with migration system |
| Error Tracking | Sentry |
| Icons | Lucide React Native |
| Build | EAS (Expo Application Services) |
| Testing | Jest + React Native Testing Library |
MuscleMap/
├── app/ # Expo Router (file-based routing)
│ ├── (tabs)/ # Tab navigation (5 visible tabs)
│ │ ├── index.tsx # Home — muscle map + dashboard
│ │ ├── workouts.tsx # Start workout, recent sessions
│ │ ├── history.tsx # Workout history calendar
│ │ ├── rank.tsx # XP, rank, achievements
│ │ └── profile.tsx # Profile, settings, measurements
│ ├── program/[id].tsx # Program detail + day launcher
│ ├── routine/[id].tsx # Routine detail + editor
│ ├── exercise-history/[id].tsx # Per-exercise history
│ ├── achievements.tsx # Achievement gallery
│ ├── anatomy.tsx # Full-screen anatomy view
│ └── _layout.tsx # Root layout + providers
│
├── src/
│ ├── domain/ # Pure business logic (no side effects)
│ │ ├── intensity.ts # Heatmap color mapping
│ │ ├── recovery.ts # Muscle recovery calculations
│ │ ├── volume.ts # Volume tracking + muscle targets
│ │ ├── ranking.ts # XP thresholds + rank progression
│ │ ├── streak.ts # Consistency streak logic
│ │ ├── achievements.ts # Achievement criteria evaluation
│ │ ├── workout.ts # Workout domain operations
│ │ └── types.ts # Core domain types
│ │
│ ├── features/ # Feature modules (UI + logic)
│ │ ├── workouts/ # ActiveWorkout, RestTimer, Calendar
│ │ ├── exercises/ # Exercise selection, custom CRUD
│ │ ├── progress/ # AnatomyMuscleMap, XP, insights
│ │ └── premium/ # Feature gating (future)
│ │
│ ├── store/ # Redux Toolkit slices
│ │ ├── workoutSlice.ts # Workouts, templates, active session
│ │ ├── settingsSlice.ts # User preferences
│ │ ├── profileSlice.ts # User profile data
│ │ ├── achievementSlice.ts # Unlocked achievements
│ │ ├── prSlice.ts # Personal records
│ │ ├── measurementsSlice.ts # Body measurements
│ │ └── premiumSlice.ts # Premium feature flags
│ │
│ ├── services/ # Side-effect layer
│ │ ├── workoutService.ts # Workout operations (dispatch bridge)
│ │ ├── storage/ # AsyncStorage persistence + migrations
│ │ ├── api/ # HTTP client (future backend)
│ │ └── sentry.ts # Error tracking setup
│ │
│ ├── data/ # Static application data
│ │ ├── exercises.ts # 100+ exercise definitions
│ │ ├── programs.ts # Structured training programs
│ │ ├── templates.ts # Default workout templates
│ │ ├── muscles.ts # Muscle group definitions
│ │ ├── bodyPaths.ts # SVG path data for anatomy
│ │ └── achievements.ts # Achievement definitions
│ │
│ ├── hooks/ # useHydrate, usePersist
│ ├── lib/ # Utilities (dates, haptics, toast, uuid)
│ ├── components/ # Shared components (ErrorBoundary, etc.)
│ ├── constants/ # Theme tokens (colors, spacing, typography)
│ └── types/ # TypeScript type definitions
│
└── assets/ # App icons, splash, demo screenshots
UI Component → workoutService → Redux Slice → usePersist → AsyncStorage
↓
useAppSelector → UI re-render
All state mutations flow through Redux Toolkit. The domain layer contains only pure functions. Side effects (persistence, haptics, toasts) are handled at the service/hook level.
- Node.js 18+
- Expo CLI (
npm install -g expo-cli) - Android Studio (for Android) or Xcode (for iOS)
git clone https://github.com/anthonyjomarq/MuscleMap-Demo.git
cd MuscleMap-Demo
npm installnpm start # Start Expo dev server
npm run android # Run on Android emulator
npm run ios # Run on iOS simulator
npm test # Run Jest test suiteExercises map to anatomical muscle groups with weighted contributions:
- Primary muscles — 1.0x volume contribution
- Secondary muscles — 0.4x volume contribution
- Stabilizers — 0.15x volume contribution
The SVG body map renders 6 intensity levels from undertrained (blue) through recovering (orange) to overreached (red).
Estimated recovery time per muscle group based on volume and muscle size:
- Small muscles (biceps, triceps, calves): ~48 hours
- Large muscles (quads, back, chest): ~72 hours
| Rank | XP Required | Theme |
|---|---|---|
| Novice | 0 | Gray |
| Warrior | 500 | Green |
| Gladiator | 1,500 | Blue |
| Champion | 3,500 | Purple |
| Titan | 7,000 | Orange |
| Conqueror | 12,000 | Pink |
| Legend | 20,000 | Gold |
| Immortal | 35,000 | Red |
XP is earned through completed workouts (100 XP), individual sets (5 XP), and streak bonuses.
Anthony Colon — Full Stack Developer
- GitHub: @anthonyjomarq
Built with React Native, TypeScript, and a passion for fitness.
Copyright (c) 2026 Anthony Colon Dominguez. All rights reserved. This source code is shared for portfolio and educational purposes only. Unauthorized copying, modification, distribution, or use of this code for commercial purposes is strictly prohibited without prior written consent.