Zoque Murals of Copainalá

A mobile-first cultural experience built to explore Copainalá's murals, unlock local stories with QR, navigate the route on a map, and play audio capsules inside a Firebase-hosted web application.

open_in_new Open experience arrow_back Back to projects

Panoramic view from the Zoque Murals of Copainalá project

Stack

Next.js 16 React 19 TypeScript Framer Motion Leaflet html5-qrcode PWA Firebase Hosting

flag

Goal

Translate local cultural heritage into an accessible mobile product: an experience that does more than display murals by connecting place, Zoque symbolism, audio, navigation, and a strong emotional reading of the route.

dashboard_customize

Experience design

Immersive home screen

Editorial landing, distinctive visual identity, and discovery-first navigation instead of a conventional utility menu.

Geolocated route

A Copainalá map with markers, directions, and contextual entry points for each mural.

QR as the trigger

Camera scanning opens the correct mural story and makes the digital layer happen directly in front of the physical piece.

Multisensory storytelling

Each mural detail page combines symbolism, context, authorship, and audio to expand the visit beyond a static image.

account_tree

Architecture

Next.js application with routes for home, map, guide, and dynamic mural detail pages.
Typed TypeScript data model for murals, symbols, audio tracks, coordinates, and sources.
Leaflet-powered interactive map for place-based navigation and contextual access to each piece.
QR scanning through `html5-qrcode` so the physical mural can deep-link into the correct digital story.
Static export plus Firebase Hosting deployment as a PWA for lightweight public sharing.

auto_graph

Key capabilities

Digital product for cultural activation

Turns a local arts initiative into a usable, shareable, visitor-ready digital experience.

Actual mobile-first thinking

Navigation, camera interactions, and motion language start from street use, not from desktop assumptions.

Territorial storytelling

Combines mural, Zoque worldview, geography, and oral memory inside one coherent digital narrative.

Deployment ready for promotion

Published in Firebase with manifest and service worker, suitable for public demos and tourism visibility.

image

Screens

Mobile home screen of the Zoque Murals of Copainalá experience — Mobile landing screen with an immersive hero, primary CTA, and immediate entry into the route and scanner flow.

Mobile map screen from the Zoque Murals of Copainalá project — Published map view with locations, routing, and actionable cards for each mural in the experience.

Published mural detail screen from the project — Long-form mural detail page combining story, symbols, audio, and layered reading of the piece.

Tourist guide screen from the Zoque Murals of Copainalá project — Guide section designed to grow with festivals, gastronomy, and wider territorial context.

workspace_premium

Outcome

This project adds a different dimension to the portfolio: product design, interactive frontend work, web deployment, and the ability to turn cultural heritage into a contemporary digital experience. It complements the analytics cases with a stronger story around UX, place, audio, maps, and camera-driven interaction.