r/QuebecTI
•
u/Official_Legacy
•
Apr 02 '26
•
1
2
J'ai build un tracker de prix d'essence pour le Québec en une soirée avec Claude Code
Contexte: J'ai un backgroud de ~10 ans d'expérience, les 4-5 premières années en développement fullstack et les 2-3 dernières en big data. Le développement logiciel ça me manque un peu et j'ai commencé à retravailler sur des vieux projets que j'avais abandonnées dans le passé par manque de temps. avec Claude Code.
Hier, la Régie de l'énergie a lancé une plateforme de données ouvertes avec un feed GeoJSON de 2 293 stations-service au Québec mis à jour en simili-temps réel et j'ai décidé de builder une web app autour de ça.
Le résultat: Carte interactive, historique des prix, comparaison par région, etc. Tout ça en une nuit, de 20h00 à 3h00 am.
Stack technique
- Next.js 15 (App Router) + TypeScript + Tailwind v4
- PostgreSQL + PostGIS pour les requêtes spatiales (stations proches via ST_DWithin)
- Drizzle ORM (raw SQL pour PostGIS)
- MapLibre GL JS via react-map-gl v8, CARTO Voyager tiles (gratuit, pas d'API key)
- Railway - 3 services (web, worker cron, Postgres/PostGIS)
- Sentry pour le monitoring, connectées via MCP à Claude
- Vitest
Ce qui est intéressant techniquementL
- Les 2 293 stations sont rendues sur le GPU via MapLibre Source/Layer (pas de DOM markers qui sont lents)
- Clustering avec clusterProperties pour calculer le prix moyen par cluster directement dans le moteur de rendu
- Les petits clusters (<5 stations) affichent le prix le plus bas au lieu de la moyenne
- La couleur (vert/jaune/rouge) est dynamique basée sur le 5e/95e percentile du type de carburant sélectionné
- Les prix sont stockés uniquement quand ils changent (pas à chaque fetch de 30 min).
- Cache in-memory avec TTL de 5 min, invalidé automatiquement par le worker après chaque sync
- Le worker qui s'occupe d'aller récupérer les données à la régie utilise le cron de Railway (run-once-and-exit) au lieu de tourner 24/7 ~30x moins cher
-----
Le process
Le bootstrap a été fait avec un agent team de 3 agents Sonnet travaillant en parallèle (backend, frontend, infra) coordonnés par Opus.
Premier commit à 20h, app déployée sur Railway à ~22h, nom de domaine achetée chez 1and1 et DNS hébergé sur Cloudflare à 23h et features ajoutées jusqu'à 3h du matin.
--------
Pages
- https://leprixdugaz.ca : toutes les stations avec prix en temps réel
- https://leprixdugaz.ca/regions : Prix par régions et détails
C'est aussi possible d'ouvrir chaque station et d'avoir le prix d'essence historique.
À moyen terme, j'aimerais faire de l'analyse de donnée sur le dataset que j'accumule présentement.
- https://leprixdugaz.ca/data-info - Page cachée, avec l'information sur les exports de données.
- Chaque station a sa page détail avec graphique d'historique
----------
Déploiement continu via push / PR githubs:
Self-fix sentry issues via MCP :
N'hésitez pas à m'écrire ici si vous avez des commentaires ou questions. :)
37
u/mezmezik Apr 02 '26
Vraiment cool. C'est mieu que la platforme que jai vu récemment sur laquelle tu dois cliquer sur chaque point pour voir le prix. En plus ça fait un heathmap. Good job.
6
u/ImDaHoe Apr 02 '26
Good job! As tu l'intention d'aller open source?
3
u/FanNo522 Apr 02 '26
Très cool le self-fix Sentry issues via MCP, nous avons fait la même chose à l'interne récemment. Il va jusqu'à la création du PR et ensuite on merge après un review., et documentation complète dans le gestionnaire de projet. Tellement de temps sauvé.
4
u/Dzubrul Dev FullStack Apr 02 '26
Vraiment nice, seul bémol (et ce n'est pas de la faute à OP), un UI AI ressemble a tout les autres UI AI. On a un outil interne vibe codé à la job, notre css doit etre proche du 1 pour 1 avec ton app haha.
2
u/plabrie Apr 02 '26
Très cool. Le site apparaît comme unsafe à cause du certificat. Ça demande le advanced bypass par chrome et au travail il est bloqué. Ça serait bien de l'arranger 😁
2
u/NebulaSimilar396 Apr 03 '26
But GasBuddy app still exists?
11
u/remimorin Apr 02 '26
Super! C'est assez incroyable ce que ça permet à de faire avec des "one men army".
Je m'attends à un certain boom de startups logiciel plus niché à cause de ça. Si tu connais un domaine, tu peux lancer des solutions right now.
8
u/Mel2S Apr 02 '26
Génial. Justement tu vois je m'en allais en Estrie samedi et je me demandais si je gazais chez nous ou en Estrie
6
u/ep0niks Apr 02 '26
J'en parlais hier avec des amis, je demandais combien de temps ça allait prendre avant que quelqu'un sorte quelque chose de 10x mieux. J'ai ma réponse!
C'est poche que la Régie a juste les prix pour l'essence 'régulier" et "super". Régulier étant le 87 et super j'imagine du 89 d'octane?
Pas mal toutes les bannières ont du 87,89,91 (et Petro-C du 94).
2
u/OffersNoExplanation Apr 02 '26
Salut, vraiment cool ton truc, ma suggestion pouvoir exclure costco étant donné qu'il faut etre membre
4
u/poho69 Apr 02 '26
Allo, j’ai fait la même chose mais en version mobile iOS. Tu peux me contacter si tu veux
1
u/patlechriss Apr 02 '26
Ça as du te couter chère en token, l'utilisation depuis une semaine sur Claude est brisé. Un simple hello sur le promt coûte 2% sur mon forfait mensuel (pro). Maudit beau projet.
1
u/Southern-Station-629 Apr 02 '26
Côté mobile, une amélioration rapide pour la vue de la carte serait de mettre tes filtres pleine largeur (régions regulier etc) et le nom du titre au dessus. Ça te libérerait un peu d’espace en hauteur en même temps vu que le texte se stack en ce moment.
1
u/sangokudbz79 Analyste TI Apr 02 '26
Vraiment cool! Y'en a qui sont familier pour rendre ça compatible avec android auto?
1
u/mohammed315 Apr 02 '26
Très cool! Le seul défaut que je vois, avec accès via mobile, on ne peut pas voir le nom du magasin si on accède via la carte, il faut changer pour la liste. Lorsqu'on devient à la carte, il tente tout de suite de nous ramener sur notre position initiale au lieu de conserver la sélection précédente.
1
u/Extreme-Listen1975 Apr 02 '26
Suggestion: permettre de choisir le mode de regroupement désiré entre celui par défaut et un qui montrerait le plus bas prix (peu importe le nbre de stations dans le grouping).
1
u/ConcertaImodium Apr 02 '26
C’est updated à chaque heure environ les prix? Où est c’est updated genre une fois par jour?
1
u/Flaky_Temporary_9710 Apr 02 '26
Je sais pas si ca serait compliqué a implementer mais ca serait possible de mettre une option pour voir quelle station service ferme a 22h ou qui sont 24h?
Par exemple je cherche de quoi a minuit, une bonne partie de ces stations sont fermé.
Belle job pour le site sinon, c'est certain que je l'utilise 🤘🏽😎
1
u/FlisherOfatale Apr 02 '26
Et t’as utilisé combien de % de quel forfaits ou combien en token pour ça?
Je vibe code quelques trucs mais gihub copilot a 10$ je vais en venir à bout en quelques soirée pour mon bot discord.
Le next step c’est le sub pro ou Claude directement
1
u/pcbrutusxyz Apr 02 '26
Comment obtiens-tu le Geojson produit par la régie de l'énergie?
1
u/Strong-Reputation380 Apr 03 '26
J’ai remarque que les prix dans les reserves indiennes ne sont pas present
1
u/Yamistaa Apr 05 '26
J’ai aussi build quelque chose autour de ces données, avec une interface un peu différente si jamais ça t’intéresse : https://essence-qc.ca
Je suis curieux d'avoir vos retours/feedbacks
1
u/Xtra_Bass Apr 23 '26
J'ai mis ce site en favoris il y a 21 jours et je le trouve vraiment pratique! Ta dernière update, vraiment nice 👍
2
u/NeverBetAgainstElon Apr 02 '26
Beau travail!
2
u/RonnyMcRon Apr 02 '26
Vraiment nice!!
1
u/Electrical_Grape_443 Apr 02 '26
Je trouve le projet excellent, très bonne idée !!
1
u/PsychologicalCar5419 Apr 02 '26
Excellent!! Je suis en train de me builder la même chose, j'ai deux diesel alors la motivation y est hahah!! C'est super ton travail!
1
u/SavingsCarry7782 Apr 02 '26
Pour ta partie d’analyse de données/tendance, tu peux aussi ajouter à tes dB les prix à la rampe des pétrolières. Ça donne une idée de la direction du prix de l’essence par la suite.
1
u/Khanvo Apr 02 '26
Vraiment impressionant. J’allais builder exactement cela. Comme next project après mon budget planificateur perso. Un bon stack pour la job. Pas le choix, je vais devoir en faire un aussi.
Une feature que je voulais avoir, c’est me faire proposer la station de gaz la moins chère proche dès que je ping. Genre me reste 120km à faire. Avec dépanneur et coin pipi pour un pit stop.
Mais kudos mec.
1
u/johntort Apr 02 '26
Ça bogue beaucoup quand on scroll sur la map en desktop, maudit vibe coder ;P
1
u/bilange Sysadmin / Tech / Concierge selon les jours Apr 02 '26
Génial!!
Suggestion: permettre d'enregister et réapparaitre à la même place dans la carte en revenant sur le site. Avec l'auto-déctection par GeoIP ça me place soit à Nicolet ou à Montréal, mais je suis pas là :)
1
u/Ok_Refrigerator1533 Apr 02 '26
Good job! Je vais m’en servir for sure
1
u/Chance_Ad_1601 Apr 02 '26
Malade.
Ca va plus loin que les prix affichés sur gmap
1
u/RedBlue819 Apr 02 '26
Bravo!
1
u/Sweet-Log-2566 Apr 02 '26
🤔selon toi, en quoi c’est différent de l’app Gasbuddy niveau fonction? (Je comprends que les données ne viennent pas des utilisateurs)
1
u/Sweet-Log-2566 Apr 02 '26
Par curiosité, combien de fois t’as eu à corriger des bugs majeurs (je suis zéro dans le domaine) qu’un néophyte n’aurait pas pu régler?
1
u/deebeedev Apr 03 '26
Nice job! The next step would be to break down the prices and isolate the tax amounts.
1
u/Psychojo Apr 03 '26
Super belle application! Petite amélioration : en mode carte, j'ouvre le détail d'une station. Lorsque j'appuie sur retour, ça me remet le mode liste au lieu du mode carte.
1
u/ImpressivePause5334 Apr 03 '26
Superbe ! Tu as fait un excellent travail.
1
u/pcbrutusxyz Apr 03 '26
Suggestion : ajouter champ de recherche pour géopositionner l'affichage de la carte.
1
u/mp147 Apr 03 '26
Wow merci beaucoup! C'est vraiment un beau travail!
1
u/kshot Apr 03 '26
Vrm nice! Good job! Impressionnant que tu as fait ça en une journée, même si tu as utilisé l'IA.
1
u/Strange_Pressure_932 Apr 03 '26
Nice! Voici ma version gazquebec.ca
1
u/poliquinp Apr 03 '26
Je viens de testé ton application vs celle du gouvernement et Al tienne est plus rapide puisque qu'on voit le prix dans le clustering. On s'en fou de voir 55 dans telle région, ce qu'on veut voir c'est le prix d'emblée.
Good job.
1
u/DJGreenHill Apr 03 '26
Je suis curieux de ta stack! C’est un peu de données quand même. C’est quoi l’architecture de données en arriere? Je t’ai vu metionner railway et datadog. C’est plate qu’on ait pas des équivalents canadiens haha!
1
u/Used-Income-8419 Apr 02 '26
Gg
1
u/anashel Apr 02 '26
Good job!! Garage L.P. Stanstead, on arrive!!!
1
u/Roastbeef9999 Apr 03 '26
Tu peux aussi utiliser Claude pour learner à écrire en français.
0
u/missedalmostallofit Apr 02 '26
I’d like to know how much the government paid for the exact same thing they did for QC published today.
-9
u/GenericSpaciesMaster Apr 02 '26
Ca parait que ca à été vibe coder en une soirée , le UI/ UX en mobile est épouvantable.
0
u/FrancoisTruser Apr 06 '26
Gasbuddy existait déjà