Ejemplo Completo: Boda de Principio a Fin

Un recorrido narrativo por todos los sistemas de Nvito a traves de la boda de Ana y Carlos. Desde la creacion del evento hasta las fotos del recuerdo, pasando por invitaciones animadas, check-in con QR y mensajes de voz de los invitados.

Tabla de Contenidos

1. Los Protagonistas
2. Fase 1: Configuracion desde el Admin
3. Fase 2: La Experiencia del Invitado
4. Fase 3: El Dia del Evento y Despues
5. Los Numeros Finales
6. Timeline Visual

Los Protagonistas

Ana y Carlos se casan el 15 de noviembre de 2025 en la Ciudad de Mexico. La ceremonia sera en la Parroquia de San Angel y la recepcion 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 organizacion "Bodas Mariana Events" que le permite manejar multiples eventos simultaneamente.

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

Fase 1: Configuracion desde el Admin

1.1 Creacion del evento

Mariana inicia sesion en el panel de administracion (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
• Ubicacion principal: Parroquia de San Angel (ceremonia)
• Ubicacion secundaria: Hacienda Los Laureles (recepcion)

Al guardar, nvito-api crea el evento en estado DRAFT y genera automaticamente un EventAccessCode de 8 caracteres: BODA2025. Este codigo es el que Mariana usara para acceder desde la app movil el dia del evento. Tambien configura un PIN numerico: 4521.

1.2 Diseno de la invitacion

Mariana navega a la seccion de invitaciones del evento y hace clic en "Crear Invitacion". El sistema le presenta dos opciones: usar una plantilla del catalogo o subir un HTML externo. Elige la plantilla "Wedding Modern", un diseno elegante con tipografia serif y colores crema.

La invitacion 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 confirmacion 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 recepcion a las 19:00. Cada ubicacion incluye coordenadas GPS para navegacion.

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 Recepcion y cena (icono: cubiertos)
   • 21:00 Primer baile (icono: musica)
   • 22:00 Fiesta libre (icono: fiesta)
   • 01:00 Despedida (icono: corazon)

5. Galeria: Habilita la galeria colaborativa donde los invitados podran subir fotos el dia 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 invitacion:

• Loader: "diamond-cascade" (Canvas 2D cinematografico) — una cascada de diamantes brillantes que se muestra mientras la invitacion carga
• Transicion 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 seccion: CLOSE (el overlay dorado cubre la seccion con particulas Canvas) STAMP (muestra el monograma "A&C" con el nombre de la siguiente seccion) 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 automaticamente con la paleta elegida.

1.4 Publicacion

Mariana revisa la invitacion 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 invitacion 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 invitacion esta viva en https://invitaciones.nvito.mx/i/boda-ana-carlos

1.5 Importacion de invitados

Mariana prepara un archivo CSV con los 100 invitados: nombre, email, telefono y numero de acompanantes. Sube el archivo desde el admin.

nvito-api procesa el CSV linea por linea:

• Valida formato de email y telefono
• Encripta los emails con AES-256 antes de almacenarlos (proteccion de datos personales)
• Crea 100 registros en la tabla guests con un accessToken unico de 32 caracteres para cada uno
• Genera automaticamente 100 pases QR tipo ENTRY con codigos de 24 caracteres y imagenes PNG
• Asigna mesas a los invitados segun el CSV (15 mesas de 6-8 personas)

Resultado: 100 invitados registrados, 100 pases QR generados, 15 mesas asignadas.

1.6 Configuracion de workflows de comunicacion

Mariana configura 5 flujos automaticos de comunicacion 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 invitacion.

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 invitacion.

1.8 Preparacion de la app movil

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

• Codigo del evento: BODA2025
• PIN: 4521

El sistema ejecuta MobileAuthService.loginAsHost(): verifica el codigo, 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 dia del evento.

Fase 2: La Experiencia del Invitado

2.1 Recepcion de la invitacion

El workflow "Bienvenida" se dispara automaticamente. Los 100 invitados reciben un email con el asunto "Ana y Carlos te invitan a su boda" que incluye un enlace personalizado a la invitacion.

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

2.2 Visualizacion de la invitacion

nvito-invitations recibe la peticion. Como es la primera visita del dia (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 pagina estatica via ISR

En el browser de Roberto:

1. Aparece el loader "diamond-cascade": diamantes brillantes caen en cascada sobre un fondo crema mientras la invitacion termina de cargar (2.5 segundos)
2. DOMPurify sanitiza el HTML, FontInjector carga las fuentes desde Google Fonts
3. Se revela la seccion 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 seccion de confirmacion

El sistema de analytics registra: page view, scroll depth, tiempo en cada seccion.

2.3 Confirmacion de asistencia

Roberto ve la seccion 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 "Confirmacion 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 dias previos al evento

Con el paso de las semanas, van llegando las confirmaciones. A falta de 7 dias 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 automaticamente 7 dias antes. Los 100 invitados reciben un email recordatorio. Para los 7 que no han respondido, el email incluye un llamado a la accion mas 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 invitacion para consultar el itinerario
• Un enlace para abrir la app/PWA y acceder a la galeria colaborativa

Fase 3: El Dia del Evento y Despues

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 esta listo con los 100 pases pre-cargados en cache (descargados dias antes).

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

1. La camara detecta el codigo QR y lo decodifica
2. La app envia POST /v1/qr-passes/validate con el codigo
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 telefono 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 conexion y cambia a modo offline:

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

Cuando la senal regresa 10 minutos despues, useOfflineSync detecta la reconexion y sincroniza automaticamente 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 Galeria colaborativa

Durante la recepcion, 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 autenticacion: 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 segun EXIF, genera 3 thumbnails WebP
8. La foto aparece en la galeria 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 seccion 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 Despues del evento

Al dia siguiente del evento, el workflow "Agradecimiento" se dispara automaticamente. Los 85 invitados confirmados reciben un email de agradecimiento de parte de Ana y Carlos, con un enlace a la galeria completa.

Una semana despues, el evento se auto-completa:

1. El estado del evento cambia de ACTIVE a COMPLETED
2. La invitacion cambia de PUBLISHED a CLOSED
3. La galeria 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 demas invitados experimentaron fue procesado por servicios especificos, 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 creacion hasta que el ultimo email de agradecimiento llego a las bandejas de entrada, el sistema ejecuto miles de operaciones de forma transparente: autenticacion, validacion, procesamiento de imagenes, encriptacion, sanitizacion, cache, y entrega de contenido.

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