Registro de entrega
Fecha del registro: 10 de septiembre de 2026. La tecnología y las capturas describen la versión entregada según quedó documentada en esta fecha. Cualquier observación de rendimiento corresponde al mismo registro puntual. El sitio enlazado puede incluir cambios posteriores realizados por el cliente u otros proveedores.Contexto del negocio
RampTracker Web es un producto personal que diseñé y desarrollé para complementar mi aplicación móvil RampTracker desde el navegador. Soy responsable de ambos proyectos, desde la dirección del producto y la implementación hasta la publicación y el mantenimiento. El sitio permite explorar lugares para botar una embarcación antes de instalar la app y compartir una rampa concreta con cualquier persona que use un navegador.
Problema
Elegir una rampa implica más que encontrar un punto en el mapa. Las personas necesitan comparar ubicaciones, consultar las instalaciones disponibles y entender qué información se conoce antes de planificar una salida. Esa búsqueda debe funcionar tanto en un ordenador en casa como en un teléfono cerca del agua, sin exigir la descarga de una aplicación.
Restricciones
Un catálogo geográfico amplio necesita un mapa fácil de usar y una lista de resultados legible en pantallas de tamaños muy distintos. La información de una rampa puede estar incompleta, el acceso a la ubicación puede no estar disponible y la carga del mapa o de los datos puede fallar. La experiencia también necesita navegación en inglés y español y páginas de rampas que se puedan abrir directamente.
Decisión
Organicé la experiencia alrededor de un mapa sincronizado con un panel de resultados. Al mover el mapa cambian las rampas visibles; la búsqueda y los filtros de instalaciones permiten acotar la selección. En escritorio, el mapa y la lista aparecen juntos. En móvil, la navegación entre mapa y lista y un panel inferior permiten consultar resultados y detalles.
Experiencia entregada
Explorar y comparar
El mapa interactivo agrupa rampas cercanas y permite buscar por nombre o ubicación. Los filtros incluyen instalaciones como muelles, baños y estacionamiento para remolques. Los controles de ubicación cercana ayudan a orientar el mapa, y al seleccionar un resultado se conecta su posición con los detalles de la rampa.
Abrir y compartir una rampa
Cada rampa pública tiene una página con su ubicación, las instalaciones conocidas, indicaciones para llegar y una opción para reportar un problema. Las rutas en inglés y español permiten consultar tanto el directorio como las fichas en ambos idiomas. La información desconocida se indica de forma explícita, sin presentarla como una instalación o un estado confirmado.
Mantener la búsqueda accesible
La interfaz contempla estados de carga, resultados vacíos y errores, una lista alternativa cuando el mapa no carga y contenido del directorio y de las fichas renderizado en el servidor. El sitio también conecta a los visitantes con la app móvil y ofrece vías de soporte y comentarios sobre el producto.
Propiedad y soporte
Soy responsable de la interfaz adaptable, la integración del mapa, las rutas públicas de rampas, la integración de datos, el contenido bilingüe y el proceso de despliegue en Cloudflare. Mantengo el sitio web y la aplicación móvil como dos partes conectadas del mismo producto independiente.
Tecnología
La interfaz utiliza React, TypeScript, Vite y React Router. MapLibre GL presenta el mapa con mapas base de OpenFreeMap. Cloudflare Pages y Pages Functions sirven el sitio y las rutas públicas, con servicios basados en Supabase para los datos de rampas. El explorador incluye diseños adaptables, gestión del foco del teclado y soporte para movimiento reducido.