# 📋 Checklist de Implementación

Sigue estos pasos para poner tu sitio de invitaciones en funcionamiento.

## Pre-requisitos ✓
- [ ] Node.js 18+ instalado
- [ ] MySQL/MariaDB instalado y corriendo
- [ ] Git (opcional, para control de versiones)

## Configuración Inicial

### 1. Configurar Base de Datos
- [ ] Crear base de datos MySQL: `invitacion_db`
  ```bash
  mysql -u root -p
  CREATE DATABASE invitacion_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
  ```

### 2. Variables de Entorno
- [ ] Copiar `.env.example` a `.env.local`
  ```bash
  cp .env.example .env.local
  ```

- [ ] Editar `.env.local` con tu configuración:
  - `DB_HOST`: localhost (o tu servidor)
  - `DB_USER`: tu usuario MySQL
  - `DB_PASSWORD`: tu contraseña
  - `DB_NAME`: invitacion_db
  - `DB_PORT`: 3306 (puerto por defecto)

### 3. Instalar Dependencias
- [ ] Ejecutar:
  ```bash
  npm install
  ```

### 4. Inicializar Base de Datos
- [ ] Ejecutar servidor:
  ```bash
  npm run dev
  ```

- [ ] Acceder a: `http://localhost:3000/api/init-db`
  - Verifica que no hay errores
  - Deberías ver: `"success": true`

## Uso Diario

### Ver Invitación
- [ ] Acceder a: `http://localhost:3000`

### Editar Datos
- [ ] Acceder a: `http://localhost:3000/admin`
- [ ] Hacer cambios
- [ ] Click en "Guardar Cambios"
- [ ] Los cambios se verán inmediatamente

## Personalización

### Cambiar Diseño
- [ ] Editar: `app/components/Invitation.tsx`
- [ ] Personalizar estructura HTML y estilos
- [ ] Agregar elementos propios

### Agregar Campos
1. [ ] Editar `setup.sql` - agregar columna
2. [ ] Editar tipos en `app/components/Invitation.tsx`
3. [ ] Actualizar `app/components/AdminPanel.tsx`
4. [ ] Actualizar APIs en `app/api/invitation/route.ts`
5. [ ] Reiniciar servidor

### Cambiar Colores
- [ ] Editar `app/components/AdminPanel.tsx`
- [ ] Modificar array `COLOR_OPTIONS`

## Deployment

### Vercel (Recomendado)
- [ ] Crear cuenta en vercel.com
- [ ] Conectar repositorio Git
- [ ] Agregar variables de entorno en Settings
- [ ] Deploy automático

### Heroku
- [ ] Crear cuenta en heroku.com
- [ ] Conectar repositorio
- [ ] Crear base de datos remota
- [ ] Agregar env vars
- [ ] Hacer push

### Tu Servidor
- [ ] Instalar Node.js en servidor
- [ ] Instalar MySQL en servidor
- [ ] Clonar repositorio
- [ ] Configurar `.env.local`
- [ ] Ejecutar `npm install && npm run build`
- [ ] Usar PM2 o similar para mantener corriendo

## Testing

- [ ] Cambiar título → verifica que se actualiza
- [ ] Cambiar fecha → verifica formato
- [ ] Cambiar imagen → verifica carga correcta
- [ ] Cambiar color → verifica tema actualiza
- [ ] Cargar en móvil → verifica responsive
- [ ] Compartir link → verifica acceso público

## Solución de Problemas

### Error de Conexión BD
```
✓ Verificar MySQL corre: mysql -u root -p
✓ Verificar credenciales en .env.local
✓ Verificar base de datos existe
✓ Revisar logs del servidor
```

### Cambios no se guardan
```
✓ Revisar consola (F12) para errores
✓ Verificar que la BD tiene la tabla invitations
✓ Verificar conexión BD
✓ Revisar logs del servidor
```

### Estilos no se aplican
```
✓ Refrescar página (Ctrl+Shift+R)
✓ Limpiar cache del navegador
✓ Reiniciar servidor: npm run dev
```

## Archivos Clave

| Archivo | Función |
|---------|---------|
| `.env.local` | Configuración sensible |
| `app/page.tsx` | Página principal |
| `app/admin/page.tsx` | Panel admin |
| `app/components/Invitation.tsx` | Diseño invitación |
| `app/components/AdminPanel.tsx` | Editor de datos |
| `lib/db.ts` | Conexión BD |
| `app/api/invitation/route.ts` | API get/post |
| `app/api/invitation/[id]/route.ts` | API individual |
| `setup.sql` | SQL inicial |

## Recursos Útiles

- [Next.js Docs](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com)
- [MySQL Docs](https://dev.mysql.com/doc/)
- [React Docs](https://react.dev)

## Seguridad

- [ ] Cambiar contraseña MySQL por defecto
- [ ] Usar variables de entorno (no commitear `.env.local`)
- [ ] Usar HTTPS en producción
- [ ] Validar inputs en servidor
- [ ] Usar prepared statements (ya incluído)

## Próximos Pasos

1. Completar personalización visual
2. Probar en móvil y tableta
3. Hacer backup de BD
4. Configurar dominio personalizado
5. Agregar analytics
6. Hacer deploy a producción

---

**¡Felicidades! Tu sitio está listo.** 🎉