Copainalá: cada mural tiene algo que contar.
Mapa, QR y audio. Cada mural abre una historia.
Next.js 16 · React 19 · TypeScript · Framer Motion · Leaflet · html5-qrcode · PWA · Firebase Hosting
Lo que cambia.
Encuentra la siguiente historia.
Un mapa conecta cada obra con su lugar dentro de Copainalá.
Acércate. Escanea. Escucha.
El QR abre símbolos, contexto y audio frente al mural.
Míralo de cerca.
Cómo está construido.Decisiones, evidencia y detalles
Stack
Objetivo
Traducir patrimonio cultural local a un producto digital accesible desde el celular: una experiencia que no solo muestre murales, sino que conecte ubicación, simbolismo Zoque, audio, navegación y una lectura emocional del recorrido.
Diseño de experiencia
Inicio inmersivo
Landing con identidad visual propia, hero editorial y navegación enfocada en descubrimiento antes que en menús tradicionales.
Ruta geolocalizada
Mapa de Copainalá con marcadores, rutas y acceso rápido a cada obra para convertir el mural en una parada navegable.
QR como activador
Escaneo con cámara para abrir la historia correcta del mural y hacer que la capa digital suceda justo frente a la pieza física.
Narrativa multisensorial
Detalle por mural con símbolos, contexto, autores y audios para ampliar el recorrido más allá de la imagen estática.
Arquitectura
- Aplicación en Next.js con rutas para inicio, mapa, guía y detalle dinámico por mural.
- Modelo de datos tipado en TypeScript para murales, símbolos, audios, coordenadas y fuentes.
- Mapa interactivo con Leaflet para visualización de ubicaciones y acceso contextual a cada obra.
- Escáner QR con `html5-qrcode` para activar navegación directa desde el mural físico al contenido digital.
- Export estático y despliegue como PWA en Firebase Hosting para una entrega ligera y fácil de compartir.
Capacidades clave
Producto cultural con criterio digital
Convierte un proyecto artístico local en una experiencia usable, compartible y lista para visitantes reales.
Mobile-first real
La navegación, el gesto visual y la interacción con cámara parten del uso en calle, no de escritorio.
Storytelling territorial
Articula mural, cosmovisión Zoque, geografía y memoria oral dentro de una misma narrativa.
Despliegue listo para difusión
Publicado en Firebase con manifest y service worker, apto para demostración pública y promoción turística.
Capturas
Resultado
Este proyecto demuestra producto digital, frontend interactivo, despliegue web y sensibilidad para traducir patrimonio cultural a una experiencia contemporánea. Dentro del portafolio añade una pieza distinta a los casos de analítica: una app con narrativa, geolocalización, cámara, audio y orientación clara al uso real.