Back to projects

Implementation notes · Fitness Platform

Elite Performance Hub

A fitness website that presents coaching services and lets visitors explore an exercise library. The library supports search, body-part and equipment filters, exercise details, and loading more results.

Exercise discovery flow
  1. React

    Search & filters

  2. API

    Request cache & mapping

  3. ExerciseDB

    Exercise data

This is a source-backed implementation overview. The repository contains tests; no conversion, client-outcome, or load-test results are claimed here.

Keeping search responsive

The library hook defers the search value and uses AbortController to cancel requests when the query changes. It checks for stale responses before updating state and exposes loading, error, and pagination state to the interface.

Exercise library hook

Separating the API from presentation

An API service builds requests, checks responses, caches results in memory, and maps ExerciseDB data into the application model. Caching avoids repeated requests during a session; it also creates a freshness tradeoff because cached entries have no expiry.

Exercise API service

Testing the transformation boundary

Focused tests cover mapping exercise fields, formatting names, and sorting category options. The modal implementation also handles Escape and restores page scrolling after close. Further validation should cover rapid filter changes, API failures, and complete keyboard focus management.

Exercise transformation tests
Discuss a project