Sportsee est une application React qui permet aux utilisateurs de suivre leurs performances sportives. Il s'agit d'un projet fictif réalisé dans le cadre du programme de formation Développeur Front-end JavaScript React chez OpenClassrooms.
Dans ce projet, nous allons développer un tableau de bord d'analyse pour le coaching sportif.
La mission consiste à intégrer des graphiques et des diagrammes en utilisant React et à récupérer les données via une API.
La tâche principale sera de développer la page de profil de l'utilisateur, en intégrant des éléments graphiques avancés tels que des graphiques et des diagrammes pour présenter les données d'analyse sportive.
Nous utiliserons React pour construire l'interface utilisateur et la bibliothèques Recharts pour les graphiques.
Il faudra gérer les appels HTTP en utilisant des bibliothèques Fetch pour interagir avec le back-end et récupérer les données nécessaires.
Pour assurer une meilleure collaboration et une compréhension claire du code, les fonctions et composants doivent être documentées en utilisant JSDoc pour JavaScript et en spécifiant les proptypes pour les composants React. Ces pratiques aident à clarifier les attentes en matière de fonctionnalités et de types de données, facilitant ainsi le développement et la maintenance du code par l'équipe.
- Assurer la qualité des données d'une application
- Développer des éléments graphiques avancés à l'aide de bibliothèque Javascript
- Interagir avec un service web
- Cloner le projet
- Lancer la commande
pnpm installpour installer les dépendances - Lancer la commande
pnpm buildpour compiler le projet
Le back peut être récupéré depuis le répo suivant: sportSee back Pour connaitre son fonctionnement, consultez son README
L'API sera normalement accessible depuis http://localhost:3000.
Si l'application se lance sur une autre port, vous devrez alors mettre à jour VITE_APP_BASE_URL depuis le fichier .env
Avant de lancer le front, créer un fichier .env à la racine si il n'exite pas déjà et ajoutez y les constantes suivantes :
VITE_APP_BASE_URL=http://localhost:3000
VITE_APP_USE_MOCKED_DATA=false
NB: vous devrez peut être ajuster le port en fonction de votre environnement.
Puis, lancer la commande pnpm preview pour lancer le serveur de prévisualisation.
Pour travailler sur le projet, lancer le script pnpm dev
Il n'y a pour le moment que 2 utilisateurs dont les id sont respectivement 12 et 18.
Vous pouvez consulter leur profil depuis les urls suivantes :
Si vous souhaitez travailler depuis les données mockées, vous pouvez changer la constante VITE_APP_USE_MOCKED_DATA en la passant à true dans le fichier .env
Les données mockées se trouvent dans le dossier __mock__