TéléSport - Application Olympiques

Application web interactive pour consulter les statistiques des médailles olympiques par pays

📋 Table des matières

Description
Fonctionnalités
Technologies utilisées
Architecture
Installation
Lancement
Structure du projet
Navigation
Captures d'écran
Documentation

Description

TéléSport est une application web interactive développée pour une chaîne de télévision française. Elle permet aux utilisateurs de consulter les statistiques des médailles olympiques par pays à travers :

Une vue d'ensemble (dashboard) avec graphique circulaire
Des pages de détail par pays avec graphiques d'évolution
Une navigation fluide sans rechargement de page (SPA)

Contexte du projet

Ce projet a été réalisé dans le cadre du parcours Développeur Full-Stack JavaScript d'OpenClassrooms. Il démontre la mise en place d'une architecture front-end modulaire et maintenable en JavaScript vanilla (sans framework).

Fonctionnalités

✅ Dashboard

Graphique circulaire (pie chart) montrant la répartition des médailles par pays
Liste interactive des pays sous forme de cartes cliquables
Affichage du nombre total de médailles par pays

✅ Page de détail d'un pays

Statistiques complètes (participations, médailles, athlètes)
Graphique d'évolution temporelle des médailles (line chart)
Tableau historique des participations
Bouton de retour vers le dashboard

✅ Navigation

Routing client-side avec History API (SPA)
URLs propres (/, /country/:id)
Fonctionnement du bouton retour du navigateur
Page 404 pour les routes inexistantes

✅ Gestion des erreurs

Indicateur de chargement (loader) pendant le chargement des données
Messages d'erreur conviviaux avec possibilité de réessayer
Gestion des pays introuvables

Technologies utilisées

Langages

HTML5 : Structure sémantique de l'application
CSS3 : Styles et responsive design
JavaScript ES6+ : Logique de l'application (modules, classes, arrow functions)

Bibliothèques

Chart.js (v4.4.0) : Visualisation des données (graphiques)

APIs

History API : Navigation client-side sans rechargement
Fetch API : Chargement des données JSON

Outils

Git & GitHub : Versionnage et collaboration
Live Server / Python HTTP Server : Serveur de développement local

Architecture

Principes architecturaux

L'application suit une architecture modulaire basée sur les principes suivants :

✅ Séparation des responsabilités : Services, modèles, pages et composants sont séparés
✅ Modules ES6 : Import/export pour organiser le code
✅ Design patterns : Singleton, Module Pattern, Component Pattern
✅ Réutilisabilité : Composants UI réutilisables
✅ Maintenabilité : Code documenté et bien structuré

Design patterns utilisés

Singleton Pattern : DataService, ChartService, Router (une seule instance)
Module Pattern : Tous les modules ES6 encapsulent leur logique
Component Pattern : Composants UI réutilisables (CountryCard, StatCard, etc.)
Model Pattern : Classe Country avec logique métier

Structure modulaire

src/
├── components/          # Composants réutilisables
│   ├── CountryCard.js      # Carte pays
│   ├── StatCard.js         # Carte de statistique
│   ├── ParticipationsTable.js  # Tableau
│   ├── Loader.js           # Indicateur de chargement
│   └── ErrorMessage.js     # Message d'erreur
├── pages/               # Pages de l'application
│   ├── DashboardPage.js    # Page d'accueil
│   ├── CountryDetailPage.js # Page de détail
│   └── NotFoundPage.js     # Page 404
├── services/            # Services métier
│   ├── DataService.js      # Gestion des données
│   └── ChartService.js     # Gestion des graphiques
├── models/              # Modèles de données
│   └── Country.js          # Modèle Country
├── router/              # Système de routing
│   └── Router.js           # Router avec History API
└── app.js               # Point d'entrée

Pour plus de détails sur l'architecture, consultez ARCHITECTURE.md.

Installation

Prérequis

Un navigateur moderne (Chrome, Firefox, Safari, Edge)
Un serveur HTTP local (Python, Node.js, ou extension VS Code)
Git (optionnel, pour cloner le projet)

Étapes

Cloner le dépôt (ou télécharger le ZIP)

git clone https://github.com/nostradamu21-maker/ExerciceP2DevFullStackJavascript-ClaudeCode.git
cd ExerciceP2DevFullStackJavascript-ClaudeCode

Ouvrir le projet dans votre éditeur

code .  # Si vous utilisez VS Code

Lancement

⚠️ Important : L'application utilise des modules ES6 et fetch(). Vous devez utiliser un serveur HTTP local (les fichiers ne peuvent pas être ouverts directement avec file://).

Option 1 : Avec Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Puis ouvrez : http://localhost:8000

Option 2 : Avec Node.js

npx http-server -p 8000

Puis ouvrez : http://localhost:8000

Option 3 : Avec VS Code Live Server

Installez l'extension Live Server
Clic droit sur index.html
Sélectionnez "Open with Live Server"

Structure du projet

telesport-olympiques/
├── src/                     # Code source de l'application
│   ├── components/          # Composants réutilisables
│   ├── pages/               # Pages de l'application
│   ├── services/            # Services métier
│   ├── models/              # Modèles de données
│   ├── router/              # Système de routing
│   └── app.js               # Point d'entrée
├── olympic-data.json        # Données mockées (5 pays)
├── index.html               # Page HTML principale
├── styles.css               # Styles CSS
├── ARCHITECTURE.md          # Documentation technique
├── notes-architecture.md    # Notes d'analyse
├── PROBLEMES-ARCHITECTURE.md # Guide des problèmes (corrigé mentors)
└── README.md                # Ce fichier

Navigation

L'application utilise un système de routing client-side (SPA) :

URL	Page	Description
`/`	Dashboard	Page d'accueil avec graphique et liste des pays
`/country/1`	Détail France	Page de détail pour la France
`/country/2`	Détail États-Unis	Page de détail pour les États-Unis
`/country/:id`	Détail pays	Page de détail pour n'importe quel pays
Autre URL	404	Page d'erreur 404

Captures d'écran

Dashboard

Vue d'ensemble avec graphique circulaire et liste des pays

Page de détail

Statistiques détaillées d'un pays avec graphique d'évolution

Documentation

Pour les développeurs

📖 ARCHITECTURE.md : Documentation technique complète de l'architecture
📝 notes-architecture.md : Notes d'analyse du code original

Pour les mentors

🔍 PROBLEMES-ARCHITECTURE.md : Guide des 10 problèmes d'architecture du starter code

Données

Les données sont mockées dans le fichier olympic-data.json et contiennent les statistiques de 5 pays :

🇫🇷 France
🇺🇸 États-Unis
🇩🇪 Allemagne
🇯🇵 Japon
🇦🇺 Australie

Chaque pays contient ses participations aux JO de 2012 (Londres), 2016 (Rio) et 2020 (Tokyo) avec :

Nombre de médailles (total, or, argent, bronze)
Nombre d'athlètes participants

Structure des données

{
  "id": 1,
  "name": "France",
  "participations": [
    {
      "year": 2012,
      "city": "Londres",
      "medalsCount": 34,
      "goldMedals": 11,
      "silverMedals": 11,
      "bronzeMedals": 12,
      "athleteCount": 330
    }
    // ...
  ]
}

Bonnes pratiques appliquées

JavaScript moderne

✅ Modules ES6 (import/export)
✅ Classes ES6
✅ Arrow functions
✅ Destructuring
✅ Template literals
✅ Async/await
✅ Array methods (map, filter, reduce, forEach)

Architecture

✅ Séparation des responsabilités
✅ Pas de variables globales
✅ Pas de code dupliqué
✅ Composants réutilisables
✅ Code documenté (JSDoc)

Performance

✅ Chargement unique des données (cache)
✅ Destruction des graphiques avant de créer de nouveaux
✅ Navigation sans rechargement de page

Évolutions futures

L'architecture actuelle permet facilement d'ajouter :

🔄 Intégration d'une API REST : Remplacer les données mockées par une vraie API
🔍 Recherche et filtres : Filtrer les pays par nom ou nombre de médailles
📊 Tri : Trier les pays par différents critères
🌙 Mode sombre : Thème clair/sombre
🌍 Internationalisation : Support multi-langues
🔐 Authentification : Connexion utilisateur
✅ Tests automatisés : Tests unitaires et E2E

Auteur

Projet OpenClassrooms - Parcours Développeur Full-Stack JavaScript

Projet : P2 - Développement Front-End JavaScript
Formation : Développeur Full-Stack JavaScript
Plateforme : OpenClassrooms

Licence

Ce projet est à usage éducatif dans le cadre de la formation OpenClassrooms.

Support

Pour toute question ou problème :

Consultez la documentation technique
Vérifiez que vous utilisez un serveur HTTP local
Ouvrez la console du navigateur pour voir les erreurs éventuelles

Version : 2.0 (Refactorisée) Date : 2025

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
screenshots		screenshots
src		src
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
PROBLEMES-ARCHITECTURE.md		PROBLEMES-ARCHITECTURE.md
README.md		README.md
app.old.js		app.old.js
index.html		index.html
notes-architecture.md		notes-architecture.md
olympic-data.json		olympic-data.json
styles.css		styles.css

nostradamu21-maker/ExerciceP2Devfullstackjavascript-corrige-claudecode

Folders and files

Latest commit

History

Repository files navigation

TéléSport - Application Olympiques

📋 Table des matières

Description

Contexte du projet

Fonctionnalités

✅ Dashboard

✅ Page de détail d'un pays

✅ Navigation

✅ Gestion des erreurs

Technologies utilisées

Langages

Bibliothèques

APIs

Outils

Architecture

Principes architecturaux

Design patterns utilisés

Structure modulaire

Installation

Prérequis

Étapes

Lancement

Option 1 : Avec Python

Option 2 : Avec Node.js

Option 3 : Avec VS Code Live Server

Structure du projet

Navigation

Captures d'écran

Dashboard

Page de détail

Documentation

Pour les développeurs

Pour les mentors

Données

Structure des données

Bonnes pratiques appliquées

JavaScript moderne

Architecture

Performance

Évolutions futures

Auteur

Licence

Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages