# 📋 Hoja de Trucos - Sistema de Invitaciones

## 🎯 En 60 Segundos

```
1. Edita .env.local con tus credenciales MySQL
2. Abre terminal: npm run dev
3. Abre navegador: http://localhost:3000/admin
4. Haz cambios y dale "Guardar"
5. ¡Listo! Tus cambios aparecen en http://localhost:3000
```

---

## 📁 Archivos Clave

### Para Personalizar Diseño
```
app/components/Invitation.tsx    ← Modifica aquí el diseño
```

### Para Agregar/Editar Campos
```
setup.sql                         ← Define qué campos existen
app/components/AdminPanel.tsx     ← Agrega campos al formulario
app/api/invitation/route.ts       ← Conecta API
```

### Para Cambiar Colores
```
app/components/AdminPanel.tsx     ← Edita array COLOR_OPTIONS
```

---

## 🔌 Principales Endpoints

| URL | Método | Función |
|-----|--------|---------|
| `/api/invitation` | GET | Obtiene última invitación |
| `/api/invitation` | POST | Crea nueva invitación |
| `/api/invitation/[id]` | GET | Obtiene invitación por ID |
| `/api/invitation/[id]` | PUT | Actualiza invitación |
| `/api/invitation/[id]` | DELETE | Elimina invitación |
| `/api/init-db` | GET | Inicializa base de datos |

---

## 🗂️ Estructura de Carpetas Importante

```
invitacion/
├── app/components/
│   ├── Invitation.tsx         ← VER invitación (público)
│   └── AdminPanel.tsx         ← EDITAR invitación (admin)
├── app/api/
│   ├── invitation/
│   │   ├── route.ts          ← GET/POST
│   │   └── [id]/route.ts     ← GET/PUT/DELETE específico
│   └── init-db/route.ts       ← Inicializar BD
├── lib/
│   └── db.ts                 ← Conexión a MySQL
├── .env.local                ← TUS CREDENCIALES (no compartir)
├── setup.sql                 ← Script SQL inicial
└── [Documentación]
```

---

## 🚀 Comandos Principales

```bash
npm run dev           # Iniciar desarrollo
npm run build         # Build para producción
npm start            # Ejecutar en producción
npm run typecheck    # Verificar tipos TypeScript
npm run lint         # Verificar código
npm audit            # Verificar vulnerabilidades
```

---

## 🌐 URLs de Desarrollo

| URL | Qué es |
|-----|--------|
| http://localhost:3000 | Tu invitación (lo que ven tus invitados) |
| http://localhost:3000/admin | Panel para editar (solo tu) |
| http://localhost:3000/api/init-db | Inicializar base de datos |

---

## 🗄️ Estructura de Base de Datos

```sql
invitations
├── id                INT (clave primaria)
├── title             VARCHAR (título)
├── description       TEXT
├── event_date        VARCHAR (fecha)
├── event_time        VARCHAR (hora)
├── location          VARCHAR (ubicación)
├── guest_name        VARCHAR (nombre invitado)
├── image_url         VARCHAR (URL imagen)
├── color_theme       VARCHAR (color: blue|pink|purple|green|red|yellow)
├── created_at        TIMESTAMP
└── updated_at        TIMESTAMP
```

---

## 🎨 Temas de Color Disponibles

```
'blue'      → Azul
'pink'      → Rosa
'purple'    → Púrpura
'green'     → Verde
'red'       → Rojo
'yellow'    → Amarillo
```

---

## ⚙️ Variables de Entorno (.env.local)

```env
DB_HOST=localhost              # Servidor MySQL
DB_PORT=3306                   # Puerto MySQL
DB_USER=root                   # Usuario MySQL
DB_PASSWORD=tu_contraseña      # Contraseña MySQL
DB_NAME=invitacion_db          # Nombre base datos
NEXT_PUBLIC_APP_URL=http://localhost:3000  # URL de la app
```

---

## 🔧 Tareas Comunes

### Cambiar Título de la Invitación
```
1. Abre: http://localhost:3000/admin
2. Edita el campo "Título"
3. Click "Guardar Cambios"
4. Aparece en: http://localhost:3000
```

### Cambiar Imagen
```
1. Copia URL de imagen (Unsplash, Pixabay, etc)
2. Panel admin → campo "URL de Imagen"
3. Guardar
4. Ver en invitación
```

### Cambiar Color del Tema
```
1. Panel admin → "Tema de Color"
2. Selecciona uno de los 6 colores
3. Guardar
4. Invitación cambia de color
```

### Agregar un Campo Nuevo
```
1. Edita setup.sql (agrega columna)
2. Edita AdminPanel.tsx (agrega input)
3. Edita Invitation.tsx (muestra el campo)
4. Edita route.ts (lo incluye en API)
5. Reinicia servidor
```

---

## 🐛 Troubleshooting Rápido

| Problema | Solución |
|----------|----------|
| "Error de BD" | Verifica MySQL corre, credenciales correctas |
| "Cambios no se guardan" | Revisa consola (F12), verifica BD conecta |
| "No se ve la imagen" | URL debe ser válida HTTPS |
| "Recarga de página lenta" | Es normal, Next.js genera rutas |
| "Puerto 3000 en uso" | Cambia: `npm run dev --port 3001` |

---

## 📚 Archivos de Documentación

| Archivo | Lee esto para... |
|---------|------------------|
| BIENVENIDA.md | Entender qué recibiste |
| GUIA_RAPIDA.md | Empezar en 5 minutos |
| README_INVITACION.md | Documentación completa |
| CHECKLIST.md | Verificar que todo esté hecho |
| COMANDOS.md | Referencia de comandos |

---

## 🚀 Deployment Rápido

### En Vercel (1 minuto)
```
1. Push a GitHub
2. Conecta repos en vercel.com
3. Agrega variables env
4. Deploy automático ✓
```

### En Heroku
```
1. `heroku create`
2. `heroku addons:create cleardb:ignite`
3. `git push heroku main`
```

---

## 🎯 Personalización Popular

### Cambiar Fuentes
```
Edita: app/components/Invitation.tsx
Busca: className con tailwind
Agrega: font-serif, font-mono, etc
```

### Hacer más Espacioso
```
Aumenta: px-8, py-6 (padding)
Disminuye: text-base (tamaño fuente)
Agrega: gap-8 (espacios entre elementos)
```

### Agregar Música/Video
```
En Invitation.tsx:
<audio src="url" controls></audio>
<video src="url" controls></video>
```

---

## 💾 Respaldos

```bash
# Backup BD
mysqldump -u root -p invitacion_db > backup.sql

# Restaurar BD
mysql -u root -p invitacion_db < backup.sql
```

---

## 🔐 Seguridad

- ✓ Nunca commitees .env.local
- ✓ Usa variables de entorno en hosting
- ✓ Valida inputs (ya incluído)
- ✓ Usa HTTPS en producción
- ✓ Protege tu contraseña MySQL

---

## 📞 Recursos

- Docs Next.js: https://nextjs.org
- React: https://react.dev
- Tailwind: https://tailwindcss.com
- MySQL: https://mysql.com
- StackOverflow: https://stackoverflow.com

---

## ✨ Hecho para Vos

Esto es tu sitio. Controlas todo, entiendes todo, modificas lo que quieras.

**Eres el dueño. Disfrútalo.** 🎉