Saltar al contenido principal

Visión general de la arquitectura

MAMB se construye como una aplicación Next.js con renderizado híbrido: server components para SEO y carga inicial rápida, y client components para las experiencias interactivas (galería, comparador antes/después, captura de cámara, TensorFlow.js).

Diagrama lógico​

Capas​

1. Presentación (Next.js + React 19)​

  • App Router, server components por defecto.
  • Tailwind CSS 4 con tokens de marca (brand-blue, brand-grey).
  • Framer Motion para transiciones y gestos.

2. Lógica de aplicación​

  • Server Actions para toda mutación (subir obra).
  • Validación de entrada con Zod en el edge de cada acción.
  • Sin autenticación: los usuarios son anónimos y solo completan un formulario (título, autor, estilo, foto).

3. Datos (Supabase)​

  • PostgreSQL con tipos generados (supabase gen types typescript).
  • Row Level Security activo en todas las tablas, con INSERT público validado por las Server Actions.
  • Storage con buckets separados para original y estilizado, nombres UUID.

4. Inteligencia Artificial​

  • TensorFlow.js cargado en lazy (next/dynamic).
  • Modelo de transferencia de estilo arbitraria.
  • Procesamiento en un <canvas> oculto; el resultado se muestra en el comparador antes/después.

Principios de diseño​

  1. Mobile-first real — los componentes se diseñan primero para el pulgar.
  2. Edge of trust — todo lo que llega del cliente se valida con Zod.
  3. Seguridad en la base de datos — la lógica de acceso vive en RLS, no en el cliente.
  4. Rendimiento como feature — Core Web Vitals y LCP son objetivos del producto, no optimizaciones tardías.