N° 02 / 08 — Temps réel · 3D · Open data
LiveRadar
Tout ce qui bouge en France, en direct, sur une carte 3D : avions, trains, bus et bateaux. Et un observatoire qui compte nos retards.
- Rôle
- Conception et développement
- Année
- 2026
- Statut
- En lignePerso
- Stack
- Next.js · Three.js · TypeScript · PostgreSQL · Drizzle · React Three Fiber
01 / 07
Le problème
Les positions des avions, des trains et des bus sont publiques, mais éparpillées : un format par réseau, des flux irréguliers, aucune vue d'ensemble.
Et personne ne mesurait ce que tout le monde vit chaque jour : combien d'heures perdues dans les trains, combien de kilomètres de bouchons.
02 / 07
Ce que j'ai fait
LiveRadar réunit tout sur une carte 3D en relief : les avions en vol, les trains SNCF, TER, RER et Transilien sur leurs vraies voies, les bus, trams et métros de plus de cent réseaux, les navires. En mode Live, levez votre téléphone vers le ciel : les avions au-dessus de vous apparaissent là où ils sont.
L'Observatoire des retards pousse l'idée plus loin. Il mesure en continu les retards des trains, les bouchons et le trafic aérien, avec ses « awards » du jour, ses séries noires et un indice de perturbation.
03 / 07
Comment c'est construit
LiveRadar est une PWA Next.js full stack : des workers calculent et interpolent les positions à partir de données hétérogènes, et Three.js les affiche en temps réel en WebGL.
L'Observatoire a ses collecteurs (Bison Futé en Datex II, SNCF en GTFS-RT, ADS-B pour les avions) qui historisent tout dans PostgreSQL. Le navigateur n'appelle jamais les sources directement.
- Open data (SNCF, ADS-B, réseaux)
- Workers d'interpolation
- API Next.js
- Carte 3D Three.js
04 / 07
Les défis
- 01
Des données qui ne se ressemblent pas
Chaque source a son format et son rythme : ADS-B pour les avions, GTFS-RT pour les trains et les bus, Datex II pour Bison Futé. Des workers les normalisent et interpolent les positions entre deux relevés, pour que tout avance avec fluidité sur la carte.
- 02
Tenir sur un petit serveur
Toute la pile tient sur un petit VPS partagé. Le tas JavaScript est plafonné, le conteneur a sa limite de mémoire, et un garde-fou allège les caches avant de l'atteindre. Une seule instance relaie le trafic aérien, pour respecter la limite de débit de la source.
- 03
De la 3D légère, même sur téléphone
Les modèles 3D sont compressés au build (glTF Transform, Draco, meshopt), et les avions sont agrandis sans jamais être déplacés : lisibles sur un écran de téléphone, exacts sur la carte.
- 04
Livrer sans y penser
Chaque push passe par GitLab CI : types, lint et tests, puis une image Docker vérifiée par un test de fumée, déployée sur Docker Swarm derrière un reverse proxy HTTPS, avec retour arrière automatique.
- 05
Être trouvé, être partagé
Sitemap, robots, images Open Graph générées et PWA installable : les deux sites sont pensés pour le référencement et le partage, jusqu'au bilan du jour de l'Observatoire.
05 / 07
Résultats
Deux sites en ligne, gratuits et sans inscription, partout en France.
L'Observatoire construit son propre historique depuis le 2 octobre 2026, méthodologie et sources publiées. Ici, on ne devine pas : on mesure.
06 / 07
Ce que j'ai appris
Un avion de ligne à sa vraie taille, c'est 1 à 4 pixels sur un téléphone : exact, et inutilisable. La réponse vient de Stellarium : exagérer la taille, jamais la position.
Une règle qui m'a servi partout depuis : on peut tricher sur ce qui aide à lire, jamais sur la donnée.
07 / 07
La stack technique
- Front-end
- Next.jsTypeScriptPWAZustandZodTailwind CSS
- 3D, animation et temps réel
- Three.jsReact Three FiberWebGLOptimisation 3D (glTF, Draco)
- Back-end et API
- Node.js
- Données
- PostgreSQLDrizzleOpen dataADS-BGTFS-RTDatex II
- Mobile
- Capteurs (gyroscope, orientation)
- DevOps, cloud et tests
- DockerDocker SwarmGitLab CI/CDGitVitestBruno (tests d'API)
- Sécurité et réseau
- Reverse proxy (Traefik)
- Produit, SEO et méthodes
- SEO
Projet suivant · 03 / 08
DeviJà
DeviJà
