FUELFINDER.AI

We designed and developed fuelfinder.ai as a consumer-first progressive web app that makes finding the cheapest fuel across the UK effortless. Built on React, TypeScript, and Tailwind CSS with a cloud-powered backend, the platform ingests official Competition and Markets Authority (CMA) open data to deliver live pricing from over 8,000 petrol stations nationwide.

The Challenge

UK drivers waste significant money each year by filling up at whichever station is nearest rather than the cheapest. Existing comparison tools were either outdated, cluttered with ads, or lacked the mobile-first experience modern users expect. Our brief was to build something fast, beautiful, and genuinely useful — a tool people would install on their home screen and return to weekly.

What We Built

Core Search & Map Experience The heart of the app is a postcode-driven search that returns nearby stations ranked by price. Results render in a responsive card list with brand logos, distance, and per-litre pricing for unleaded, diesel, super unleaded, and premium diesel. An interactive Leaflet-based map view lets users toggle between list and map, with clustered markers, a "recenter" control, and a cheapest-station banner highlighting the best deal in the area.

Station Detail Sheets Tapping a station opens a rich bottom sheet with opening hours, 24-hour status, amenity badges, price history charts powered by Recharts, user-uploaded station photos, and a freshness indicator showing exactly when prices were last updated. Users can favourite stations for quick access via a dedicated drawer.

Route Planning & Journey Costs We integrated a route planner that calculates estimated fuel cost for a journey based on vehicle MPG, tank size, and fuel type. Recent routes are persisted locally, and the UI suggests the cheapest station along the planned route — turning a simple price lookup into genuine trip-planning utility.

EV Charger Integration Recognising the shift toward electric vehicles, we added an EV charger layer that displays nearby charge points with connector-type badges, so the app serves both ICE and EV drivers from a single interface.

SEO Landing Page System To drive organic acquisition, we built a templated landing page engine that generates keyword-targeted pages — "Cheapest Petrol Near Me," "Diesel Prices Today," "Supermarket Fuel Prices," and city-specific variants for London, Manchester, Birmingham, and dozens more. Each page includes structured JSON-LD (FAQPage, BreadcrumbList, WebApplication), internal link mesh, FAQ accordions, and a sticky mobile CTA. The system is entirely data-driven: adding a new landing page requires only a single data entry, with no template changes.

Progressive Web App The app is fully installable as a PWA with service worker caching, offline fallback, and an in-app install banner that adapts its messaging to iOS and Android. We implemented a "What's New" changelog overlay and a guided walkthrough for first-time users.

Cloud Backend & Data Pipeline On the backend, we built an automated data pipeline using serverless edge functions. A proxy function authenticates with the CMA API, fetches station metadata and pricing, and upserts records into a PostgreSQL database. A separate CSV import function allows bulk price updates via file upload to cloud storage — enabling the client to refresh all 17,000+ price records in seconds. Row-level security policies protect all data access.

Analytics & Engagement We instrumented the app with lightweight analytics tracking search events, station views, and fuel type preferences, stored in a usage events table for product insight. A cookie consent banner and full privacy, terms, and cookie policy pages ensure GDPR compliance.

Technical Stack

• Frontend: React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion

• Mapping: Leaflet, React Leaflet, marker clustering

• Charts: Recharts

• Backend: Serverless edge functions, PostgreSQL with RLS

• PWA: Vite PWA plugin, service worker, manifest

• SEO: JSON-LD structured data, dynamic meta tags, sitemap, pre-rendering

The Result

fuelfinder.ai delivers a polished, production-grade product that combines real-time data, beautiful UI, and genuine consumer utility. It demonstrates our capability across the full stack — from data pipeline engineering and API integration to pixel-perfect responsive design and SEO-driven growth architecture.