03 · Aplicación web · 2026
OurMap
Un mapa de recuerdos de viaje para parejas, amigos y familia.
- 3D
- Globo interactivo con Mapbox GL
- 3
- Estilos: calles, satélite y oscuro
- Álbum exportable de cada mapa
- Demo
- Abierta, sin registro
Contexto
Las fotos de un viaje acaban repartidas entre el carrete del móvil y las conversaciones, y con el tiempo cuesta recordar dónde se estuvo y cuándo.
OurMap propone guardarlas donde ocurrieron. Cada mapa es un globo con los lugares visitados, unidos por la ruta del viaje, y cada lugar abre un diario por días con sus fotos y notas. El mapa se comparte con la pareja, los amigos o la familia para completarlo entre todos.
Mi rol
Diseño y desarrollo full stack
- OurMap es un producto que diseño y desarrollo por completo, de la interfaz a la base de datos.
- El trabajo principal está en la experiencia del mapa: el globo, las animaciones al viajar de un lugar a otro y un diario que se lee igual de bien en móvil que en escritorio.
- El backend se apoya en Supabase para la autenticación, los datos y el almacenamiento de las fotos.
El producto
Qué hace, parte por parte
01 / 05
Un globo con la ruta del viaje
Los lugares aparecen como marcadores con su emoji y su orden, unidos por la ruta entre ellos. El filtro inferior deja ver todos los viajes o solo los de un año.
- Marcadores numerados con emoji
- Ruta entre lugares en orden cronológico
- Filtro por año
02 / 05
El diario de cada lugar
Al abrir un lugar el mapa viaja hasta él y muestra su diario: una línea por días con título, texto y fotos, y una galería con todas las imágenes.
- Momentos por día con fotos y notas
- Galería a pantalla completa
- Fotos reordenables arrastrando
03 / 05
Todos los lugares de un vistazo
El panel lateral lista los lugares agrupados por año, con su miniatura y sus fechas, y lleva a cualquiera de ellos con un clic.
- Agrupación por año
- Miniatura y fechas de cada lugar
- Acceso directo al diario
04 / 05
Tres estilos de mapa
El mismo mapa se ve en calles, satélite o modo oscuro, y la interfaz se adapta al tema elegido.
- Calles, satélite y oscuro
- Tema claro u oscuro en toda la aplicación
05 / 05
Compartir y revivir
Un mapa se comparte por invitación para que otras personas añadan sus lugares. La presentación recorre el viaje de forma automática y el mapa completo se descarga como álbum en PDF.
- Invitaciones por enlace
- Presentación automática del viaje
- Exportación a PDF
Arquitectura
Cómo está construido
- Frontend
- React 19 con TypeScript, Vite y Tailwind CSS. Las transiciones están hechas con Framer Motion.
- Mapa
- Mapbox GL con proyección de globo, marcadores propios y rutas dibujadas entre lugares.
- Backend
- Supabase: autenticación, base de datos PostgreSQL y almacenamiento de las fotos.
- Exportación
- El álbum en PDF se genera en el navegador a partir de la propia interfaz.
- Despliegue
- Vercel, con una demo pública que funciona sin registro.
- React 19
- TypeScript
- Vite
- Tailwind CSS
- Supabase
- Mapbox GL
- Framer Motion
Galería
Más pantallas
Siguiente proyecto
Askesis
La plataforma con la que los entrenadores personales llevan a sus clientes y su negocio.