Vite Ma Pompe

Vite Ma Pompe

ViteMaPompe est un comparateur de stations-service qui vous permet de trouver et de comparer les prix des carburants (selon le type) partout en France Métropolitaine.

Pourquoi j'ai créé Vite Ma Pompe ?

Il y a quelques semaines, j'ai obtenu mon permis moto et me suis offert une nouvelle machine. Le problème, c'est que lorsque vous vivez à Paris depuis un certain temps, faire le plein devient un véritable casse-tête.

Si vous cherchez une station-service sur Google Maps ou d'autres applications classiques, vous risquez fort de vous retrouver avec les prix les plus chers de France.

Aujourd'hui, il est courant de chercher le meilleur prix pour faire ses courses, s'habiller ou partir en vacances... mais l'habitude de chercher le meilleur prix pour le plein d'essence n'est pas encore systématique. Pourtant, le gain peut être substantiel !.

Un exemple concret d'économies

Prenons un exemple simple :

  • En moyenne, un réservoir de voiture peut contenir 50 litres de carburant.
  • Imaginons que vous ayez l'habitude de faire le plein sans vous soucier du prix, à 1,80 €/L pour du SP95-E10.
  • Si vous faites le plein une fois par mois, cela représente une dépense annuelle de 1 080 € (50L x 1,80€/L x 12 mois).

Maintenant, changeons de stratégie :

  • Cherchons une station-service dont le prix est nettement en dessous de la moyenne (disons 1,62 €/L).
  • En refaisant le calcul : vous obtenez un total de 972 €/an.

Félicitations, vous venez de réaliser 108 € d'économies sur l'année !

La stack technique

  • Langage : React/Typescript avec NextJS
  • Front End : TailwindCSS
  • UI : Shadcn
  • Database et Backend : Supabase
  • Cartographie : Leaflet
  • Data & Utilitaires : Recharts (graphiques), Resend (email), Vercel (hébergement) et xml2js/yauzl (parsing des fichiers XML).

Comment ça fonctionne ?

ViteMaPompe utilise les données Open Data accessibles sur Data.Gouv.fr. Plus spécifiquement, j'ai eu besoin de deux jeux de données :

Le flux instantané

Ce premier jeu de données me permet de récupérer toutes les stations-services et les prix mis à jour pour chaque carburant. J'ai également accès aux horaires (si précisés par le gérant) et aux services disponibles sur place.
Ce qui est très pratique, c'est la position latitude/longitude incluse, ce qui me permet de les afficher très simplement sur une carte en utilisant Leaflet.
Le fichier est mis à jour tous les jours à 6h00 du matin, assurant une information très récente.

Les stations service

Le second jeu de données me donne la liste des stations-service et leurs enseignes associées. Le défi ? Les enseignes associées dataient de... 2014 !
J'ai donc dû procéder à un nettoyage intensif de cette donnée et surtout corriger les enseignes qui n'existent plus (RIP Leader Price et Cora).
Il a ensuite fallu faire une jointure entre ces deux bases de données pour obtenir un référentiel unifié des stations et de leurs enseignes. Et puis TA-DA ! La base était prête à être exploitée.

Le résultat vous intéresse ?

Technologies utilisées

TypescriptTypescriptNext.jsNext.jsTailwind CSSTailwind CSSShadcn UIShadcn UISupabaseSupabaseLeafletLeafletRechartsRechartsResendResendVercelVercel

Screenshots

Louis Demignot - Product, Data et Tech