Projet React & API

Exploration technique des Open Data de Paris

Voir les autres projets

Le Contexte

Ce projet marque une première étape dans mon apprentissage du framework React.js. L'objectif n'était pas de produire un site esthétique, mais de comprendre les mécanismes et la communication avec des services tiers.

J'ai choisi d'utiliser les API Open Data de la ville de Paris pour créer une application capable de récupérer, traiter et afficher des données en temps réel (fontaines, parcs, monuments). C'était un défi technique pour expérimenter la gestion d'états et les appels asynchrones.

Fonctionnalités Techniques

  • Appels API Asynchrones : Utilisation de `fetch` et `useEffect` pour récupérer les données JSON depuis les serveurs de Paris.
  • Filtrage Dynamique : Tri des résultats (parcs, fontaines) sans rechargement de la page.
  • Gestion d'État : Utilisation des Hooks (`useState`) pour gérer l'affichage et le chargement des données.
  • Architecture Composants : Découpage modulaire du code pour une meilleure maintenabilité.

Stack Technique

  • React React.js : Framework Front
  • API REST API : Open Data Paris
  • JS JavaScript ES6+ : Logique
  • CSS CSS Modules : Style localisé

Le Défi : Fonctionnalité vs Design

La contrainte principale de ce projet était de prioriser la logique métier sur l'apparence. Contrairement à mes projets de sites vitrines, ici, le design est volontairement minimaliste, voire brut.

Le véritable challenge résidait dans le traitement des données brutes :

  • Comment gérer les temps de chargement (loaders) ?
  • Que faire si l'API de Paris ne répond pas (gestion d'erreurs) ?
  • Comment nettoyer des données JSON parfois incomplètes avant de les afficher ?

Ce projet m'a permis de comprendre que derrière une interface simple se cache souvent une logique complexe de gestion de données.

Approche Visuelle

Design Utilitaire

Puisque l'objectif était purement technique, l'interface utilisateur (UI) a été pensée comme un dashboard de développement. Pas d'animations superflues ni de palette de couleurs complexe. L'accent est mis sur la lisibilité des données (noms des lieux, adresses, statuts).

Aperçu de l'application

Capture d'écran du listing des données (Dashboard)

L'interface affiche les données brutes formatées pour la lecture.