d31575a143
Features: - React 18 + TypeScript frontend with Vite - Go + Gin backend API - PostgreSQL database - JWT authentication with refresh tokens - User management (admin panel) - Docker containerization - Progress tracking system - 4 economic modules structure Fixed: - Login with username or email - User creation without required email - Database nullable timestamps - API response field naming
169 lines
3.6 KiB
Markdown
169 lines
3.6 KiB
Markdown
# Especificaciones Técnicas - Plataforma Economía
|
|
|
|
## 1. Arquitectura Frontend
|
|
|
|
### Tecnologías Principales
|
|
- **Framework**: React 18.2+
|
|
- **Lenguaje**: TypeScript 5.0+
|
|
- **Styling**: Tailwind CSS 3.4+
|
|
- **Build Tool**: Vite 5.0+
|
|
- **Package Manager**: npm
|
|
|
|
### Dependencias Clave
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"react-router-dom": "^6.20.0",
|
|
"d3": "^7.8.0",
|
|
"recharts": "^2.10.0",
|
|
"zustand": "^4.4.0",
|
|
"lucide-react": "^0.294.0",
|
|
"framer-motion": "^10.16.0"
|
|
}
|
|
}
|
|
```
|
|
|
|
## 2. Componentes Interactivos Planificados
|
|
|
|
### 2.1 GraficoCurva (Módulos 2, 3, 4)
|
|
```typescript
|
|
interface GraficoCurvaProps {
|
|
tipo: 'oferta' | 'demanda' | 'equilibrio' | 'costos';
|
|
datos: Punto[];
|
|
interactivo: boolean;
|
|
onPuntoClick?: (punto: Punto) => void;
|
|
}
|
|
```
|
|
|
|
### 2.2 SimuladorPrecios (Módulo 2)
|
|
- Sliders para ajustar curvas
|
|
- Visualización de excedentes
|
|
- Animaciones de transición
|
|
|
|
### 2.3 CalculadoraElasticidad (Módulo 3)
|
|
- Inputs para valores Q1, Q2, P1, P2
|
|
- Cálculo automático con fórmula
|
|
- Visualización del resultado
|
|
|
|
### 2.4 JuegoFlujoCircular (Módulo 1)
|
|
- Drag & drop de elementos
|
|
- Conexiones entre agentes económicos
|
|
- Validación de respuestas
|
|
|
|
## 3. Estructura de Estado
|
|
|
|
```typescript
|
|
interface AppState {
|
|
progreso: {
|
|
modulo1: { completado: number; ejercicios: boolean[] };
|
|
modulo2: { completado: number; ejercicios: boolean[] };
|
|
modulo3: { completado: number; ejercicios: boolean[] };
|
|
modulo4: { completado: number; ejercicios: boolean[] };
|
|
};
|
|
usuario: {
|
|
nombre: string;
|
|
puntuacion: number;
|
|
logros: string[];
|
|
};
|
|
preferencias: {
|
|
modoOscuro: boolean;
|
|
notificaciones: boolean;
|
|
};
|
|
}
|
|
```
|
|
|
|
## 4. Configuración Docker
|
|
|
|
### Dockerfile
|
|
```dockerfile
|
|
FROM node:18-alpine AS builder
|
|
WORKDIR /app
|
|
COPY package*.json ./
|
|
RUN npm ci
|
|
COPY . .
|
|
RUN npm run build
|
|
|
|
FROM nginx:alpine
|
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
|
EXPOSE 80
|
|
```
|
|
|
|
### docker-compose.yml
|
|
```yaml
|
|
version: '3.8'
|
|
services:
|
|
econ-learning:
|
|
build: .
|
|
ports:
|
|
- "3000:80"
|
|
restart: unless-stopped
|
|
```
|
|
|
|
## 5. Rutas de la Aplicación
|
|
|
|
```
|
|
/ → Landing page
|
|
/modulos → Lista de módulos
|
|
/modulo/1 → Módulo 1: Fundamentos
|
|
/modulo/2 → Módulo 2: Oferta/Demanda
|
|
/modulo/3 → Módulo 3: Elasticidad
|
|
/modulo/4 → Módulo 4: Productor
|
|
/ejercicios/:id → Ejercicio específico
|
|
/progreso → Dashboard de progreso
|
|
```
|
|
|
|
## 6. Diseño UI/UX
|
|
|
|
### Paleta de Colores
|
|
- Primary: #2563eb (Azul)
|
|
- Secondary: #7c3aed (Violeta)
|
|
- Success: #10b981 (Verde)
|
|
- Warning: #f59e0b (Naranja)
|
|
- Error: #ef4444 (Rojo)
|
|
- Background: #f8fafc (Gris claro)
|
|
- Surface: #ffffff (Blanco)
|
|
|
|
### Tipografía
|
|
- **Headings**: Inter, 600-700 weight
|
|
- **Body**: Inter, 400 weight
|
|
- **Monospace**: JetBrains Mono (para fórmulas)
|
|
|
|
### Breakpoints
|
|
- Mobile: < 640px
|
|
- Tablet: 640px - 1024px
|
|
- Desktop: > 1024px
|
|
|
|
## 7. Optimizaciones Planificadas
|
|
|
|
### Performance
|
|
- Lazy loading de módulos
|
|
- Code splitting por ruta
|
|
- Virtualización de listas largas
|
|
- Caché de assets con service worker
|
|
|
|
### Accesibilidad
|
|
- ARIA labels en elementos interactivos
|
|
- Soporte para navegación por teclado
|
|
- Contraste WCAG AA
|
|
- Screen reader compatible
|
|
|
|
## 8. Testing Strategy
|
|
|
|
### Unit Tests (Vitest)
|
|
- Lógica de cálculos económicos
|
|
- Hooks personalizados
|
|
- Utilidades
|
|
|
|
### Integration Tests (React Testing Library)
|
|
- Flujo de navegación
|
|
- Interacción con gráficos
|
|
- Formularios
|
|
|
|
### E2E Tests (Playwright)
|
|
- Rutas críticas
|
|
- Ejercicios completos
|
|
- Persistencia de datos
|