Back to projectsSportSee.
React fitness dashboard application that lets a user consult their profile, their performance and their statistics through a dynamic interface connected to a local API.
Context
Project built as part of the OpenClassrooms program. The goal was to turn an existing HTML/CSS mockup into a working React application, with JWT authentication, protected routes and dynamic data.
Stack
React 18React Router 6Context APIFetch APIRechartsViteCSS
Technical choices
- Clear architecture separating components, pages, services, hooks and contexts
- Context API to centralize the information related to the logged-in user
- React Router to handle navigation and protected routes
- Fetch API to retrieve data from the local API
- Recharts to display sports statistics as dynamic charts
Features
JWT authentication
Protected routes
Personalized dashboard
Dynamic charts
API calls
Loading/error states
LogoutWhat this project demonstrates
- Integration of an existing mockup into a structured React application
- Handling of authentication and protected routes
- Consumption of a local API with the Fetch API
- Display of dynamic data as charts
- Maintainable organization across components, services, hooks and contexts
Current limitations
- Local API only
- Some data remains static because it is not provided by the backend
- No automated tests yet
- Project mainly focused on integration and frontend logic
