Muscle Map – Interactive Fitness Map
Muscle Map is an interactive web page that teaches users about human muscle groups and offers targeted exercises.
https://musclemapcc.netlify.app/
Muscle Map Project Overview:
Muscle Map is a React + React Query showcase that delivers an interactive anatomy map. I am using the ExerciseDB API to connect to a remote database to build a list of exercises based on where the User interacts. Each muscle group is a simple SVG-based rect that will dynamically load in a targeted dataset to be displayed in a modal box.
Key Features:
- Interactive Map System: Hover over the Body/Muscle Groups to display information
- Data Query: This uses React Query to fetch data from a database.
- Responsive API: Fetches exercises data from the ExerciseDB API.
- Responsive UI: Has a Desktop and Mobile view.
Technical Highlights:
- React (with Vite) – Powers the user interface with fast development and build performance.
- TypeScript – Adds strong typing for safer and more maintainable code
- ExerciseDB API – Provides live exercise data for muscle-specific training information
- Google Fonts (Bebas Neue & Barlow) – Delivers modern, fitness-inspired typography
- Netlify – Handles continuous deployment and static site hosting
- GitHub – Source control and version management