# Desarrollo Local - Frontend

## 🚀 Inicio Rápido

### React + Vite

```bash
# Instalar dependencias
npm install

# Configurar variables de entorno
cp .env .env.local
nano .env.local  # Ajustar API_URL a tu backend local

# Iniciar servidor de desarrollo
npm run dev

# Acceder a: http://localhost:5173
```

### Producción local

```bash
# Build para producción
npm run build

# Preview del build
npm run preview
```

## 📝 Configuración

### Variables de entorno (.env.local)

```env
# Backend local
VITE_API_URL=http://localhost:3000

# O backend en servidor
VITE_API_URL=https://api.tudominio.cl
```

## 🔧 Comandos útiles

```bash
npm install          # Instalar dependencias
npm run dev          # Desarrollo (hot reload)
npm run build        # Build de producción
npm run preview      # Preview del build
npm run lint         # Linter
```

## 📦 Estructura del proyecto

```
frontend/
├── src/
│   ├── components/      # Componentes reutilizables
│   │   ├── common/      # Componentes comunes
│   │   └── layout/      # Layout (Header, Footer)
│   ├── pages/           # Páginas (Home, About, NotFound)
│   ├── services/        # API clients (axios)
│   ├── hooks/           # Custom hooks
│   ├── utils/           # Utilidades
│   ├── assets/          # Imágenes, iconos
│   ├── App.jsx          # Componente principal
│   └── main.jsx         # Entry point
├── public/              # Archivos estáticos
├── index.html           # HTML principal
├── package.json         # Dependencias
├── vite.config.js       # Configuración Vite
└── tailwind.config.js   # Configuración Tailwind
```

## 🎨 Tailwind CSS

Este proyecto usa Tailwind CSS v3. Los estilos se configuran en:

- `tailwind.config.js` - Configuración principal
- `src/index.css` - Directivas de Tailwind

## 🔌 Integración con Backend

El proyecto está configurado para conectarse con:
- Express backend en `https://api.tudominio.cl`
- PHP backend en `https://api.tudominio.cl`

Para desarrollo local, ajusta `VITE_API_URL` en `.env.local`

## 📱 Responsive

El diseño es completamente responsive usando Tailwind CSS:
- Mobile first
- Breakpoints: sm, md, lg, xl, 2xl

## 🚀 Deploy

El proyecto se construye con:

```bash
npm run build
```

Los archivos generados en `dist/` están listos para servir con:
- Nginx
- Apache
- Vercel
- Netlify
- GitHub Pages