Imágen del post

🗺️ Octano: el mapa de gasolineras que yo mismo necesitaba

Octano no empezó como un proyecto pensado para enseñar o lucir, sino como algo que yo mismo necesitaba. Voy a menudo al gimnasio en el pueblo de al lado y empecé a notar algo curioso: el precio del combustible podía variar hasta 30 céntimos por litro entre una gasolinera y otra.

Eso me llevó a buscar opciones para comparar. Utilizaba la web de Plenergy, pero claro, solo muestra sus propias estaciones, y yo quería ver todas. Así que me puse manos a la obra: nació Octano.


🧩 El problema con los datos públicos

La primera versión de Octano se basaba en la API pública del gobierno, que contiene datos de miles de gasolineras en toda España. Y la verdad, es una fuente bastante completa, pero me encontré con algunos detalles que no terminaban de encajar:

  • Había precios que no se actualizaban todos los días (aunque en general no estaban muy desfasados).
  • Algunas estaciones que habían cerrado seguían apareciendo con su último precio registrado.
  • Y otras tenían errores como coordenadas incorrectas, con algunas situadas literalmente en el Golfo de Guinea (lat 0, long 0).

Me di cuenta de esto a pie de calle, al comparar los precios de la app con los que veía en persona. Y como mi intención era usar esta app de forma real, no me parecía aceptable ver un precio y encontrarme otro al llegar a repostar.


🔍 Scraping como solución

Para mejorar la fiabilidad, decidí combinar la API oficial con scrapers propios. Actualmente, Octano:

  • Toma como base la información de la API del gobierno.
  • Y en el caso de algunas cadenas como Plenergy y Petroprix, scrapea directamente sus precios actualizados desde sus webs.

El sistema hace match entre las gasolineras y actualiza los precios automáticamente cuando es posible. No es perfecto todavía, pero con estas fuentes combinadas, la información es mucho más precisa.


🗺️ Geolocalización real con PostGIS

Uno de los aspectos técnicos que más disfruté fue trabajar con PostgreSQL como base de datos y PostGIS para todo lo relacionado con la geolocalización. PostGIS añade soporte espacial a PostgreSQL, y me permitió hacer cosas como:

  • Buscar las gasolineras más cercanas a una ubicación
  • Calcular distancias con precisión
  • Ordenar resultados por proximidad de forma eficiente

Fue un descubrimiento increíble. Me leí gran parte de su documentación (muy bien explicada, por cierto) y quedé encantado con lo potente que es esta herramienta. Sin duda, una de las mejores decisiones técnicas del proyecto.


🧭 El mapa: simple, directo y útil

El frontend está hecho con Astro y React, usando Leaflet y OpenStreetMap para el mapa. Por ahora, se centra en lo importante: mostrar un mapa con las gasolineras y sus precios actuales.

Aún tiene mucho margen de mejora en cuanto a interfaz y funcionalidades, pero ya es plenamente funcional, y de hecho lo usamos en casa (mi familia incluida).


🚀 El despliegue: donde más he aprendido

Una parte que disfruté especialmente fue todo lo relacionado con el despliegue y automatización.

Monté un sistema de CI/CD con GitHub Actions que construye dos imágenes Docker: una para el frontend y otra para el scraper. Estas imágenes se ejecutan en mi servidor personal, usando Docker Compose. Para exponer la app a Internet sin abrir puertos, utilizo Cloudflared, el túnel seguro de Cloudflare.


📌 Hoy

Octano es un proyecto activo y en constante evolución. Aún no tiene muchas funcionalidades, pero cumple su propósito principal: ayudarte a encontrar gasolina barata cerca de ti.

Ya lo usamos en casa a diario, y poco a poco irá creciendo con nuevas fuentes y mejoras visuales. Si te apetece probarlo tú también, puedes hacerlo aquí:

🔍 Buscar la gasolinera más barata

Y si tienes curiosidad por el código, lo tienes todo abierto en GitHub:

🔗 Repositorio de Octano