Una aplicación web de extremo a extremo (End-to-End) desarrollada para gestionar la confirmación de asistencia a un evento privado. Diseñada con un enfoque "Mobile-First", arquitectura Serverless y una interfaz de usuario minimalista y altamente optimizada.
- Persistencia de Datos en Tiempo Real: Integración directa con Supabase (PostgreSQL) mediante su SDK oficial en JavaScript, permitiendo capturar y almacenar las respuestas de los invitados de forma segura e instantánea.
- Diseño UI/UX Personalizado:
- Implementación de CSS avanzado utilizando pseudo-elementos (
::before) para crear un efecto de "marca de agua" con patrones repetitivos sin comprometer la legibilidad ni la accesibilidad. - Paleta de colores cálida y adaptativa basada en variables CSS (
:root) para mantener una consistencia visual perfecta.
- Implementación de CSS avanzado utilizando pseudo-elementos (
- Gestión Logística Avanzada: Formulario estructurado para la recopilación precisa de datos críticos del evento, incluyendo recuento dinámico de acompañantes y un campo específico para la gestión de intolerancias alimentarias/alergias.
- Integración de Geolocalización: Implementación de un Call to Action (CTA) interactivo que enlaza directamente con la API web de Google Maps para facilitar la navegación de los usuarios hacia el lugar del evento.
- Seguridad y RLS: Configuración de políticas de Seguridad a Nivel de Fila (Row Level Security) en la base de datos para garantizar que el cliente web solo tenga permisos de inserción (INSERT), protegiendo la privacidad de los datos de todos los invitados.
- Frontend: HTML5 semántico, CSS3 puro (Grid/Flexbox) y JavaScript (Vanilla ES6+).
- Backend & Base de Datos: Supabase (PostgreSQL, GoTrue, PostgREST).
- Despliegue: CI/CD gestionado a través de GitHub conectado a Vercel/Netlify.
- Arquitectura sin servidor: Al evitar un backend tradicional (Node/Express/Java), se redujo la latencia y se simplificó el despliegue, delegando la capa de seguridad directamente a las políticas de Supabase.
- Optimización Visual: Para mantener un rendimiento óptimo (Lighthouse score alto), el fondo decorativo se gestionó mediante CSS puro y una única imagen optimizada, separando la capa visual del DOM principal para evitar bloqueos de renderizado.
- Manejo de Estados del Formulario: Implementación de JavaScript asíncrono (
async/await) para prevenir envíos duplicados deshabilitando el botón de "submit" durante la resolución de la promesa y ofreciendo feedback visual inmediato al usuario tras el éxito de la operación.