MG-Roulette es una aplicación web interactiva de marketing desarrollada para capturar datos de clientes de Mi Gusto y ofrecerles una experiencia gamificada mediante una ruleta de premios premium durante la gran reapertura de la sucursal de Bella Vista.
- 📱 Optimización para Tablets: Diseñado específicamente para tabletas de recopilación de datos con inicio a pantalla completa y gran fluidez táctil.
- 🔄 Arquitectura Offline-First: Guarda de forma segura los registros en
localStorageante cualquier caída de internet, evitando la pérdida de información. - 💾 Sincronización Inteligente: Sincronización automática de datos con Supabase en tiempo real al conectarse a la red.
- 🎰 Ruleta Animada: Ruleta de premios interactiva con efectos, transiciones y un diseño visual premium que atrae al público.
- 📊 Consola Administrativa: Panel privado para consultar el listado de clientes registrados en el local y exportar los datos en formato CSV.
- ⚛️ React 18 & TypeScript — Desarrollo estructurado y tipado para la UI.
- ⚡ Vite — Entorno ágil de desarrollo y empaquetado optimizado para el navegador.
- 🎨 Tailwind CSS — Estilos fluidos y modernos con un sistema de diseño premium.
- ☁️ Supabase — Base de datos Postgres en la nube para persistencia en tiempo real.
- ✨ GSAP — Animaciones interactivas para mayor dinamismo de los componentes.
A continuación se muestra el flujo de interacción completo en formato tablet de la aplicación:
1. Pantalla de Acceso Exclusivo |
2. Bienvenida e Inicio del Juego |
3. Formulario de Datos Obligatorios |
4. Ruleta de Premios Interactiva |
La aplicación garantiza que ningún registro se pierda en el local:
- Almacenamiento Local: Los participantes se guardan en el almacenamiento local de la tablet de forma inmediata.
- Resiliencia: Si la tablet pierde la conexión inalámbrica, los usuarios pueden seguir jugando y los premios se asignan con total normalidad.
- Autosincronización: En cuanto la señal de red se restablece, el cliente de base de datos sincroniza automáticamente los registros offline pendientes con Supabase.