Frontend (apps/web)

Sitio web principal de AsamaMX. Despliega como HTML/CSS/JS estático — no requiere servidor Node.js en producción.

Stack

Modo de despliegue

output: "export" en next.config.ts. El build genera un directorio out/ listo para servir desde cualquier CDN (Cloudflare Pages, Vercel Static, S3, etc.).

Implicaciones:

• No hay servidor Node.js en producción
• No hay API Routes ni middleware
• Las imágenes se sirven sin optimización automática (unoptimized: true)
• Toda la lógica de servidor vive en el Worker

Arquitectura de componentes

Diseño atómico estricto:

components/
├── atoms/       # Componentes base: Button, Heading, Eyebrow, Container, CloudinaryImage…
├── molecules/   # Compuestos de átomos: EventCard, ReservationCard, EmptyReservations…
└── organisms/   # Secciones completas: NavBar, Footer, HeroSection, ReservationModal…

Cada nivel tiene un index.ts de barrel exports. Regla: un organism no importa otro organism directamente.

Datos de eventos

Los eventos se leen de apps/web/data/event.json — un archivo JSON local. No hay conexión directa a Supabase desde el frontend.

// lib/utils.ts
export async function getEventsList(): Promise<EventContent[]> {
  const data = await import("@/data/event.json");
  return data.default.map(event => ({ ...event, priceAmount: Number(event.priceAmount) }));
}

Autenticación (estado actual)

El frontend usa Clerk como proveedor de autenticación temporal. Está en proceso de migración a un sistema propio con JWT (ver Autenticación en el Worker).

Variables de entorno requeridas:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
NEXT_PUBLIC_WORKER_URL=http://localhost:8787
NEXT_PUBLIC_PAYPAL_CLIENT_ID=...
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=...

Desarrollo local

pnpm --filter @asamamx/web dev
# Disponible en http://localhost:3000

Requiere tener el worker corriendo en paralelo para que las reservaciones y pagos funcionen:

pnpm --filter @asamamx/worker dev
# Disponible en http://localhost:8787