EZ-BIKE - Suivi Vélos en Libre-Service Marseille

Présentation de EZ-BIKE #

EZ-BIKE est un démonstrateur technique personnel qui affiche en temps réel les vélos et bornes disponibles en libre-service à Marseille, à partir du flux Open Data GBFS 2.2 de la Métropole Aix-Marseille-Provence. Le projet est né en 2024 comme exercice HTML/CSS/JavaScript, puis a été entièrement refondu en 2026 sous Next.js 15 pour servir de vitrine technique dans ce portfolio.

Objectifs #

• Récupérer et fusionner les flux GBFS station_information et station_status côté serveur
• Afficher les stations sur une carte interactive avec filtrage par disponibilité et géolocalisation
• Proposer une interface moderne avec thème clair/sombre et un calculateur d’impact carbone
• Soigner le référencement (metadata dynamiques, sitemap, image OpenGraph générée) sans se positionner comme un service commercial

De la version 2024 à la refonte 2026 #

La première version était un site statique HTML/CSS/JavaScript vanilla : une seule page, Leaflet chargé en CDN, récupération des données GBFS en fetch côté client avec mise en cache navigateur, et une UX minimale sans thème sombre ni découpage en composants.

La refonte 2026 reprend le même cas d’usage sur une base entièrement neuve :

• Migration vers Next.js 15 (App Router, Turbopack) et TypeScript strict, à la place du JavaScript vanilla
• Passage de 4 pages HTML statiques à une architecture de composants React (Navbar, Footer, ThemeProvider, cartographie Leaflet chargée en dynamique SSR-safe)
• Ajout d’une route API (/api/stations) qui centralise et met en cache la fusion des flux GBFS côté serveur, plutôt qu’un fetch direct côté navigateur
• Thème clair/sombre complet avec Tailwind CSS v4, contre un seul thème visuel figé auparavant
• SEO dynamique : metadata par page, image OpenGraph générée à la volée, sitemap et robots.txt, absents de la version 2024
• Ajout d’une page Mentions légales et d’un bandeau de communication rappelant qu’il s’agit d’un démonstrateur indépendant, pour clarifier le positionnement non commercial du projet

Technologies Utilisées #

Détail des technologies et outils utilisés pour la version actuelle :

• Framework : Next.js 15 (App Router, Turbopack)
• Langage : TypeScript strict
• Style : Tailwind CSS v4, thèmes clair et sombre
• Cartographie : Leaflet, chargement dynamique SSR-safe
• Données : Open Data GBFS 2.2 (Métropole Aix-Marseille-Provence, transport.data.gouv.fr)
• Déploiement : Vercel

Résultats #

Les résultats obtenus et l’impact de la refonte :

• Passage d’un exercice front-end statique à une application Next.js complète avec rendu serveur
• Carte en direct fluide, filtrable, avec calcul d’impact carbone par trajet
• Référencement structuré (metadata, sitemap, image sociale dynamique) inexistant dans la version 2024