SportSee

Projet fictif de formation n°09/11 | 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

Compétences développées

• 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

Ressources fournies

• Maquette
• Kanban

Bibliothèques

REACT
RECHART

Installation

Editeur recommandé

• Visual Studio code

Prérequis

• 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)

Dépendances

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

Etape 1 : Lancement du back-end

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

Etape 2 : Lancement du front-end

• Cloner le repo du front-end : git clone https://github.com/codexarama/SportSee.git
• Aller dans ce dossier : cd SportSee
• 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

---

Installation (english version)

Recommanded IDE

• Visual Studio code

Prerequisites

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

Dependances

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

Step 1 : Installing and launching back-end

• Clone the back-end repository : git clone https://github.com/codexarama/Sportsee-Back-end.git
• Move to this folder : cd Sportsee-Back-end
• Install dependencies: npm install
• Launch back-end on port 3000 (default port): npm run start

Step 2 : Installing and launching front-end

• Clone the front-end repository : git clone https://github.com/codexarama/Sportsee.git
• Move to this folder : cd SportSee
• 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