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

# Instalar dependencias
npm install

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

Variables de Entorno

# 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

# 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)

// 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)

// 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

# Ejecutar tests
npm run test

# Tests con UI
npm run test:ui

# Coverage
npm run test:coverage

Build y Deploy

# Build produccion
npm run build

# Output en dist/
ls dist/

Docker

# 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
• Inventario Frontend
• ML Dashboard Implementation

---

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