SportSee

Contexte OpenClassrooms:
En tant que développeur front-end chez SportSee, j’ai été chargé de développer une nouvelle version des pages de profil utilisateur d’une application de coaching sportif. L’objectif était de permettre aux utilisateurs de consulter leurs statistiques personnelles, comme le nombre de sessions réalisées ou les calories brûlées, à travers une interface moderne et centrée sur la data visualisation.

Le projet nécessitait de construire une interface React complète en s’appuyant sur des maquettes Figma et un backend Node.js déjà disponible. Il fallait gérer plusieurs enjeux en parallèle : la navigation entre pages, l’authentification, la récupération des données utilisateur, leur normalisation avant affichage, ainsi que l’intégration de graphiques lisibles et performants. Une contrainte importante consistait aussi à isoler les appels HTTP en dehors des composants pour conserver une architecture propre.

J’ai développé les pages profil en React en structurant l’application autour d’une logique claire et maintenable.
J’ai notamment :

• mis en place React Router pour la navigation ;
• intégré une logique d’authentification connectée au backend ;
• utilisé la Context API pour gérer l’état global ;
• créé un système de mocks de données pour démarrer le développement sans dépendre immédiatement de l’API ;
• centralisé les calls HTTP dans des hooks dédiés, séparés des composants ;
• standardisé et formaté les données issues de l’API avant leur affichage ;
• intégré plusieurs graphiques avec Recharts pour représenter l’activité sportive ;
• assuré une intégration desktop fidèle à la maquette, lisible à partir de 1024 × 768 px ;
• utilisé Postman pour tester les endpoints backend en local.

L’application permet de visualiser clairement les principales métriques sportives des utilisateurs à travers une interface moderne, structurée et orientée composants. Ce projet m’a permis de consolider mes compétences en React, en architecture front-end, en gestion d’état global et en consommation d’API dans un contexte proche d’une application produit réelle.