Projet fictif de formation | OpenClassrooms

Personnal Dashboard

PROBLEMATIQUE

Créer un tableau de bord analytique de performances sportives et indicateurs physiologiques

BESOIN

Afficher les données utlisateur sous forme de graphique

• Récupérer les données depuis l'API
• Manipuler / Corriger les données selon le besoin
• Repésenter graphiquement les données
• Développer des Routes imbriquées
• Gérer les différents cas liés à la réponse de la requête API
• Développer une logique de code partitionné dans des composants réutilisables

• Maquette
• Kanban

REACT
RECHART
AXIOS

• Visual Studio code

• Git pour cloner les repos
• nodeJS (version 14.18.1) pour exécuter les commandes
• npm (version15.5.2) pour lancer l'application (front-end)
• Yarn pour lancer l'API (back-end)

• Recharts (version 2.1.4)
• react-router-dom (version 5.3.0)
• Prop-types (version 15.7.2)

• Cloner le repo du back-end : git clone https://github.com/Fourcaud/sportsee.git
• Aller dans ce dossier : cd backend
• Installer ses dépendances : yarn
• Le lancer sur le port 3000 (par défaut) : yarn dev

• Cloner le repo du front-end : git clone https://github.com/Fourcaud/sportsee.git
• Aller dans ce dossier : cd frontend
• Installer ses dépendances : npm install
• Le lancer sur le port 3001 : npm start

URL de visualisation du rendu web : http://localhost:3001
l'API de SportSee fournit des données pour les utilisateurs d'id 12 et 18

• Visual Studio code

• Git to clone repositories
• nodeJS to run commands
• npm to run application
• Yarn to run back-end

• Recharts (version 2.1.4)
• react-router-dom (version 5.3.0)
• Prop-types (version 15.7.2)

• Clone the back-end repository : git clone https://github.com/Fourcaud/sportsee.git
• Move to this folder : cd backend
• Install dependencies: yarn install
• Launch back-end on port 3000 (default port): yarn dev

• Clone the front-end repository : git clone https://github.com/Fourcaud/sportsee.git
• Move to this folder : cd frontend
• Install dependencies : npm install
• Launch front-end on port 3001: npm start

Front-end is now rendered at URL http://localhost:3001
SportSee API only contains data for users with id 12 and 18