Skip to main content
Iheb Jdey
Back to Work

Frontend · API Integration

Gym Exercise Finder

React exercise-discovery application with a focused mobile web experience, powered by ExerciseDB and YouTube APIs.

  • React 18
  • React Router 6
  • Material UI 5
  • ExerciseDB
  • YouTube Search API
  • Vercel Functions
View repository
Gym Exercise Finder landing page with exercise discovery positioning.
Fitness exercise-discovery homepage.

01

Internship Context

Developed during my SOTUDEV internship, the application organizes ExerciseDB data into desktop and mobile web experiences while keeping RapidAPI credentials outside the client bundle.

Company
SOTUDEV
Period
09–11/2024
Media evidence
7

02

Product Scope

  1. 01Search by exercise name, target muscle, body part or equipment
  2. 02Exercise detail routes with instructions, similar movements and related YouTube videos
  3. 03Pagination, shareable filter URLs, loading states, error states and keyboard navigation

03

Catalogue & Discovery

The catalogue exposes exercise illustrations and metadata through search and body-part navigation.

Exercise catalogue with illustrated exercise cards.
ExerciseDB catalogue with 1,324 available results.
Exercise browsing interface filtered by body part.
Body-part filters connected to the exercise catalogue.
Exercise search by name, target muscle, body part or equipment.
Multi-criteria exercise search.

04

Mobile Experience

The mobile web experience gives users a focused navigation path to the exercise catalogue, body-part categories and search.

A slide-out menu keeps the primary actions easy to reach on a phone while preserving the visual identity of the desktop product.

Gym Exercise Finder mobile web navigation displayed inside a phone.
Mobile experience with focused navigation and direct exercise search.

05

API & Delivery

  1. 01React Router routes are lazy-loaded for the catalogue and exercise detail pages
  2. 02Material UI and Emotion provide the component system used across desktop and mobile views
  3. 03Vercel serverless API proxies connect to ExerciseDB and YouTube Search without exposing RapidAPI keys

06

Engineering Decisions

  1. 01Cached requests and AbortController prevent avoidable duplicate or stale exercise requests.
  2. 02Related API requests use independent settled results so one unavailable source does not block the complete detail page.
  3. 03Tests cover search matching, pagination, duplicate removal, ID validation and accessible card navigation.

07

Product Demonstration

Video summary: Short product walkthrough — homepage, catalogue, body-part navigation and search (22 sec).

08

Internship Report

Engineering internship report

Supporting PDF supplied with the project media.

Open PDF report

09

Limitations

  1. 01Exercise and video content depends on external RapidAPI services and configured server-side credentials.

10

Repository

View repository