# Trading Platform Frontend

Aplicacion web frontend para Trading Platform.

## Stack Tecnologico

- **Framework:** React 18
- **Build Tool:** Vite 6
- **Lenguaje:** TypeScript 5.x
- **Estilos:** TailwindCSS 3.4
- **Estado:** Zustand + React Query
- **Forms:** React Hook Form + Zod
- **Charts:** Recharts + Lightweight Charts
- **Icons:** Heroicons + Lucide React

## Estructura del Proyecto

```
src/
├── components/       # Componentes reutilizables
│   ├── ui/           # Componentes UI base
│   ├── charts/       # Graficos y visualizaciones
│   ├── forms/        # Componentes de formulario
│   └── layout/       # Layout components
├── hooks/            # Custom React hooks
├── modules/          # Modulos de negocio
│   ├── auth/         # Autenticacion
│   ├── dashboard/    # Dashboard principal
│   ├── trading/      # Trading interface
│   ├── portfolio/    # Gestion de portfolios
│   └── education/    # Modulo educativo
├── services/         # API clients y servicios
├── stores/           # Zustand stores
├── styles/           # Estilos globales
├── types/            # TypeScript types
├── App.tsx           # Componente raiz
└── main.tsx          # Entry point
```

## Instalacion

```bash
# Instalar dependencias
npm install

# Copiar variables de entorno
cp .env.example .env
```

## Variables de Entorno

```env
# API Backend
VITE_API_URL=http://localhost:3000/api/v1
VITE_WS_URL=ws://localhost:3000/ws

# Stripe (public key)
VITE_STRIPE_PUBLIC_KEY=pk_test_xxx

# Feature flags
VITE_ENABLE_ML_DASHBOARD=true
VITE_ENABLE_TRADING=true
```

## Scripts Disponibles

| Script | Descripcion |
|--------|-------------|
| `npm run dev` | Servidor desarrollo (Vite) |
| `npm run build` | Build produccion |
| `npm run preview` | Preview build local |
| `npm run lint` | Verificar codigo ESLint |
| `npm run test` | Ejecutar tests (Vitest) |
| `npm run typecheck` | Verificar tipos TypeScript |

## Desarrollo

```bash
# Iniciar servidor desarrollo
npm run dev

# Abrir en navegador
# http://localhost:5173
```

## Componentes Principales

### Dashboard
- Overview de portfolio
- Graficos de rendimiento
- Senales ML activas

### Trading
- Interfaz de ordenes
- Graficos en tiempo real (TradingView style)
- Order book y historial

### Portfolio
- Distribucion de assets
- Historial de transacciones
- Metricas de rendimiento

### ML Dashboard
- Predicciones activas
- Metricas de modelos
- Historial de senales

## Estado Global (Zustand)

```typescript
// stores/authStore.ts
const useAuthStore = create((set) => ({
  user: null,
  token: null,
  login: (user, token) => set({ user, token }),
  logout: () => set({ user: null, token: null }),
}));

// stores/tradingStore.ts
const useTradingStore = create((set) => ({
  orders: [],
  positions: [],
  // ...
}));
```

## API Client (React Query)

```typescript
// services/api.ts
import { useQuery, useMutation } from '@tanstack/react-query';

export const useUser = () => useQuery({
  queryKey: ['user'],
  queryFn: fetchUser,
});

export const useCreateOrder = () => useMutation({
  mutationFn: createOrder,
});
```

## Testing

```bash
# Ejecutar tests
npm run test

# Tests con UI
npm run test:ui

# Coverage
npm run test:coverage
```

## Build y Deploy

```bash
# Build produccion
npm run build

# Output en dist/
ls dist/
```

### Docker

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

# Ejecutar con nginx
docker run -p 80:80 trading-frontend
```

## Configuracion Nginx

Ver `nginx.conf` para configuracion de produccion con:
- Compresion gzip
- Cache de assets estaticos
- SPA fallback routing
- Security headers

## Documentacion Relacionada

- [Documentacion de Modulos](../../docs/02-definicion-modulos/)
- [Inventario Frontend](../../docs/90-transversal/inventarios/FRONTEND_INVENTORY.yml)
- [ML Dashboard Implementation](./ML_DASHBOARD_IMPLEMENTATION.md)

---

**Proyecto:** Trading Platform
**Version:** 0.1.0
**Actualizado:** 2026-01-07