PAUL PEREZ

Volver a proyectos
FULLSTACK2025EN PRODUCCION

LLEGO

Seguimiento en vivo de los buses del corredor complementario de Lima: rutas, paraderos y posiciones de las líneas amarilla, azul, roja y morada.

LLEGO

Sobre el proyecto

Servicio web para hacerle seguimiento a los corredores complementarios de Lima —líneas amarilla, azul, roja y morada— con sus 31 rutas, sus dos sentidos, sus paraderos y la posición de los buses actualizada cada 20 segundos. No hay nada que instalar y el catálogo se ve sin cuenta; la sesión con Google solo sirve para guardar favoritos. El reparto de responsabilidades es explícito: el catálogo y los favoritos viven en Supabase (Postgres con RLS) y las posiciones llegan de un microservicio de telemetría aparte (Redis + FastAPI) que la web consume por un Route Handler propio, para que la API key nunca llegue al navegador.

Stack

Next.jsFRONTENDTypeScriptFRONTENDSupabaseDATABASEPostgreSQLDATABASEMapLibre GLFRONTEND

Funcionalidades

  • Mapa en vivo con hasta 6 rutas simultáneas sobre MapLibre y teselas de OpenFreeMap (sin API key).
  • Posiciones refrescadas cada 20 s, interpoladas 2,5 s hacia la nueva captura — sin extrapolar: un bus detenido no se dibuja tres cuadras más allá.
  • Cada bus es un círculo del color de su línea, con flecha de rumbo solo cuando el AVL lo reporta.
  • Estado explícito por captura (ok, sin datos, vencida, inválida): una falta de datos nunca se lee como una ruta sin buses.
  • Selección de rutas guardada en la URL, así un enlace compartido abre el mapa ya armado.
  • "Cerca de mí": filtra rutas con buses a 500 m / 1 km / 2 km, con la ubicación resuelta solo en el navegador.
  • Catálogo de 31 rutas por línea y sentido, con buscador y paraderos por ruta.
  • Favoritos por persona con login de Google (Supabase Auth, flujo PKCE y RLS).
  • Tema claro/oscuro resuelto en el servidor por cookie, sin parpadeo al hidratar.

Galería

Mapa en vivo con cuatro rutas y sus buses
Mapa en vivo con cuatro rutas y sus buses
Portada con el tablero de líneas
Portada con el tablero de líneas
Catálogo de rutas del corredor con buscador y favoritos
Catálogo de rutas del corredor con buscador y favoritos
Selector de rutas por línea y sentido
Selector de rutas por línea y sentido

Proyectos relacionados

E-commerce desarrollado primero con Spring Boot y luego migrado a Angular + Express.

AngularExpress.jsSpring BootMySQL
Ver detalleDemo

Gestor de archivos con permisos por usuario, historial de acciones y almacenamiento en Cloudflare R2.

AngularExpress.jsCloudflare R2PostgreSQL
Ver detalleRepositorio