# 🗺️ Mapa de Inicio - ¿Por Dónde Empezar?

Bienvenido. Acabas de recibir un **sistema completo de invitaciones dinámicas**. 

Aquí te guío qué hacer primero.

---

## 🎯 Paso 1: Entender Qué Recibiste (5 min)

Tienes una aplicación web como **Canva, pero 100% tuya y sin dependencias**.

**Lee esto**: `BIENVENIDA.md`

✓ Entenderás qué hace exactamente  
✓ Sabrás qué tecnología usa  
✓ Verás qué puedes personalizar  

---

## 🚀 Paso 2: Configuración Inicial (10 min)

Necesitas preparar tu ambiente.

**Lee y sigue**: `GUIA_RAPIDA.md`

✓ Configura MySQL/credenciales  
✓ Instala dependencias  
✓ Inicia el servidor  
✓ Accede a tu invitación  

**Comandos principales:**
```bash
npm install
npm run dev
```

Luego abre en navegador:
- http://localhost:3000 → Tu invitación
- http://localhost:3000/admin → Editar datos

---

## 📋 Paso 3: Verificar Todo Funciona (5 min)

Haz una prueba rápida:

1. Abre http://localhost:3000/admin
2. Cambia el título
3. Presiona "Guardar Cambios"
4. Abre http://localhost:3000
5. ¿Ves el cambio? ✓ **¡Funciona!**

---

## 🎨 Paso 4: Personalizar (Tu Tiempo)

Ahora es hora de hacerlo tuyo.

### Opción A: Cambio Rápido (5 min)
Solo quieres agregar tus datos:
1. Abre http://localhost:3000/admin
2. Edita título, fecha, ubicación, etc
3. Sube tu imagen
4. Elige color del tema

**Listo.** Tu invitación está personalizada.

### Opción B: Cambio Completo (30 min-1 hora)
Quieres que se vea diferente:

**Edita el diseño:**
- Archivo: `app/components/Invitation.tsx`
- Aquí cambias la estructura HTML
- Aquí cambias los colores y estilos Tailwind
- Reinicia servidor para ver cambios

**Referencia rápida:**
- Tailwind docs: https://tailwindcss.com

---

## 📚 Documentación Disponible

| Documento | Cuándo Leerlo |
|-----------|---------------|
| **BIENVENIDA.md** | Primero, para entender el proyecto |
| **GUIA_RAPIDA.md** | Segundo, para configurar |
| **TRUCOS.md** | Cuando necesites referencia rápida |
| **README_INVITACION.md** | Para entender arquitectura completa |
| **CHECKLIST.md** | Para verificar que todo esté hecho |
| **COMANDOS.md** | Para referencia de comandos |

---

## 🛠️ Si Algo No Funciona

### MySQL No Conecta
```
1. Abre MySQL: mysql -u root -p
2. Verifica usuario y contraseña en .env.local
3. Verifica que invitacion_db existe
4. Si no existe, ejecuta: mysql -u root -p < setup.sql
```

### Server No Inicia
```
npm install
npm run dev
```

### Cambios No Se Ven
```
1. Recarga la página (Ctrl+F5)
2. Revisa la consola (F12 → Console)
3. Busca errores en rojo
```

### Más Ayuda
- Lee **CHECKLIST.md** → Solución de Problemas
- Revisa archivos `.sql` para estructura de BD

---

## 🎯 Milestones Sugeridos

### Semana 1
- [ ] Setup completado
- [ ] Invitación con tus datos
- [ ] Probado en teléfono

### Semana 2
- [ ] Diseño personalizado
- [ ] Compartida con amigos
- [ ] Funciona correctamente

### Semana 3+
- [ ] Considera desplegar a producción (Vercel/Heroku)
- [ ] Automatiza actualización de datos
- [ ] Agrega analytics

---

## 🚀 Próximas Funcionalidades (Ideas)

Si quieres expandir:

```
- Múltiples invitaciones (bodas, cumpleaños, eventos)
- Sistema de confirmación de asistencia
- URLs personalizadas por invitado
- Email con invitación
- Galería de fotos
- RSVP automático
- QR code en invitación
- Temas de color personalizados
```

---

## 📁 Estructura Rápida

```
invitacion/
├── .env.local ← TU CONFIGURACIÓN (no compartir)
├── app/
│   ├── page.tsx ← Página principal
│   ├── admin/page.tsx ← Panel de edición
│   ├── api/ ← APIs del servidor
│   └── components/ ← Componentes React
├── lib/db.ts ← Conexión BD
├── setup.sql ← Script inicialización
└── [Documentación]
```

---

## ✅ Checklist de Primer Día

- [ ] Leí BIENVENIDA.md
- [ ] Configuré .env.local
- [ ] Ejecuté `npm install`
- [ ] Ejecuté `npm run dev`
- [ ] Accedí a http://localhost:3000/admin
- [ ] Cambié un dato y guardé
- [ ] Vi el cambio en http://localhost:3000
- [ ] Instalé en mi teléfono/tablet
- [ ] Compartí con alguien

Si todo está tamuadó, ¡felicidades! 🎉

---

## 💡 Tips de Oro

1. **Primero entiende, luego modifica**
   - Lee los archivos antes de cambiar
   - Los cambios en JS/TypeScript requieren reiniciar servidor

2. **Siempre haz backup de BD**
   ```bash
   mysqldump -u root -p invitacion_db > backup.sql
   ```

3. **Prueba en móvil temprano**
   - Accede desde móvil: tu-ip:3000
   - Verifica que se ve bien

4. **Deja .env.local fuera de Git**
   - Nunca commitees contraseñas
   - Úsa .env.example como plantilla

5. **Experimenta, no tengas miedo**
   - Es tu proyecto
   - Si algo sale mal, simplemente revierte
   - Aprendes haciendo

---

## 🎓 Vas a Aprender

Trabajando con este proyecto:

- ✓ Cómo funciona Next.js (framework)
- ✓ Componentes React (frontend)
- ✓ APIs REST (backend)
- ✓ Bases de datos SQL
- ✓ Deployment web
- ✓ Full-stack development

---

## 🎉 ¡Lista Para Empezar!

1. **Abre terminal en esta carpeta**
2. **Ejecuta: `npm run dev`**
3. **Abre: http://localhost:3000/admin**
4. **Empieza a personalizar**

---

## 🚀 Roadmap Sugerido

```
Hoy:
  → Setup y primeras pruebas

Mañana:
  → Personalización visual
  → Agregar tus datos

Esta semana:
  → Probar en múltiples dispositivos
  → Compartir con invitados

Próximas semanas:
  → Considerar desplegar
  → Automatizar
  → Expandir funcionalidades
```

---

## 💬 Recordatorio Final

Este es **TU PROYECTO**. No depende de Canva, ni de nadie.

Puedes:
- Modificarlo como quieras
- Entender cada línea
- Mejorarlo
- Venderlo
- Compartirlo

Es 100% tuyo.

---

**¡Bienvenido, desarrollador! Vamos a hacerlo.** 🚀

Empecemos por aquí:
```bash
npm run dev
```

Luego abre: http://localhost:3000/admin

¡Nos vemos allá! 👋