# 🚀 Guía Rápida - Sistema de Invitaciones Dinámico

## Pasos para empezar en 5 minutos

### 1️⃣ Configurar Base de Datos

Asegúrate de tener MySQL/MariaDB corriendo. Luego:

```bash
# Opción A: Usar el endpoint de inicialización (más fácil)
# El proyecto lo hará automáticamente la primera vez

# Opción B: Ejecutar SQL manualmente
mysql -u root -p < setup.sql
```

### 2️⃣ Configurar Variables de Entorno

1. Editar `.env.local`
2. Actualizar tus credenciales de MySQL:
   - `DB_USER`: tu usuario MySQL
   - `DB_PASSWORD`: tu contraseña MySQL

**Ejemplo:**
```env
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=mi_contraseña
DB_NAME=invitacion_db
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

### 3️⃣ Instalar Dependencias

```bash
npm install
```

### 4️⃣ Iniciar Servidor

```bash
npm run dev
```

### 5️⃣ Acceder a la Aplicación

- **Ver Invitación**: http://localhost:3000
- **Panel Admin**: http://localhost:3000/admin

---

## 🎨 ¿Qué puedes hacer?

### En la Invitación (http://localhost:3000)
- Ver tu invitación personalizada
- Cambiar entre diferentes temas de color
- Ver imagen, fecha, hora y ubicación

### En el Panel Admin (http://localhost:3000/admin)
- ✏️ Editar título
- ✏️ Editar descripción  
- ✏️ Cambiar fecha y hora del evento
- ✏️ Actualizar ubicación
- ✏️ Cambiar nombre del invitado
- 🖼️ Cambiar imagen de portada
- 🎨 Seleccionar color del tema
- 💾 Guardar cambios (se ven en tiempo real)

---

## 🔧 Problemas Comunes

### "Error de conexión a BD"
```
✓ Verifica que MySQL esté corriendo
✓ Verifica tu usuario y contraseña en .env.local
✓ Verifica que el nombre de BD es correcto
```

### "Tabla no encontrada"
```
✓ Accede a http://localhost:3000/api/init-db
✓ Verifica el console del navegador para errores
```

### "No se ve el cambio en la invitación"
```
✓ Recarga la página (F5)
✓ Abre las DevTools (F12) y limpia el cache
```

---

## 📁 Archivos Importantes

| Archivo | Propósito |
|---------|-----------|
| `.env.local` | Credenciales y configuración |
| `app/page.tsx` | Página principal (invitación) |
| `app/admin/page.tsx` | Panel administrativo |
| `lib/db.ts` | Conexión a base de datos |
| `app/api/invitation/route.ts` | API de invitaciones |
| `setup.sql` | Script SQL para BD |

---

## 🎯 Próximos Pasos

1. **Personaliza el diseño** → Edita `app/components/Invitation.tsx`
2. **Agrega más campos** → Modifica la tabla en `setup.sql`
3. **Cambia los colores** → Actualiza los temas en `app/components/AdminPanel.tsx`
4. **Despliega a producción** → Usa Vercel, Heroku, etc.

---

## 📞 Soporte

Si encuentras algún error, verifica:
1. Los logs en la consola del navegador (F12)
2. Los logs del servidor en la terminal
3. Que las credenciales de BD sean correctas
4. Que MySQL esté corriendo

¡Listo! 🎉 Tu sistema de invitaciones dinámico está funcionando.