OlympicGamesStarter est un projet Angular développé dans un cadre pédagogique pour le cursus Full-Stack Java Angular d'OpenClassrooms. Il a pour but d'approfondir les connaissances en développement front-end, avec un focus sur Angular et TypeScript, ainsi que sur l'import et l'utilisation d'une bibliothèque de visualisation de données, ici ngx-charts.
Le repo initial est disponible sur Github
Ce projet est une application Front-end Angular de visualisation de données olympiques, qui affiche des informations sur les performances de différents pays aux Jeux Olympiques. Les data ne sont pas issues d'appel à un back-end mais proviennent d'un fichier mock.
La bibliothèque ngx-charts est utilisée pour illustrer les données graphiquement, avec un routage entre les pages.
Pour commencer, installation des dépendances nécessaires avec la commande :
npm installPour lancer le serveur de développement, exécuter dans le terminal :
ng serveLe rendu est visible sur http://localhost:4200/ dans votre navigateur.
Une version dev en ligne liée à ce dépôt est disponible sur https://oc-p2-olympics.vercel.app/ .
Pour construire le projet, utilisez la commande :
ng buildLes fichiers générés seront stockés dans le répertoire dist/.
Une architecture de base a été mise en place pour faciliter la compréhension et l'organisation du code. Voici les principales sections :
-
core: contient la logique métier et les services.services: services utilisés pour récupérer et normaliser les données olympiques et gérer les interactions avec le dashboard.models: interfaces TypeScript pour structurer les données et assurer le typage strict.
-
components: contient tous les composants réutilisables medals-line-chart et medals-pie-chart. -
pages: contient les composants utilisés pour le routage et les vues principales de l'application home, detail et not-found.
Le projet intègre les fonctionnalités de visualisation de données suivantes grâce à ngx-charts :
- Graphiques en ligne (Line Chart) pour observer les nombre de médailles par années olympiques pour un pays sélectionné.
- Graphiques en secteurs (Pie Chart) pour comparer les totaux de médailles par pays.
Le projet est développé en single-page app et est responsif sur différentes tailles d'écran.
Merci pour votre curiosité 🎓