Boda Melanie & Antuan
01El Desafío
La pareja queria reemplazar la tarjeta fisica tradicional por una experiencia digital que centralizara toda la informacion del evento en un solo link compartible por WhatsApp: cronograma, confirmacion de asistencia con preferencias alimentarias, ubicacion del salon con mapa interactivo y galeria de fotos — todo optimizado para que cada invitado pudiera interactuar desde su celular sin fricciones.
02La Solución
Desarrolle una aplicacion web mobile-first con Next.js 15 y App Router. Incluye RSVP con validacion tipada end-to-end via Zod + React Hook Form, galeria con Embla Carousel y navegacion tactil, Google Maps embebido, countdown dinamico con date-fns, dark mode persistente con next-themes y componentes accesibles con Radix UI. Metadata optimizada con Open Graph + Twitter Cards para previsualizacion rica al compartir el link en WhatsApp, Instagram y redes sociales.
RSVP (formulario de confirmacion de asistencia) con validacion completa via Zod — schema tipado que valida nombre (requerido), confirmacion de asistencia (booleano) y preferencias alimentarias (enum con opciones)
Formularios con react-hook-form + @hookform/resolvers para integracion con Zod — validacion en tiempo real sin re-renders innecesarios, mensajes de error tipados
Feedback visual del envio con Sonner Toasts: notificacion de exito con animacion o error con mensaje descriptivo. El formulario se resetea automaticamente tras envio exitoso
Galeria de fotos de la pareja con Embla Carousel — navegacion tactil nativa con soporte de swipe, botones prev/next y soporte completo de teclado para accesibilidad
Imagenes optimizadas con next/image: lazy loading automatico, formatos modernos, responsive con sizes y srcset generados por Next.js
Google Maps embebido con pin exacto del salon del evento — iframe responsive que se adapta al tamano de pantalla
Countdown dinamico a la fecha del casamiento calculado con date-fns: dias, horas, minutos y segundos actualizandose en tiempo real
Cronograma del dia del evento organizado por secciones horarias: ceremonia, recepcion, cena, fiesta — cada seccion con icono, hora y descripcion
Dark mode persistente entre sesiones con next-themes — la preferencia se guarda en localStorage y se aplica antes del primer render para evitar flash
Componentes accesibles con Radix UI: Dialog para modales, Select para dropdowns, Checkbox para opciones, Accordion para secciones colapsables — todos con ARIA attributes out-of-the-box
Animaciones Framer Motion para transiciones de entrada con fade-in y slide-up, efectos de scroll reveal progresivo en cada seccion
Diseno mobile-first y 100% responsive — testeado en iPhone, Android y tablets. Optimizado para ser compartido como link unico por WhatsApp
Tipografia Playfair Display cargada con next/font/google — eliminacion de layout shift con display: swap y preload automatico
Open Graph + Twitter Cards con locale es_AR: imagen de preview, titulo y descripcion configurados para previsualizacion rica al compartir en WhatsApp (muestra imagen, titulo y descripcion en la burbuja del chat)
Metadata SEO con Next.js Metadata API: title, description, canonical URL, favicon personalizado (/dance1.webp), robots index/follow
Next.js 15 con App Router: layouts anidados, server components por defecto, client components solo donde se necesita interactividad (formulario, countdown, galeria, dark mode toggle)
Estructura de componentes modular: cada seccion del evento es un componente independiente reutilizable con sus props tipadas en TypeScript
FLUJO — RSVP con validacion tipada: [Invitado] completa nombre, confirma asistencia (si/no), selecciona preferencia alimentaria (normal/vegetariano/vegano/celiaco) → submit → [React Hook Form] valida contra schema Zod: name z.string().min(1), attending z.boolean(), dietary z.enum([...]) → si errores: muestra mensajes tipados inline → si valido: POST /api/rsvp {name, attending, dietary} → response 200 → [Sonner] toast animado "Confirmacion recibida" → formulario se resetea automaticamente
FLUJO — Preview rica en WhatsApp: [Novios] copian URL bodamelanieyantuan.com.ar → pegan en chat de WhatsApp → [WhatsApp] hace GET al link → lee meta tags Open Graph: og:title="Boda Melanie & Antuan", og:description="Te invitamos a...", og:image="/pag2.webp", og:locale="es_AR" → renderiza burbuja con imagen de preview, titulo y descripcion → el invitado ve una tarjeta visual atractiva antes de abrir el link
FLUJO — Countdown en tiempo real: [Componente Countdown] useEffect con setInterval cada 1000ms → calcula diferencia entre fecha del casamiento y Date.now() con date-fns → differenceInDays, differenceInHours % 24, differenceInMinutes % 60, differenceInSeconds % 60 → renderiza 4 cajas animadas: dias/horas/minutos/segundos actualizandose cada segundo → cleanup del interval en useEffect return
03Stack Tecnológico
Next.js 15
React
TypeScript
Tailwind CSS
Radix UI
Framer Motion
React Hook Form
Zod
Embla Carousel
date-fns
next-themes
Sonner
next/font
next/image
04Resultados
ZodRSVP con validacion tipada end-to-end
Radix UIAccesibilidad ARIA out-of-the-box
MobileFirst · 100% responsive
OGPreview rica en WhatsApp y redes
Dark modePersistente con next-themes
App RouterNext.js 15 con server components
05Galería