# Trading Platform Frontend

React SPA para la plataforma de trading con creditos virtuales.

## Stack Tecnologico

- **React 18** + TypeScript 5
- **Vite** para build tooling
- **Tailwind CSS** para estilos
- **Zustand** para state management
- **TanStack Query** para data fetching
- **React Router v6** para routing

## Modulos

| Modulo | Descripcion | Puerto Backend |
|--------|-------------|----------------|
| Wallet | Billetera virtual, depositos, retiros | 3090 |
| Products | Marketplace de productos/servicios | 3091 |
| VIP | Suscripciones Gold/Platinum/Diamond | 3092 |
| Investment | Agentes Atlas/Orion/Nova | 3093 |
| Predictions | Paquetes de predicciones ML | 3094 |

## Estructura

```
src/
├── components/         # Componentes compartidos
├── services/          # Cliente API
├── modules/
│   ├── wallet/
│   │   ├── types/
│   │   ├── services/
│   │   ├── stores/
│   │   ├── hooks/
│   │   ├── components/
│   │   └── pages/
│   ├── products/
│   ├── vip/
│   ├── investment/
│   └── predictions/
├── routes.tsx
├── App.tsx
└── main.tsx
```

## Desarrollo

```bash
# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Build para produccion
npm run build

# Type checking
npm run type-check
```

## Variables de Entorno

```env
VITE_API_BASE_URL=http://localhost:3000/api
VITE_ENABLE_DEVTOOLS=true
```

## Docker

```bash
# Build imagen
docker build -t trading-frontend .

# Ejecutar con docker-compose
docker-compose -f docker-compose.mcp.yml up frontend
```