Visión general del frontend
El frontend de MAMB está pensado como una app nativa, no como una web tradicional. Esto se refleja en tres decisiones estructurales:
- Mobile-first real — se diseña primero para una mano y un pulgar.
- Bottom Navigation Bar fija con
backdrop-blur(glassmorphism). - Render híbrido — RSC para datos y SEO, client components para interactividad (cámara, IA, gestos).
Páginas
| Ruta | Propósito |
|---|---|
/ | Explora el MAMB — hero, obra del día, historia/misión. |
/upload | Sube tu arte — stepper, captura, estilos, IA, comparador. |
/gallery | Galería virtual — masonry, filtros, scroll infinito. |
Galería virtual
La página /gallery muestra un masonry fluido con las obras aprobadas
por el museo, ordenadas por fecha de creación y filtrables por estilo.
Vista móvil del masonry con chips de filtros en la parte superior.
Estado y datos en el cliente
- Server Components para la primera carga (galería inicial, hero).
useState+ Server Actions para el flujo de subida (stepper).- Supabase client (
@supabase/ssr) para suscripción realtime a nuevas obras aprobadas en la galería. - Cache de Next.js (
revalidatePath/revalidateTag) para invalidar la galería cuando se publica una obra nueva.
Animaciones
Reglas:
- Solo se animan
opacityytransform(60 fps). - Framer Motion para transiciones de página (
AnimatePresence) y modales tipo drawer. - CSS puro para micro-interacciones (hover, focus, tap).