rckrdmrd
5b53c2539a
React frontend with: - Authentication UI - Trading dashboard - ML signals display - Portfolio management Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
195 lines
4.0 KiB
Markdown
195 lines
4.0 KiB
Markdown
# 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
|