- Communities & information
Abastece
Which fuel stations have fuel and queues, reported by the community — I built the site with live data and the public map.
- Period
- 2026
- Status
- In production
- Role
- Marketing site and public map: API integration, offline cache, status pins and PT/EN
Problem
During shortages, drivers don't know which stations have petrol or diesel, or how long the queue is. The site needed to show the community's real data, not a fixed list.
Solution
I replaced the hard-coded station list with requests to the Abastece API, with browser caching and an offline fallback. I added status filters (fuel, no fuel, queue) with green, red and yellow pins, in-site navigation to the station, and the site in Portuguese and English. The Ionic app and the Laravel/PostGIS backend are the team's work.
Technical decisions
01
No build step: HTML and JS with CDN libraries
Leaflet and Ionicons loaded from a CDN, no bundler — a light page and trivial deployment.
02
TTL cache with an offline fallback
Stations stay in `localStorage` for 10 minutes; with no network, the map shows the last data instead of going blank.
03
Stats computed from the API
Station totals, brands and coverage are computed client-side from the same response, with no hand-written numbers.
04
Translations via `data-i18n` attributes
A simple translations object, with Portuguese forced on first load.
Images
01 / 03 — Abastece home page: "The right pump, at the right time", with a phone showing the station map
Technologies
- JavaScript
- HTML/CSS
Verifiable results
What I learned
Moving a site from static data to a real API without hurting the experience when the network fails.
SDGs
SDG 7 · Affordable and Clean Energyprimary
During shortages, the community map shows which stations have fuel and where queues are, cutting the trips made hunting for fuel.