# 🥗 Mi Plan Nutricional - Tracker Aplicación web progresiva (PWA) para seguimiento de plan nutricional con base de datos en la nube. ## Características - ✅ Tracking diario de suplementos, comidas e hidratación - 📅 Navegación entre días para ver historial - 🔥 Racha automática (días consecutivos ≥80%) - 📋 Plan completo de alimentación integrado - 📝 Notas diarias - 🔐 Autenticación segura con email - ☁️ Sincronización en la nube (funciona en cualquier dispositivo) - 📱 Instalable como app en celular (PWA) --- ## 🚀 Guía de Configuración (15 minutos) ### Paso 1: Crear cuenta en Supabase (gratis) 1. Ve a [supabase.com](https://supabase.com) y crea una cuenta 2. Clic en **"New Project"** 3. Elige una organización (o crea una nueva) 4. Configura tu proyecto: - **Name**: `nutrition-tracker` - **Database Password**: genera uno seguro y guárdalo - **Region**: elige el más cercano (ej: `South America (São Paulo)`) 5. Clic en **"Create new project"** y espera ~2 minutos ### Paso 2: Configurar la base de datos 1. En tu proyecto de Supabase, ve a **SQL Editor** (menú lateral) 2. Clic en **"New query"** 3. Copia TODO el contenido del archivo `supabase-schema.sql` 4. Pégalo en el editor y clic en **"Run"** 5. Deberías ver: `Success. No rows returned` ### Paso 3: Obtener las credenciales 1. Ve a **Settings** → **API** (menú lateral) 2. Copia estos valores: - **Project URL**: `https://xxxxx.supabase.co` - **anon public key**: `eyJhbGci...` (el largo, no el service_role) ### Paso 4: Configurar autenticación 1. Ve a **Authentication** → **Providers** (menú lateral) 2. Asegúrate de que **Email** esté habilitado 3. (Opcional) En **Authentication** → **URL Configuration**: - Site URL: `https://tu-dominio.vercel.app` (lo agregas después del deploy) ### Paso 5: Crear cuenta en Vercel (gratis) 1. Ve a [vercel.com](https://vercel.com) y crea una cuenta con GitHub 2. Conecta tu cuenta de GitHub si no lo has hecho ### Paso 6: Subir el código a GitHub 1. Crea un nuevo repositorio en GitHub llamado `nutrition-tracker` 2. Sube todos los archivos de esta carpeta al repositorio: ```bash # Si tienes Git instalado: cd nutrition-app git init git add . git commit -m "Initial commit" git branch -M main git remote add origin https://github.com/TU_USUARIO/nutrition-tracker.git git push -u origin main ``` O puedes subir los archivos manualmente desde la interfaz de GitHub. ### Paso 7: Deploy en Vercel 1. En Vercel, clic en **"Add New..."** → **"Project"** 2. Importa tu repositorio `nutrition-tracker` 3. En **Environment Variables**, agrega: - `VITE_SUPABASE_URL` = `https://xxxxx.supabase.co` (tu Project URL) - `VITE_SUPABASE_ANON_KEY` = `eyJhbGci...` (tu anon key) 4. Clic en **"Deploy"** 5. Espera ~1 minuto. ¡Listo! ### Paso 8: Actualizar URL en Supabase 1. Copia la URL de tu app desplegada (ej: `https://nutrition-tracker-abc.vercel.app`) 2. En Supabase → **Authentication** → **URL Configuration** 3. Actualiza **Site URL** con tu URL de Vercel 4. En **Redirect URLs**, agrega tu URL de Vercel --- ## 📱 Instalar como App en el Celular ### iPhone (Safari) 1. Abre tu URL de Vercel en Safari 2. Toca el botón de compartir (□↑) 3. Selecciona "Agregar a pantalla de inicio" 4. Nombra la app "Nutrición" y confirma ### Android (Chrome) 1. Abre tu URL de Vercel en Chrome 2. Toca el menú (⋮) 3. Selecciona "Instalar aplicación" o "Agregar a pantalla de inicio" 4. Confirma la instalación --- ## 🔧 Desarrollo Local ```bash # Instalar dependencias npm install # Crear archivo .env con tus credenciales cp .env.example .env # Edita .env con tus valores de Supabase # Ejecutar en desarrollo npm run dev # Build para producción npm run build ``` --- ## 📁 Estructura del Proyecto ``` nutrition-app/ ├── src/ │ ├── App.jsx # Componente principal │ ├── main.jsx # Entry point │ └── index.css # Estilos globales ├── public/ │ └── icon.svg # Icono de la app ├── index.html # HTML base ├── package.json # Dependencias ├── vite.config.js # Config de Vite + PWA ├── tailwind.config.js # Config de Tailwind ├── supabase-schema.sql # Schema de base de datos ├── .env.example # Template de variables └── README.md # Esta guía ``` --- ## 🛠 Tecnologías - **React 18** - Framework UI - **Vite** - Build tool - **Tailwind CSS** - Estilos - **Framer Motion** - Animaciones - **Supabase** - Backend (PostgreSQL + Auth) - **Vercel** - Hosting - **PWA** - App instalable --- ## 🆘 Solución de Problemas ### "Invalid API key" - Verifica que copiaste el `anon` key, no el `service_role` - Asegúrate de que las variables de entorno están bien configuradas en Vercel ### "Email not confirmed" - Revisa tu bandeja de entrada y spam - En Supabase puedes deshabilitar la confirmación de email en Authentication → Settings ### La app no se instala como PWA - Asegúrate de acceder por HTTPS (Vercel lo hace automático) - Intenta en Chrome o Safari, otros navegadores pueden no soportar PWA ### Los datos no se guardan - Verifica que ejecutaste el SQL schema correctamente - Revisa la consola del navegador (F12) para ver errores --- ## 📞 Soporte Este tracker está basado en el plan de **Bea Boullosa Nutrición Deportiva** - 📍 Bosques de Radiatas #54-102, Bosques de las Lomas, CDMX - 📱 WhatsApp: +52 55 3409 2781 # nutrition-tracker