# Casos Prácticos y Troubleshooting

## Casos de Estudio Completos

### Caso 1: SaaS de Productividad Completo

#### Contexto del Proyecto
**Proyecto**: Plataforma de gestión de prompts de IA  
**Timeline**: 5 días de desarrollo  
**Stack**: Next.js + FastAPI + PostgreSQL + Docker  
**Herramientas**: Claude Code + Google Stitch  

#### Proceso Paso a Paso

##### Día 1: Vibe Planning (6 horas)
**Prompt Arquitectura**:
```xml
<meta>
Crear una plataforma SaaS que permita a usuarios introducir ideas simples (1-2 líneas) 
y generar documentación estructurada completa con arquitectura técnica, funcionalidades 
y plan de acción usando IA.
</meta>

<inspirations>
- Notion: Interfaz limpia y organización de documentos
- GitHub: Sistema de proyectos y documentación  
- V0: Generación automática desde prompts simples
</inspirations>

<guidelines>
Stack obligatorio:
- Frontend: Next.js 14 + TypeScript + Tailwind CSS
- Backend: FastAPI + SQLAlchemy + Pydantic
- Database: PostgreSQL + Redis para cache
- Auth: JWT + bcrypt
- Development: Docker Compose
</guidelines>

<practicalities>
- Containerized development con hot reload
- API REST con documentación automática
- Responsive design mobile-first
- Deploy en VPS con Docker
</practicalities>

<context>
Usuarios: Desarrolladores y no-desarrolladores creando apps con IA
MVP Features:
1. Input de idea simple (textarea)
2. Generación de arquitectura técnica
3. Definición de features detalladas
4. Plan de acción paso a paso exportable
5. Sistema de usuarios con proyectos personales
</context>
```

**Resultado**: 25 páginas de documentación arquitectónica detallada.

**Prompt Features**:
```xml
<mvp_core>
Features imprescindibles:
1. User Authentication: Registro/login con email/password
2. Project Creation: Input simple → documentación completa  
3. Project Management: CRUD de proyectos personales
4. Export Functionality: PDF y Markdown de documentación
5. Template System: Prompts pre-diseñados por categoría
</mvp_core>

<user_stories>
Como desarrollador sin experiencia en planning:
- "Quiero convertir mi idea de 'app de recetas' en documentación técnica completa"
- "Quiero ver ejemplos de arquitecturas similares para inspirarme"

Como founder no-técnico:
- "Quiero generar especificaciones que pueda dar a un desarrollador"
- "Quiero entender qué tecnologías necesito para mi idea"
</user_stories>

<technical_specs>
APIs necesarias:
- POST /auth/register, /auth/login
- GET, POST, PUT, DELETE /projects
- POST /projects/{id}/generate (core IA functionality)
- GET /templates (prompts predefinidos)
- GET /projects/{id}/export?format=pdf|md

Database schema:
- Users (id, email, password_hash, created_at)
- Projects (id, user_id, name, input_text, generated_docs, created_at)
- Templates (id, category, prompt_template, example_output)
</technical_specs>
```

**Resultado**: 15 páginas de features específicas y APIs definidas.

##### Día 2: Vibe Design (4 horas)

**Google Stitch Prompt**:
```
Crear interfaz para plataforma de generación de documentación técnica con IA:

Páginas necesarias:
1. Landing page explicando el valor (input simple → docs completas)
2. Dashboard mostrando proyectos del usuario
3. Editor de proyecto con textarea de input y preview de output
4. Galería de templates por categoría

Estilo: Minimalista profesional como Notion + Linear
Paleta: Azul (#3B82F6) y grises neutros
Target: Desarrolladores y founders técnicos
```

**Resultado Stitch**: 4 pantallas completas en 2 minutos.

**Refinamiento con Claude Code**:
```xml
<design_refinement>
Ajustar el diseño de Stitch para:
- Mejor contrast ratio (WCAG AA)
- CTAs más prominentes en landing
- Loading states para generación IA (puede tomar 30+ segundos)
- Empty states cuando no hay proyectos
- Mobile navigation optimizada
</design_refinement>
```

##### Día 3: Setup e Infraestructura (4 horas)

**Claude Code - Tarea 1**:
```
Implementar configuración inicial del entorno siguiendo este plan:

TAREA 1: Configuración inicial del entorno
1.1. Crear estructura de directorios del proyecto
1.2. Configurar Docker Compose con servicios: frontend (Next.js), backend (FastAPI), database (PostgreSQL), redis, adminer
1.3. Configurar variables de entorno para desarrollo
1.4. Verificar que todos los servicios levanten correctamente

Estructura esperada:
```
vibe-docs-generator/
├── frontend/          # Next.js app
├── backend/           # FastAPI app  
├── docs/             # Planning documentation
├── design/           # UI mockups
├── docker-compose.yml
├── .env.example
└── README.md
```

Verificación: `docker-compose up` debe levantar todos los servicios sin errores.
```

**Resultado**: Entorno completo funcionando en primer intento.

##### Día 4: Backend Implementation (6 horas)

**Tarea por tarea del plan**:
```
TAREA 2: Estructura del backend con FastAPI
2.1. Configurar FastAPI con estructura modular
2.2. Implementar modelos de base de datos (User, Project, Template)
2.3. Configurar Alembic para migraciones
2.4. Crear endpoints básicos de auth (/register, /login)

TAREA 3: CRUD de proyectos  
3.1. Implementar endpoints de proyectos (GET, POST, PUT, DELETE)
3.2. Añadir middleware de autenticación JWT
3.3. Validación con Pydantic schemas
3.4. Testing básico de endpoints
```

**Debugging real encontrado**:
```
Error: "CORS error when frontend calls backend"

Solución aplicada:
```python
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # Frontend URL
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
```

##### Día 5: Frontend + Integration (6 horas)

**Implementación con referencias visuales**:
```
Crear landing page basada en esta imagen [adjuntar screenshot de Stitch]

Componentes necesarios:
- Hero section con value proposition
- Features section con iconos
- CTA prominente "Crear primer proyecto"
- Footer simple con links

Stack: Next.js + TypeScript + Tailwind
Responsive: Mobile-first
```

**Integración backend**:
```typescript
// API client setup
const apiClient = {
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  
  async post(endpoint: string, data: any) {
    const response = await fetch(`${this.baseURL}${endpoint}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getToken()}`
      },
      body: JSON.stringify(data)
    });
    return response.json();
  },
  
  // ... más métodos
};
```

#### Resultados Finales
- **Tiempo total**: 26 horas (5 días)
- **Funcionalidad**: MVP completo y funcional
- **Performance**: <2s load time, responsive
- **Código**: 5,000 líneas aprox (auto-generadas)
- **Errores importantes**: 3 (todos solucionados con IA)

### Caso 2: E-commerce con Stripe Integration

#### Contexto
**Proyecto**: Tienda online de productos digitales  
**Complejidad**: Media-alta (pagos, seguridad)  
**Timeline**: 7 días
**Stack**: Next.js + Django + PostgreSQL + Stripe

#### Desafíos Únicos

##### Integración de Pagos
**Prompt específico para Stripe**:
```xml
<stripe_integration>
Implementar sistema de pagos completo:

Funcionalidades requeridas:
1. Checkout sessions para productos únicos
2. Webhooks para confirmar pagos
3. Dashboard de ventas para admin
4. Manejo de errores de pago
5. Receipts automáticos por email

Consideraciones de seguridad:
- Nunca almacenar datos de tarjeta
- Validar webhooks con signature
- HTTPS obligatorio
- Rate limiting en endpoints de pago
</stripe_integration>
```

**Debugging de webhooks**:
```python
# Problema común: Webhook signature validation
@csrf_exempt  
def stripe_webhook(request):
    payload = request.body
    sig_header = request.META.get('HTTP_STRIPE_SIGNATURE')
    endpoint_secret = settings.STRIPE_WEBHOOK_SECRET
    
    try:
        event = stripe.Webhook.construct_event(
            payload, sig_header, endpoint_secret
        )
    except ValueError:
        return HttpResponse(status=400)
    except stripe.error.SignatureVerificationError:
        return HttpResponse(status=400)
        
    # Handle the event
    if event['type'] == 'payment_intent.succeeded':
        payment_intent = event['data']['object']
        # Update order status
        
    return HttpResponse(status=200)
```

#### Lecciones Aprendidas
1. **Webhooks testing**: Usar ngrok para desarrollo local
2. **Error handling**: UI states para todos los escenarios de pago
3. **Security**: Nunca confiar en frontend para validación de pagos

### Caso 3: Dashboard Analítico Complejo

#### Contexto  
**Proyecto**: Dashboard de métricas para SaaS
**Complejidad**: Alta (visualización de datos)
**Datos**: 100k+ registros, actualizaciones en tiempo real
**Stack**: React + FastAPI + PostgreSQL + Redis + Chart.js

#### Desafíos de Performance

##### Optimización de Queries
**Problema**: Dashboard tardaba 15+ segundos en cargar
```sql
-- Query original (lento)
SELECT * FROM events 
JOIN users ON events.user_id = users.id 
WHERE events.created_at >= NOW() - INTERVAL '30 days';

-- Query optimizado
SELECT 
  DATE(events.created_at) as day,
  COUNT(*) as event_count,
  COUNT(DISTINCT events.user_id) as unique_users
FROM events 
WHERE events.created_at >= NOW() - INTERVAL '30 days'
GROUP BY DATE(events.created_at)
ORDER BY day;
```

##### Caching Strategy
```python
import redis
from functools import wraps

redis_client = redis.Redis(host='redis', port=6379, db=0)

def cache_dashboard_data(expiration=300):  # 5 minutos
    def decorator(func):
        @wraps(func)
        def wrapper(*args, **kwargs):
            cache_key = f"dashboard:{func.__name__}:{hash(str(args))}"
            
            cached = redis_client.get(cache_key)
            if cached:
                return json.loads(cached)
            
            result = func(*args, **kwargs)
            redis_client.setex(cache_key, expiration, json.dumps(result))
            return result
        return wrapper
    return decorator

@cache_dashboard_data(expiration=600)
def get_monthly_metrics(user_id: int):
    # Expensive database operations
    pass
```

##### Real-time Updates con WebSockets
```typescript
// Frontend WebSocket connection
useEffect(() => {
  const ws = new WebSocket(`ws://localhost:8000/ws/dashboard/${userId}`);
  
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    setDashboardData(prev => ({
      ...prev,
      [data.metric]: data.value
    }));
  };
  
  return () => ws.close();
}, [userId]);
```

#### Resultado Final
- **Performance**: <2s carga inicial, updates en tiempo real
- **Escalabilidad**: Probado con 100k registros
- **UX**: Loading states, error boundaries, offline support

## Troubleshooting Común

### Errores de Setup y Environment

#### "Docker containers won't start"

**Síntomas**:
- `docker-compose up` falla
- Puerto ya en uso
- Build errors

**Debugging steps**:
```bash
# 1. Ver qué puertos están ocupados
netstat -tulpn | grep :3000
netstat -tulpn | grep :8000

# 2. Limpiar containers anteriores  
docker-compose down -v
docker system prune -a

# 3. Verificar logs específicos
docker-compose logs frontend
docker-compose logs backend

# 4. Build individual para ver errores
docker-compose build frontend --no-cache
```

**Soluciones comunes**:
- Cambiar puertos en docker-compose.yml
- Verificar que Dockerfile existe en directorio correcto
- Revisar variables de entorno en .env

#### "IA genera código pero no funciona"

**Síntomas**:
- Imports incorrectos
- Syntax errors
- Dependencias faltantes

**Proceso de debug**:
```
1. Identificar el error exacto:
   - Leer error message completo
   - Identificar archivo y línea
   
2. Prompt de debugging:
   "Error encontrado: [MENSAJE_EXACTO]
   Archivo: [RUTA_ARCHIVO] línea [NUMERO]
   
   Por favor revisa y corrige manteniendo:
   - Consistencia con código existente
   - Imports correctos
   - Tipado TypeScript (si aplica)"

3. Verificar después de cada fix:
   - Compilación exitosa
   - Funcionalidad básica
   - No nuevos errores introducidos
```

### Errores de Integración Backend-Frontend

#### "CORS errors everywhere"

**Síntoma típico**:
```
Access to fetch at 'http://localhost:8000/api/users' from origin 
'http://localhost:3000' has been blocked by CORS policy
```

**Solución FastAPI**:
```python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000", "http://127.0.0.1:3000"],
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],
    allow_headers=["*"],
)
```

**Solución Django**:
```python
# settings.py
INSTALLED_APPS = [
    'corsheaders',
    # ... otras apps
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... otros middlewares
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True
```

#### "Authentication not working"

**Debugging JWT authentication**:
```typescript
// Frontend: Verificar token storage
const getToken = () => {
  if (typeof window !== 'undefined') {
    return localStorage.getItem('token');
  }
  return null;
};

// Verificar que headers se envían
const apiCall = async () => {
  const token = getToken();
  console.log('Token being sent:', token); // Debug
  
  const response = await fetch('/api/protected', {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  });
  
  if (response.status === 401) {
    console.log('Auth failed, redirecting to login');
    // Redirect logic
  }
};
```

```python
# Backend: Debug middleware
from fastapi import HTTPException, Depends
from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials

security = HTTPBearer()

def get_current_user(credentials: HTTPAuthorizationCredentials = Depends(security)):
    token = credentials.credentials
    print(f"Received token: {token[:20]}...") # Debug (parcial)
    
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=["HS256"])
        user_id = payload.get("sub")
        if user_id is None:
            raise HTTPException(status_code=401, detail="Invalid token")
        return user_id
    except JWTError:
        print("JWT decode error") # Debug
        raise HTTPException(status_code=401, detail="Invalid token")
```

### Errores de Base de Datos

#### "Database connection failed"

**Debugging steps**:
```bash
# 1. Verificar que DB container está corriendo
docker-compose ps

# 2. Intentar conexión directa
docker-compose exec db psql -U postgres -d mydatabase

# 3. Verificar variables de entorno
docker-compose exec backend env | grep DATABASE_URL

# 4. Ver logs de database
docker-compose logs db
```

**Errores comunes y soluciones**:
```python
# Error: "database doesn't exist"
# Solución: Crear database en init scripts o migrations

# Error: "password authentication failed"
# Solución: Verificar POSTGRES_USER, POSTGRES_PASSWORD en docker-compose

# Error: "relation doesn't exist"  
# Solución: Ejecutar migrations
docker-compose exec backend alembic upgrade head
```

#### "Migrations failing"

**Django migrations debug**:
```bash
# Ver estado actual
docker-compose exec backend python manage.py showmigrations

# Crear migration específica
docker-compose exec backend python manage.py makemigrations app_name

# Aplicar migrations una por una
docker-compose exec backend python manage.py migrate app_name 0001 --fake
docker-compose exec backend python manage.py migrate app_name 0002
```

**Alembic (FastAPI) debug**:
```bash
# Ver historial
docker-compose exec backend alembic history

# Crear migration
docker-compose exec backend alembic revision --autogenerate -m "add users table"

# Aplicar migration específica
docker-compose exec backend alembic upgrade +1
```

### Errores de Deployment

#### "Works locally but fails in production"

**Checklist de debugging**:
```
1. Environment variables:
   - ¿Están todas las ENV vars definidas en producción?
   - ¿Los valores son diferentes (URLs, secrets)?

2. Dependencies:
   - ¿package.json/requirements.txt están actualizados?
   - ¿Las versiones son compatibles en prod?

3. Build process:
   - ¿El build de producción funciona localmente?
   - ¿Los paths/imports son absolutos vs relativos?

4. Database:
   - ¿Las migrations se ejecutaron en prod?
   - ¿La DB es accesible desde app server?

5. Networking:
   - ¿Los puertos están abiertos?
   - ¿Los domains/IPs son correctos?
```

**Debugging en VPS**:
```bash
# Verificar logs de aplicación
docker-compose logs --tail=100 backend
docker-compose logs --tail=100 frontend

# Verificar recursos del sistema
htop
df -h  # Disk space
free -m  # Memory

# Verificar networking
netstat -tulpn | grep :80
netstat -tulpn | grep :443

# Test de conectividad
curl -I http://localhost:3000
curl -I http://localhost:8000/health
```

## Best Practices Basadas en Experiencia Real

### Desarrollo Iterativo

#### Principio: "Una Feature Completa por Vez"
```
❌ Malo: Implementar auth, CRUD, y frontend simultáneamente
✅ Bueno: 
   1. Auth backend completo + test
   2. Auth frontend completo + integración  
   3. CRUD backend completo + test
   4. CRUD frontend completo + integración
```

#### Testing en Cada Iteración
```bash
# Después de cada feature implementada
echo "Testing checklist:"
echo "1. ¿Compila sin errores?"
echo "2. ¿La funcionalidad básica funciona?"
echo "3. ¿No rompió funcionalidades anteriores?"
echo "4. ¿Los errores se manejan graciosamente?"

# Comandos específicos
npm run build  # Frontend
curl http://localhost:8000/health  # Backend health
```

### Gestión de Estado y Context

#### Context Pattern para React
```typescript
// AuthContext.tsx
interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  loading: boolean;
}

export const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  const login = async (email: string, password: string) => {
    setLoading(true);
    try {
      const response = await apiClient.post('/auth/login', { email, password });
      setUser(response.user);
      localStorage.setItem('token', response.token);
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthContext.Provider value={{ user, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  );
};
```

### Error Boundaries y Handling

#### React Error Boundary
```typescript
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error?: Error }
> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
    // Send to error reporting service
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
          <div className="max-w-md mx-auto text-center">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              Algo salió mal
            </h2>
            <p className="text-gray-600 mb-6">
              Lo sentimos, ocurrió un error inesperado.
            </p>
            <button
              onClick={() => window.location.reload()}
              className="bg-blue-500 text-white px-4 py-2 rounded"
            >
              Recargar página
            </button>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}
```

### Performance Optimization Patterns

#### React Query para Data Fetching
```typescript
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

const useProjects = (userId: string) => {
  return useQuery({
    queryKey: ['projects', userId],
    queryFn: () => apiClient.get(`/projects?user_id=${userId}`),
    staleTime: 5 * 60 * 1000, // 5 minutos
    retry: 3,
  });
};

const useCreateProject = () => {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: (projectData: CreateProjectData) => 
      apiClient.post('/projects', projectData),
    onSuccess: (newProject) => {
      // Optimistic update
      queryClient.setQueryData(['projects', newProject.user_id], (old: any) => ({
        ...old,
        projects: [...(old?.projects || []), newProject]
      }));
    },
  });
};
```

## Debugging Workflows Específicos

### Debugging con Claude Code

#### Proceso Estructurado
```
1. Identificar síntoma exacto:
   - ¿Qué esperabas que pasara?
   - ¿Qué está pasando realmente?
   - ¿Cuándo empezó a fallar?

2. Recopilar información:
   - Error messages completos
   - Browser console logs  
   - Network tab (failed requests)
   - Server logs si es backend

3. Prompt de debugging:
   "Debugging session - [DESCRIPCIÓN_PROBLEMA]
   
   Error: [ERROR_EXACTO]
   Archivo: [ARCHIVO:LÍNEA]
   
   Contexto del proyecto disponible en docs/
   Código relacionado: [COPIAR_CÓDIGO_RELEVANTE]
   
   Por favor diagnostica y sugiere solución manteniendo 
   consistencia con arquitectura existente."

4. Aplicar solución incrementalmente:
   - Un cambio por vez
   - Verificar después de cada cambio
   - Rollback si introduce nuevos problemas
```

### Debugging con Gemini CLI

#### Aprovechar Sistema de Memoria
```bash
# Añadir context de debugging a memoria
/memory add "Error común: CORS - solución es agregar middleware con origins específicos"
/memory add "Docker rebuild necesario después de cambios en Dockerfile"
/memory add "JWT tokens expiran en 24h, renovar automáticamente en frontend"

# Usar memoria durante debugging
/memory show  # Ver contexto disponible antes de hacer pregunta
```

## Patterns de Mantenimiento

### Logging Strategy
```python
# Backend logging setup
import logging
from pythonjsonlogger import jsonlogger

# Configure logger
logger = logging.getLogger(__name__)
handler = logging.StreamHandler()
formatter = jsonlogger.JsonFormatter()
handler.setFormatter(formatter)
logger.addHandler(handler)
logger.setLevel(logging.INFO)

# Usage in routes
@app.post("/projects")
async def create_project(project_data: ProjectCreate, current_user: User = Depends(get_current_user)):
    logger.info("Creating project", extra={
        "user_id": current_user.id,
        "project_name": project_data.name,
        "action": "create_project"
    })
    
    try:
        project = await create_project_service(project_data, current_user.id)
        logger.info("Project created successfully", extra={
            "project_id": project.id,
            "user_id": current_user.id
        })
        return project
    except Exception as e:
        logger.error("Project creation failed", extra={
            "error": str(e),
            "user_id": current_user.id,
            "project_data": project_data.dict()
        })
        raise
```

### Health Checks
```python
# Backend health endpoint
@app.get("/health")
async def health_check():
    checks = {}
    
    # Database check
    try:
        db.execute("SELECT 1")
        checks["database"] = "healthy"
    except Exception as e:
        checks["database"] = f"unhealthy: {str(e)}"
    
    # Redis check  
    try:
        redis_client.ping()
        checks["redis"] = "healthy"
    except Exception as e:
        checks["redis"] = f"unhealthy: {str(e)}"
    
    # Overall status
    overall_status = "healthy" if all(
        status == "healthy" for status in checks.values()
    ) else "unhealthy"
    
    return {
        "status": overall_status,
        "checks": checks,
        "timestamp": datetime.utcnow().isoformat()
    }
```

## Recursos y Herramientas de Debugging

### Herramientas Esenciales
```
Development:
- Chrome DevTools (Network, Console, Application)
- React DevTools
- Redux DevTools (si usas Redux)
- Docker Desktop (container management)

Backend:
- Postman/Insomnia (API testing)
- pgAdmin (PostgreSQL management)
- Redis Commander (Redis GUI)

Monitoring:
- Sentry (error tracking)
- LogTail/DataDog (logs aggregation)
- Uptime Robot (uptime monitoring)
```

### Scripts de Utilidad
```bash
# debug.sh - Script de debugging rápido
#!/bin/bash

echo "=== System Status ==="
docker-compose ps

echo -e "\n=== Recent Logs ==="
docker-compose logs --tail=20 backend

echo -e "\n=== Health Check ==="  
curl -s http://localhost:8000/health | jq '.'

echo -e "\n=== Database Connection ==="
docker-compose exec db pg_isready -U postgres

echo -e "\n=== Disk Usage ==="
df -h

echo -e "\n=== Memory Usage ==="
free -m
```

## Siguientes Pasos para Mastery

### Evolución de Skills
1. **Dominar una herramienta**: Especialízate en Claude Code O Cursor completamente
2. **Crear templates personales**: Desarrolla tu biblioteca de prompts y workflows
3. **Contribuir a comunidad**: Documenta y comparte tus soluciones
4. **Explorar casos avanzados**: Microservices, real-time apps, AI/ML integration
5. **Mentoring**: Ayudar a otros acelera tu propio aprendizaje

### Building in Public
- **Documentar proceso**: Blog posts o videos del desarrollo
- **Open source**: Compartir templates y herramientas útiles  
- **Community engagement**: Participar en Discord de Arquitectos IA
- **Feedback loops**: Buscar review de código y arquitectura

El Vibe Coding es una habilidad que mejora exponencialmente con la práctica. Estos casos prácticos y patterns de troubleshooting te darán la base para enfrentar cualquier desafío técnico con confianza.