Retour aux projetsSportSee.
Application React de dashboard sportif permettant à un utilisateur de consulter son profil, ses performances et ses statistiques à travers une interface dynamique connectée à une API locale.
Contexte
Projet réalisé dans le cadre du parcours OpenClassrooms. L'objectif était de transformer une maquette HTML/CSS existante en application React fonctionnelle, avec authentification JWT, routes protégées et données dynamiques.
Stack
React 18React Router 6Context APIFetch APIRechartsViteCSS
Choix techniques
- Architecture claire avec séparation des composants, pages, services, hooks et contextes
- Context API pour centraliser les informations liées à l'utilisateur connecté
- React Router pour gérer la navigation et les routes protégées
- Fetch API pour récupérer les données depuis l'API locale
- Recharts pour afficher les statistiques sportives sous forme de graphiques dynamiques
Fonctionnalités
Authentification JWT
Routes protégées
Dashboard personnalisé
Graphiques dynamiques
Appels API
États loading/error
DéconnexionCe que ce projet démontre
- Intégration d'une maquette existante dans une application React structurée
- Gestion de l'authentification et des routes protégées
- Consommation d'une API locale avec Fetch API
- Affichage de données dynamiques sous forme de graphiques
- Organisation maintenable entre composants, services, hooks et contextes
Limites actuelles
- API uniquement locale
- Certaines données restent statiques car non fournies par le back-end
- Pas encore de tests automatisés
- Projet principalement centré sur l'intégration et la logique front-end
