Partir de la ciudad real
El reto de producto era hacer que una visita se sintiera como una aventura, no como una lista de puntos en un mapa. Cada pista conduce a un lugar que el jugador puede observar y recorrer a pie.
CityHunts · Aventura urbana autoguiada
CityHunts
Producto, arquitectura y flujos de juego de una plataforma de aventuras urbanas.
CityHunts convierte una caminata en una aventura interactiva: descubre rutas, visita lugares reales y resuelve pistas desde el móvil. No hace falta descargar una app ni seguir a un guía. Contribuí a la arquitectura y al producto; el stack actual combina una aplicación web en React con servicios backend de Supabase.
Convertir una caminata en un juego
CityHunts lleva la exploración urbana al navegador del móvil. La ruta combina lugares reales, pistas y retos, sin exigir una app instalada ni un guía en directo.
Un ciclo claro para jugar
La persona explora rutas, consulta la historia y el punto de inicio, resuelve una pista en el lugar y sigue su progreso. La interfaz ofrece pistas de ayuda y permite responder desde el teléfono.
Una base para descubrir y crear
La aplicación combina React, TypeScript y Vite con Supabase para datos, autenticación y almacenamiento. Leaflet representa ubicaciones; Stripe gestiona los pagos de experiencias y de creación con IA.
Iterar sobre el recorrido completo
El historial añade creación de rutas con IA, acceso de prueba para jugadores invitados, tarjetas para compartir la finalización y valoraciones posteriores. También ajusta la vista móvil para priorizar el inicio y mostrar antes el acertijo.
React 18TypeScriptViteSupabaseLeafletStripeWeb móvil
Cómo está construido
Una aplicación web ligera conecta la exploración en el móvil con mapas, progreso de juego y servicios de creación y pago.
Aplicación web
React 18 y TypeScript, compilados con Vite. Tailwind CSS da estilo a la interfaz y React Router gestiona rutas como explorar, jugar y crear.
Datos y servicios
Supabase aporta PostgreSQL, autenticación y almacenamiento. Sus Edge Functions gestionan procesos backend como generación de rutas y operaciones de pago.
Rutas con lugares reales
Leaflet y React Leaflet muestran mapas y ubicaciones. Cada aventura enlaza pistas con puntos concretos que el jugador visita a pie.
Creación y pagos
Stripe procesa los pagos de experiencias de pago y de la generación con IA. La generación y la gestión del checkout se coordinan mediante funciones backend.
Funciones del producto
Explorar aventuras
Busca rutas y filtra por destino. Cambia entre tarjetas y mapa; cada ficha muestra su ciudad, duración y dificultad.
Entender la ruta antes de jugar
La ficha reúne la historia, el punto de partida, la duración, la dificultad y el número de ubicaciones antes de comenzar.
Resolver pistas en el lugar
La pantalla de juego indica el progreso, guía al jugador hasta un lugar real y presenta una pregunta contextual. Se puede pedir una pista y enviar una respuesta.
Crear una aventura con IA
Configura ciudad o zona, idioma, número de paradas y una dirección creativa opcional. El precio se calcula por parada; la generación continúa después del checkout.
Producto y rutas públicas
CityHunts permite empezar una aventura desde el navegador del móvil y explorar a ritmo propio.
Preguntas frecuentes#
¿Hay que instalar una app?
No. La experiencia se abre en el navegador del móvil.
¿Se necesita reservar hora o contratar un guía?
No. Es una experiencia autoguiada que puedes empezar cuando te venga bien.
¿Qué ofrece la ruta de Granada?
Un recorrido por el centro y el Albaicín, con pistas y retos en lugares reales.
¿Qué parte desarrollaste?
Contribuí a la arquitectura y al producto. Esta página no atribuye métricas ni responsabilidades individuales más específicas.