Initial commit: Plataforma de Economía
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
This commit is contained in:
168
TECH_SPECS.md
Normal file
168
TECH_SPECS.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user