Application de tableau de bord d'analytics sportives développée avec React, Vite et Tailwind CSS.
- React 18
- Vite
- Tailwind CSS
- React Router DOM
- D3.js (pour les grapiques)
- PropTypes (pour la validation des props)
- Node.js (version 16 ou supérieure)
- npm
- Un navigateur moderne (Chrome, Firefox, Safari, Edge)
- Connexion internet pour les dépendances
- Clonez le repository du backend :
git clone https://github.com/OpenClassrooms-Student-Center/SportSee.git backend
cd backend
yarn
yarn devLe backend sera accessible sur http://localhost:3000
- Clonez le repository du frontend :
git clone https://github.com/nicoriera/sprortsee-ui
cd sprortsee-ui
npm install
npm run dev- Installez les dépendances :
npm install- Démarrez l'application :
npm run devL'application sera disponible sur http://localhost:5173
-
http://localhost:3000/user/${userId}- Informations utilisateur- Retourne les informations de base de l'utilisateur
- Format :
{ id, userInfos, score, keyData }
-
http://localhost:3000/user/${userId}/activity- Activité quotidienne- Retourne les données d'activité sur 7 jours
- Format :
{ userId, sessions: [{ day, kilogram, calories }] }
-
http://localhost:3000/user/${userId}/average-sessions- Sessions 7713 moyennes- Retourne la durée moyenne des sessions
- Format :
{ userId, sessions: [{ day, sessionLength }] }
-
http://localhost:3000/user/${userId}/performance- Performances- Retourne les données de performance par catégorie
- Format :
{ userId, kind: { 1: 'cardio', ... }, data: [{ value, kind }] }
Note : Seuls les utilisateurs avec les ID 12 et 18 sont disponibles.
- Affichage des graphiques de statistiques sportives
- Graphique d'activité quotidienne (poids et calories)
- Graphique de durée des sessions
- Graphique radar des performances
- Score circulaire de progression
- Filtrage des données par utilisateur
- Sélection des périodes de temps
- Visualisation des métriques clés
- Calories brûlées
- Protéines consommées
- Glucides ingérés
- Lipides consommés
- Tooltips détaillés sur tous les graphiques
- Animations fluides des données
- Mise à jour en temps réel
- Interface responsive
src/: Contient le code source principal- Composants React
- Logique métier
- Utilitaires
- Assets
src/components/: Contient les composants réutilisablesBarChart/: Graphique d'activité quotidienneLineChart/: Graphique de durée des sessionsRadarChart/: Graphique des performancesRadialBarChart/: Graphique de scoreLoader/: Composant de chargement
src/pages/: Contient les pages principales de l'applicationDashboard/: Page principale du tableau de bordProfile/: Page de profil utilisateur
src/utils/: Contient les utilitaires communschartCore.js: Fonctions de base pour les graphiquesbuildBarChart.js: Construction du graphique à barresbuildLineChart.js: Construction du graphique linéairebuildRadarChart.js: Construction du graphique radarbuildRadialBarChart.js: Construction du graphique circulaire
- JSDoc pour tous les composants et fonctions
- PropTypes pour la validation des props
- Commentaires explicatifs dans le code
- Utilisation de Tailwind CSS