Frontend de trading-platform - Workspace V2
|
|
||
|---|---|---|
| docs | ||
| src | ||
| .env | ||
| .env.example | ||
| Dockerfile | ||
| index.html | ||
| nginx.conf | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
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
# 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
VITE_API_BASE_URL=http://localhost:3000/api
VITE_ENABLE_DEVTOOLS=true
Docker
# Build imagen
docker build -t trading-frontend .
# Ejecutar con docker-compose
docker-compose -f docker-compose.mcp.yml up frontend