2.0 KiB
🌍 Cómete el mundo y gana
Aplicación web promocional gamificada con validación de facturas automatizada mediante Inteligencia Artificial (OCR).
📋 Descripción del Proyecto
Plataforma interactiva desarrollada para la campaña promocional conjunta de Maggi y Nestlé. Los usuarios pueden registrar su cuenta de manera segura, fotografiar sus tickets de compra y subirlos a la plataforma. Mediante integraciones automatizadas con Inteligencia Artificial, las facturas se analizan para otorgar puntos al usuario (1 punto por cada $10 USD), permitiéndole escalar en un Ranking en tiempo real para obtener diferentes premios.
🛠️ Stack Tecnológico
- Frontend: React 19, TypeScript
- Build Tool: Vite 6
- Estilos y Componentes: Tailwind CSS v4, Lucide React, Framer Motion
- Enrutamiento: React Router DOM v7
- BaaS (Autenticación y BD): Supabase (PostgreSQL)
- Automatización y Procesamiento IA: n8n Webhooks, Google Gemini API
- Seguridad: Google reCAPTCHA v2
🚀 Instalación y Despliegue
Asegúrate de contar con Node.js instalado. Para inicializar el proyecto en un entorno local, levantar el servidor de desarrollo o generar los estáticos de producción, siempre se debe correr:
- npm install
- npm run dev
- npm run build
⚙️ Variables de Entorno (.env)
Para configurar la aplicación, debes crear un archivo .env o .env.local en la raíz del proyecto tomando como plantilla el archivo .env.example. Asegúrate de definir las siguientes variables:
# Clave de la API de IA (Configurada en AI Studio o n8n)
GEMINI_API_KEY="TU_GEMINI_API_KEY"
# URL de la Aplicación
APP_URL="http://localhost:3000"
# Credenciales de Supabase
VITE_SUPABASE_URL="TU_URL_DE_SUPABASE"
VITE_SUPABASE_ANON_KEY="TU_ANON_KEY_DE_SUPABASE"
# Endpoint del Webhook de N8N que recibirá las facturas (FormData)
VITE_N8N_WEBHOOK_URL="TU_N8N_WEBHOOK_URL"
# Llave de sitio de Google reCAPTCHA
VITE_RECAPTCHA_SITE_KEY="TU_RECAPTCHA_SITE_KEY"