Línea 1 — Metro de Lima
Aplicación web de movilidad para la Línea 1 del Metro de Lima.
La dirección principal abre la aplicación directamente —un espacio de
trabajo con barra
lateral fija, barra superior y un área central que cambia de módulo sin
recargar: mapa geográfico con seguimiento del tren, planificador de ida y
vuelta, catálogo de estaciones, tarjeta, horarios, avisos y asistente.
| Ruta | Qué es |
|---|
/ | La aplicación: es lo primero que se ve al abrir el sitio |
/bienvenida/ | Presentación del proyecto: qué incluye, el trazado animado y el enlace de entrada |
/rediseno/ | Un rediseño explorado y descartado: panel de operación, un módulo a la vez |
/clasico/ | La primera versión del proyecto, en HTML y JS sin build |
Quien abre la dirección entra directamente a la herramienta. La presentación
está a un clic, en «Sobre el proyecto», al pie de la barra lateral.
La aplicación vive en web/: Next.js + TypeScript + Tailwind CSS +
Framer Motion + Leaflet, exportada como sitio estático.
⚠️ Interfaz conceptual con fines académicos. No representa el sitio oficial
de Línea 1 ni tiene relación con su operador. Los tiempos, frecuencias y
niveles de afluencia son estimaciones simuladas.
Ver docs/DATOS.md.
Cómo está montada la aplicación
El mapa ocupa el centro y nunca se abandona. Lo que cambia es el panel de la
izquierda, según la sección elegida en la barra lateral.
| Sección | Qué muestra en el panel |
|---|
| Inicio | Planificador, rutas frecuentes y, durante el viaje, el progreso y la estación actual |
| Mapa | El mapa a pantalla completa con sus controles |
| Planificar viaje | Origen, destino, modo y el detalle del tramo calculado |
| Estaciones | Las 26 estaciones con fotografía, buscables |
| Tarjeta | Saldo, viajes disponibles y accesos |
| Horarios | Primer y último tren, y la frecuencia por franja |
| Avisos | Estado del servicio y avisos vigentes |
| Asistente | Preguntas en lenguaje natural sobre rutas, horarios y tarifas |
Cómo se comporta
- 🗺️ Mapa geográfico real (Leaflet + OpenStreetMap) con las 26 estaciones,
el trazado de la línea y etiquetas de las avenidas principales.
- 🚆 Tren animado sobre coordenadas reales: interpola entre estaciones, se
orienta según el rumbo, se detiene en cada parada y marca las ya recorridas.
El recorrido se calcula, no está grabado.
- 🎛️ Control del viaje: iniciar, pausar, continuar, finalizar, reiniciar e
iniciar la vuelta (el tren cambia a azul y gira).
- 🟢🔵 Ida y vuelta con ruta verde y azul, y el resto de la línea atenuado.
- 📍 Selección desde el mapa: al tocar una estación se abre su ficha con
próximos trenes, afluencia, avenida y botones de origen y destino.
- 🎯 Zoom automático al tramo elegido y botón para ver toda la línea.
- 🧭 Mi ubicación con la estación más cercana.
- 📱 Móvil: el mapa ocupa la pantalla y el contenido vive en una hoja
inferior arrastrable, con navegación inferior.
No hay botones decorativos: cada control está ligado a un estado real.
Cómo ejecutarlo
git clone https://github.com/shakdows/linea-1-metro-de-lima.git
cd linea-1-metro-de-lima/web
npm install
npm run dev # http://localhost:3000
Para generar el sitio estático que se publica (web/out):
npm run build
Despliegue
Vercel — importa el repositorio tal cual. El vercel.json de la raíz ya
indica que debe construir web/ y publicar web/out; no hace falta tocar el
Root Directory.
Ojo con vercel.json: no debe llevar trailingSlash ni cleanUrls.
next.config.ts ya genera las rutas con barra final, y repetirlo en Vercel
hace que también se redirijan los .css y .js, que pasan a dar 404 y la
página se queda sin estilos.
GitHub Pages — configurado en .github/workflows/pages.yml: construye
web/ con BASE_PATH=/<repo> y publica web/out. En Settings → Pages elige
GitHub Actions.
Estructura
web/ Portada y aplicación en Next.js (ver web/README.md)
public/app/ Redirección para los enlaces antiguos a /app/
public/rediseno/ El rediseño descartado, ya construido (archivo)
public/clasico/ La primera versión, en HTML y JS sin build (archivo)
vercel.json Le dice a Vercel que construya web/
docs/ Datos, arquitectura, guía de activos y arquetipo de usuario
fotos linea 1/ Fotografías originales de las estaciones
Las versiones archivadas
Nada se descarta: las dos versiones que no están en uso siguen publicadas y
enlazadas desde el pie de la página de presentación.
/rediseno/ — el rediseño descartado
Una exploración que convertía la aplicación en un panel de operación: un módulo
a la vez en el centro, sin mapa permanente. Se probó y se volvió a la
disposición actual, en la que el mapa nunca se abandona. Es una copia ya
construida, guardada en web/public/rediseno/, así que se sirve tal cual sin
recompilarse.
Solo se le añadió, por JavaScript, una banda superior que avisa de lo que es y
enlaza a la versión actual. Se inserta colgando de <html> y no de <body>:
React hidrata los hijos de body y borraría cualquier nodo que no haya
generado él.
Comparte las fotografías de /estaciones/ con la versión actual, así que no se
duplican. Sus rutas internas se fijaron para un dominio servido desde la raíz;
el flujo de GitHub Pages las reajusta al subdirectorio del repositorio antes de
publicar.
/clasico/ — la primera versión
HTML, CSS y JavaScript sin build, con sus tres páginas: portada, mapa y ficha de
estación. Se conserva íntegra en web/public/clasico/.
Se le hicieron solo dos cambios al archivarla, ambos por seguridad y no por
diseño:
- Se retiró el service worker. Servía desde caché con ámbito
/ y era la
causa de que el despliegue siguiera mostrando la versión antigua después de
publicar la nueva. La aplicación actual da de baja cualquier registro que
quede, así que dejarlo habría hecho que ambos pelearan.
- Se añadió
noindex y una banda superior que avisa de que es un archivo y
enlaza a la versión actual, para que nadie llegue por buscador y crea que es
el proyecto vigente.
Todo lo demás —maquetación, estilos, datos y comportamiento— está tal cual.
Personalizar el aspecto
Toda la identidad vive en el bloque @theme de
web/app/globals.css:
--color-sidebar: #081812; --color-verde: #009b3a; --color-azul: #1687f8;
--color-fondo: #f5f7f6; --color-superficie: #fff; --color-borde: #dde4e0;
--color-tinta: #111827; --color-tinta-suave: #667085;
Tailwind genera las utilidades (bg-verde, text-tinta-suave, border-borde…)
a partir de esos tokens: cambiarlos cambia la aplicación entera.
Documentación
Licencia
MIT — ver LICENSE.
