SportSee

SportSee est un projet de formation pour le suivi des performances sportives développée avec React, TypeScript et Vite. Cette application permet aux utilisateurs de visualiser leurs données sportives et nutritionnelles à travers différentes représentations graphiques interactives.

Technologies utilisées

• Frontend : React 18 avec TypeScript
• Build tool : Vite
• Styles : Tailwind CSS
• Graphiques : Recharts
• Linting : ESLint

Fonctionnalités principales

L'application propose un tableau de bord complet avec plusieurs visualisations de données :

1. Activité quotidienne : Graphique à barres montrant le poids et les calories brûlées
2. Durée moyenne des sessions : Graphique linéaire présentant l'évolution des sessions d'entraînement
3. Performance : Graphique radar illustrant les différentes catégories de performance (cardio, énergie, endurance, etc.)
4. Score : Graphique radial indiquant le pourcentage d'objectif atteint
5. Informations nutritionnelles : Cartes présentant les apports en calories, protéines, glucides et lipides

Architecture du projet

Le projet est structuré selon une architecture moderne et modulaire :

Structure des dossiers

• components/ : Composants React organisés par fonctionnalité
  • dashboard/ : Composants du tableau de bord (graphiques, cartes)
  • layout/ : Composants de mise en page (header, sidebar)
• hooks/ : Hooks personnalisés pour la gestion des données
• utils/ : Fonctions utilitaires, types et couche d'accès aux données

Utilisation

Sélection d'utilisateur

Pour accéder aux données d'un utilisateur spécifique, ajoutez l'ID dans l'URL (https://ohminod.github.io/sportsee/?id=6) :

Les utilisateurs disponibles sont :

• Pour les données mockées : utilisateurs 1 à 12 et 18

Sans paramètre d'URL, l'utilisateur 12 est affiché par défaut.

Design et UI

L'interface utilisateur est conçue avec un focus sur l'expérience utilisateur :

• Design responsive adapté aux différentes tailles d'écran
• Palette de couleurs cohérente avec l'identité sportive
• Animations et interactions intuitives
• Tooltips détaillés sur les graphiques pour une meilleure lecture des données

Caractéristiques techniques

• Normalisation des données pour uniformiser l'affichage
• Gestion des états de chargement avec animations
• Personnalisation avancée des graphiques Recharts
• Optimisations de performance React
• Typage strict avec TypeScript