# Separación Frontend/Backend

El proyecto ahora está completamente separado en frontend y backend.

## Estructura

```
pedidosClientesAyutec/
├── app/                    # Backend FastAPI
│   ├── main.py            # API REST
│   ├── api/               # Endpoints
│   └── services/          # Lógica de negocio
│
└── frontend/              # Frontend separado
    ├── index.html         # Kanban
    ├── proveedores.html   # Vista proveedores
    ├── upload.html        # Subir albaranes
    ├── admin.html         # Panel admin
    ├── css/               # Estilos
    └── js/                # JavaScript
```

## Ejecutar

### Backend (Puerto 8000)
```bash
python run.py
# O
uvicorn app.main:app --reload
```

Backend: http://localhost:8000
API Docs: http://localhost:8000/docs

### Frontend (Puerto 3000)
```bash
cd frontend
python -m http.server 3000
```

Frontend: http://localhost:3000

## Configuración

### Backend
- CORS configurado para permitir todas las origenes (cambiar en producción)
- API disponible en `/api/*`
- Media files en `/media/*`

### Frontend
- Configurar URL de API en `frontend/js/config.js`:
```javascript
const API_CONFIG = {
    BASE_URL: 'http://localhost:8000/api',
};
```

## Ventajas de la Separación

1. **Desarrollo Independiente**: Frontend y backend pueden desarrollarse por separado
2. **Despliegue Independiente**: Pueden desplegarse en servidores diferentes
3. **Escalabilidad**: Escalar frontend y backend independientemente
4. **Tecnologías Diferentes**: Fácil migrar frontend a React/Vue/Angular
5. **CDN**: Frontend puede servirse desde CDN

## Producción

### Backend
- Usar Gunicorn/Uvicorn con Nginx
- Configurar CORS para dominios específicos
- Variables de entorno seguras

### Frontend
- Servir con Nginx
- O usar un CDN
- Configurar proxy reverso si es necesario

## Comunicación

El frontend se comunica con el backend vía API REST:
- Todas las peticiones van a `http://localhost:8000/api/*`
- CORS está habilitado para permitir peticiones desde el frontend
- Los archivos de media se sirven desde `/media/*`