Ejemplo Completo: Boda de Principio a Fin

Los Protagonistas

Ana y Carlos se casan el 15 de noviembre de 2025 en la Ciudad de Mexico. La ceremonia será en la Parroquia de San Angel y la recepción en Hacienda Los Laureles. Han invitado a 100 personas.

Su wedding planner, Mariana, es quien administra todo desde el panel de Nvito. Mariana tiene una cuenta con plan VIP en la organización "Bodas Mariana Events" que le permite manejar múltiples eventos simultaneamente.

Estos son los sistemas de Nvito que se activaran a lo largo de está historia:

Fase 1: Configuración desde el Admin

1.1 Creación del evento

Mariana inicia sesion en el panel de administración (nvito-admin) con su cuenta de Clerk. El sistema la autentica, verifica su rol de OWNER en "Bodas Mariana Events", y le muestra el dashboard con sus eventos activos.

Hace clic en "Crear Evento" y llena el formulario:

• Nombre: Boda de Ana y Carlos
• Tipo: Wedding (uno de los 14 tipos de evento que Nvito soporta)
• Fecha: 15 de noviembre de 2025, 17:00 hrs
• Ubicación principal: Parroquia de San Angel (ceremonia)
• Ubicación secundaria: Hacienda Los Laureles (recepción)

Al guardar, nvito-api crea el evento en estado DRAFT y genera automáticamente un EventAccessCode de 8 caracteres: BODA2025. Este código es el que Mariana usara para acceder desde la app movil el día del evento. También configura un PIN numerico: 4521.

1.2 Diseño de la invitación

Mariana navega a la sección de invitaciones del evento y hace clic en "Crear Invitación". El sistema le presenta dos opciones: usar una plantilla del catálogo o subir un HTML externo. Elige la plantilla "Wedding Modern", un diseño elegante con tipografia serif y colores crema.

La invitación se crea en estado IN_CONSTRUCTION. Mariana abre el editor visual y configura las secciones:

1. Hero: Sube una foto de Ana y Carlos (2.4 MB, JPEG). El sistema solicita una presigned URL a S3, la foto se sube directo al CDN, se confirma el upload, y sharp genera 3 thumbnails en WebP. La foto hero queda lista en menos de 5 segundos.

2. RSVP: Activa la confirmación de asistencia con fecha limite 1 de noviembre. Los invitados podran confirmar cuantos asisten y seleccionar restricciones alimentarias (vegetariano, vegano, sin gluten, sin lacteos).

3. Ubicaciones: Agrega dos puntos en el mapa — la parroquia para la ceremonia a las 17:00 y la hacienda para la recepción a las 19:00. Cada ubicación incluye coordenadas GPS para navegación.

4. Itinerario: Crea la timeline del evento con iconos personalizados:

   • 17:00 Ceremonia religiosa (icono: iglesia)
   • 18:00 Coctel de bienvenida (icono: copa)
   • 19:00 Recepción y cena (icono: cubiertos)
   • 21:00 Primer baile (icono: música)
   • 22:00 Fiestá libre (icono: fiesta)
   • 01:00 Despedida (icono: corazon)

5. Galería: Habilita la galería colaborativa donde los invitados podran subir fotos el día del evento.

6. Registro de regalos: Agrega 3 enlaces a tiendas departamentales donde los invitados pueden comprar regalos.

1.3 Seleccion de efectos visuales

Mariana elige los efectos visuales de la invitación:

• Loader: "diamond-cascade" (Canvas 2D cinematografico) — una cascada de diamantes brillantes que se muestra mientras la invitación carga
• Transición entre secciones: "golden-sweep" (Canvas 2D cinematografico) — un barrido dorado con particulas que aparece al navegar entre secciones fullpage
• Colores del tema: Crema (#FBECD4) como fondo, dorado (#C4A265) como acento, y azul oscuro (#0B3D5A) como texto

El motor de transiciones usara el ciclo de 3 fases para cada cambio de sección: CLOSE (el overlay dorado cubre la sección con particulas Canvas) STAMP (muestra el monograma "A&C" con el nombre de la siguiente sección) OPEN (el overlay se retira revelando el nuevo contenido). Todo esto tarda aproximadamente 2.75 segundos y crea una experiencia cinematografica.

El Theme Color Bridge lee las variables CSS del tema y expone los colores como arrays RGB para que las particulas Canvas se tinan automáticamente con la paleta elegida.

1.4 Publicación

Mariana revisa la invitación en el preview embebido (un iframe que carga /preview/{token} de nvito-invitations sin cache). Todo se ve perfecto. Hace clic en "Publicar".

El sistema ejecuta una cadena de acciones:

1. La invitación cambia de IN_CONSTRUCTION a PUBLISHED
2. El evento cambia de DRAFT a ACTIVE
3. El HTML compilado se sube al bucket nvito-templates en Cloudflare R2
4. nvito-api dispara un webhook a nvito-invitations: POST /api/revalidate con el path /i/boda-ana-carlos
5. nvito-invitations valida el secret con timingSafeEqual() y ejecuta revalidatePath()
6. La invitación está viva en https://invitaciones.nvito.mx/i/boda-ana-carlos

1.5 Importacion de invitados

Mariana genera un formato Excel personalizado desde el dialog de importación. El sistema crea un archivo .xlsx con columnas dinámicas según los servicios contratados del evento (invitados, grupos, mesas, restricciones dietarias). Mariana descarga el Excel y se lo envia al novio para que lo llene con los 100 invitados: nombre, apellido, título, email, teléfono, grupo, mesa y número de acompanantes.

Al recibir el Excel completado, Mariana lo sube desde el admin. nvito-api procesa el archivo en una transacción atomica:

• Valida formato de email y teléfono fila por fila
• Encripta los emails con AES-256 antes de almacenarlos (protección de datos personales)
• Crea automáticamente los grupos y mesas que no existen
• Crea 100 registros en la tabla guests con un accessToken único de 32 caracteres para cada uno
• Genera automáticamente 100 pases QR tipo ENTRY con códigos de 24 caracteres y imagenes PNG
• Asigna invitados a mesas según el Excel (15 mesas de 6-8 personas)

Resultado: 100 invitados registrados, 100 pases QR generados, 15 mesas creadas y asignadas, grupos creados automáticamente.

1.6 Configuración de workflows de comunicación

Mariana configura 5 flujos automáticos de comunicación por email:

Cada workflow usa una plantilla de email personalizada con los colores y tipografia de la boda. Los emails incluyen el nombre del invitado, detalles del evento, y un enlace directo a la invitación.

1.7 Link de pago para la cena

Ana y Carlos deciden ofrecer un coctel de bienvenida abierto, pero la cena formal tiene un costo de $1,500 MXN por persona. Mariana crea un PaymentLink desde el admin que se incluira en la invitación.

1.8 Preparación de la app movil

Mariana descarga la app movil de Nvito (nvito-client) en su iPhone. Abre la app e ingresa:

• Código del evento: BODA2025
• PIN: 4521

El sistema ejecuta MobileAuthService.loginAsHost(): verifica el código, compara el PIN con bcrypt, crea una MobileSession con el deviceId del iPhone, y genera tokens JWT (access 15min + refresh 30d). Los tokens se almacenan en SecureStore encriptado por iOS.

Mariana ya puede ver el dashboard del evento desde su celular: 100 invitados, 0 confirmados, 0 check-ins. La app pre-carga los 100 pases QR en cache local para el día del evento.

Fase 2: La Experiencia del Invitado

2.1 Recepción de la invitación

El workflow "Bienvenida" se dispara automáticamente. Los 100 invitados reciben un email con el asunto "Ana y Carlos te invitan a su boda" que incluye un enlace personalizado a la invitación.

Roberto, uno de los invitados, hace clic en el enlace. Su navegador abre https://invitaciones.nvito.mx/i/boda-ana-carlos.

2.2 Visualización de la invitación

nvito-invitations recibe la peticion. Como es la primera visita del día (cache expirado), ejecuta el pipeline completo:

1. InvitationFetcher consulta metadata a nvito-api y valida con Zod que el status es PUBLISHED
2. CdnValidator verifica que la URL del HTML apunta a cdn.nvito.mx (prevencion SSRF)
3. HtmlProcessor descarga el HTML desde Cloudflare R2 e inyecta meta tags OpenGraph y el script de analytics (con escape context-aware para prevenir XSS)
4. El HTML completo se cachea como página estática via ISR

En el browser de Roberto:

1. Aparece el loader "diamond-cascade": diamantes brillantes caen en cascada sobre un fondo crema mientras la invitación termina de cargar (2.5 segundos)
2. DOMPurify sanitiza el HTML, FontInjector carga las fuentes desde Google Fonts
3. Se revela la sección Hero con la foto de Ana y Carlos
4. Roberto hace scroll hacia abajo. El motor de transiciones ejecuta "golden-sweep": un barrido dorado con particulas cubre la pantalla, aparece brevemente el monograma "A&C" con el texto "RSVP", y se revela la sección de confirmación

El sistema de analytics registra: page view, scroll depth, tiempo en cada sección.

2.3 Confirmación de asistencia

Roberto ve la sección RSVP y completa el formulario:

• Confirma asistencia para 2 personas (el y su pareja)
• Selecciona "vegetariano" para su pareja
• Agrega una nota: "Felicidades a los novios"

Al enviar, el formulario hace POST a nvito-api. El sistema:

1. Actualiza el registro de Roberto: rsvpStatus = CONFIRMED, companionCount = 2
2. Almacena las restricciones alimentarias y la nota
3. Emite el evento de dominio RsvpRespondedEvent
4. El workflow "Confirmación RSVP" se dispara: Roberto recibe un email confirmando su asistencia con los detalles del evento

En el dashboard de Mariana (tanto en el admin como en la app movil), el contador se actualiza: 1 confirmado de 100 invitados.

2.4 Los días previos al evento

Con el paso de las semanas, van llegando las confirmaciones. A falta de 7 días para la boda:

• 85 invitados han confirmado asistencia (total 142 personas contando acompanantes)
• 8 invitados declinaron
• 7 invitados no han respondido

El workflow "Recordatorio" se activa automáticamente 7 días antes. Los 100 invitados reciben un email recordatorio. Para los 7 que no han respondido, el email incluye un llamado a la acción más prominente para confirmar.

2.5 La manana del evento

El 15 de noviembre a las 8:00 AM, el workflow "Dia del evento" se dispara. Los 85 invitados confirmados reciben un email titulado "Hoy es el gran dia" con:

• Hora y lugar de la ceremonia
• Indicaciones de como llegar
• Un enlace a su invitación para consultar el itinerario
• Un enlace para abrir la app/PWA y acceder a la galería colaborativa

Fase 3: El Dia del Evento y Después

3.1 Check-in en la ceremonia

Mariana llega a la Parroquia de San Angel a las 16:00 y abre la app movil. El scanner de QR está listo con los 100 pases pre-cargados en cache (descargados días antes).

A las 16:30 empiezan a llegar los invitados. Roberto muestra el código QR desde su email en el celular. Mariana escanea con expo-camera:

1. La camara detecta el código QR y lo decodifica
2. La app envia POST /v1/qr-passes/validate con el código
3. nvito-api verifica: pase no usado, no expirado, pertenece al evento
4. Marca el pase como usado: isUsed = true, checkInMethod = QR_SCAN
5. Actualiza el guest: checkedIn = true
6. Crea registro en AuditLog

La pantalla de Mariana muestra: fondo verde, "Roberto Garcia - Mesa 7 - Acompanante: vegetariano". Su teléfono vibra suavemente (feedback haptico).

En un momento la senal de celular se cae dentro de la parroquia. Mariana sigue escaneando. La app detecta la falta de conexión y cambia a modo offline:

• Los pases se validan contra el cache local
• Cada validación se encola en AsyncStorage
• Un badge rojo muestra "3 pendientes de sincronizar"

Cuando la senal regresa 10 minutos después, useOfflineSync detecta la reconexión y sincroniza automáticamente las 3 validaciones pendientes con el servidor.

3.2 El dashboard en tiempo real

Mientras los invitados llegan, el dashboard de la app se actualiza cada 30 segundos (polling con refetchInterval):

Mariana puede ver en tiempo real quien ha llegado, quien falta, y las estadisticas por mesa.

3.3 Galería colaborativa

Durante la recepción, los invitados abren la app movil o la PWA y empiezan a subir fotos.

Un invitado sin la app instalada abre la PWA desde su navegador. El BFF (Backend For Frontend) maneja toda la autenticación: el invitado hace login con su access token via deep link, los JWT se almacenan en cookies HttpOnly encriptadas con AES-256-GCM, y el browser nunca ve los tokens.

Desde la PWA, sube una foto de los novios cortando el pastel:

1. Solicita presigned URL via el BFF proxy (/api/proxy/media/get-upload-url)
2. El BFF desencripta el JWT de la cookie, valida CSRF, y forward la peticion a nvito-api
3. nvito-api genera la presigned URL de S3
4. El browser sube la foto directo a Cloudflare R2 (4.2 MB)
5. Confirma el upload via el proxy BFF
6. nvito-api valida magic bytes (JPEG: FF D8 FF), crea el registro Media
7. Bull queue procesa: extrae metadata, rota según EXIF, genera 3 thumbnails WebP
8. La foto aparece en la galería del evento en menos de 10 segundos

A lo largo de la noche, los invitados suben 234 fotos que suman 890 MB (dentro del limite VIP de 50 GB).

3.4 Audio guestbook

La sección de audio guestbook es un exito. Los invitados graban mensajes de voz para Ana y Carlos:

• Desde la app nativa: expo-av graba en M4A (iOS) u OGG (Android)
• Desde la PWA: MediaRecorder API graba en WebM (Chrome) u OGG (Firefox)
• Cada mensaje tiene un limite de 60 segundos
• Se suben via presigned URL flow, igual que las fotos

Al final de la noche hay 47 mensajes de voz, algunos emotivos, otros muy graciosos. Total: 312 MB de audio.

3.5 Después del evento

Al día siguiente del evento, el workflow "Agradecimiento" se dispara automáticamente. Los 85 invitados confirmados reciben un email de agradecimiento de parte de Ana y Carlos, con un enlace a la galería completa.

Una semana después, el evento se auto-completa:

1. El estado del evento cambia de ACTIVE a COMPLETED
2. La invitación cambia de PUBLISHED a CLOSED
3. La galería permanece accesible en modo lectura
4. Los workflows se desactivan

Mariana revisa las analiticas finales desde el admin.

Los Numeros Finales

Timeline Visual

Esta historia conecta los 5 sistemas de Nvito en un flujo real. Cada paso que Mariana, Roberto y los demás invitados experimentaron fue procesado por servicios específicos, validado por guards de seguridad, y almacenado en modelos de datos disenados para este proposito exacto.

Desde el momento en que Mariana escribio "Boda de Ana y Carlos" en el formulario de creación hasta que el último email de agradecimiento llego a las bandejas de entrada, el sistema ejecuto miles de operaciones de forma transparente: autenticación, validación, procesamiento de imagenes, encriptacion, sanitizacion, cache, y entrega de contenido.

Todo para que Ana y Carlos tuvieran la boda que sonaron.