econ/TECH_SPECS.md

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

{
  "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)

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

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

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

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