🧩 Guía Interactiva — Unidad 3

Aplicación web interactiva de aprendizaje para la Unidad 3 de desarrollo JavaScript avanzado. Cubre 6 módulos progresivos con demos en vivo, ejercicios con verificación automática y tareas con seguimiento de progreso.

✨ Características

• 6 módulos completos con contenido, demos interactivos y ejercicios
• Ejercicios con autocorrección — respuesta inmediata con explicación detallada
• Sistema de XP y progreso — persistido en localStorage
• Demos en vivo — Event Loop visualizado, AbortController, fetch a API real, pipeline CI/CD y generación con IA (Groq)
• Resaltado de sintaxis — bloques de código con tabs por archivo
• Diseño responsive — sidebar colapsable en móvil

📚 Módulos

#	Módulo	Temas	XP
1	🧩 Modularidad Avanzada	ES Modules, Barrel Pattern, Dynamic Imports, SRP	100
2	⚡ Asincronía Profunda	Event Loop, Promises, async/await, AbortController	120
3	🎯 Eventos y Validación	CustomEvent, Pub/Sub, Schema Validation, Runtime Types	110
4	🔗 Integración Full Stack	REST Design, Fetch avanzado, CORS, Express.js	130
5	🚀 GitHub Actions & CI/CD	Workflows YAML, Secrets, Matrix builds, Deploy Vercel	140
6	🤖 IA + Automatización	Ollama, Hermes 3, Groq API, LLM Agents	200

🛠️ Stack técnico

Tecnología	Versión	Rol
React	18.3	UI framework
TypeScript	5.4	Type safety
Vite	5.3	Bundler / dev server
Tailwind CSS	3.4	Estilos utilitarios
Framer Motion	11.3	Animaciones de transición
Lucide React	0.395	Iconografía
react-syntax-highlighter	15.5	Resaltado de código

🚀 Inicio rápido

Requisitos

• Node.js 18+
• npm o bun

Instalación

# Clonar el repositorio
git clone <repo-url>
cd interactive-guide

# Instalar dependencias
npm install
# o con bun:
bun install

Desarrollo

npm run dev

La app estará disponible en http://localhost:5173.

Build de producción

npm run build       # Compila TypeScript y genera el bundle
npm run preview     # Sirve el build localmente para verificar

📁 Estructura del proyecto

interactive-guide/
├── public/                   # Assets estáticos
├── src/
│   ├── components/
│   │   ├── CodeBlock.tsx     # Bloque de código con tabs y resaltado
│   │   ├── Exercise.tsx      # Ejercicio interactivo (multiple / checklist)
│   │   ├── HomeworkCard.tsx  # Tarjeta de tarea con checklist y progreso
│   │   └── Sidebar.tsx       # Navegación lateral con módulos y XP
│   ├── data/
│   │   └── modules.ts        # Metadatos de los 6 módulos (título, XP, etc.)
│   ├── modules/
│   │   ├── M1_Modularidad.tsx
│   │   ├── M2_Asincronia.tsx
│   │   ├── M3_EventosValidacion.tsx
│   │   ├── M4_FullStack.tsx
│   │   ├── M5_Actions.tsx
│   │   └── M6_IA.tsx
│   ├── App.tsx               # Raíz de la aplicación, routing entre módulos
│   ├── index.css             # Estilos base y variables de diseño
│   └── main.tsx              # Entry point de React
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

🧩 Componentes principales

Exercise

Componente de ejercicio interactivo. Soporta dos tipos:

• multiple — una sola respuesta correcta (radio button)
• checklist — múltiples respuestas correctas

El estado del ejercicio se persiste en localStorage con clave exercise-<id>.

<Exercise
  id="m1-e1"
  color="purple"
  title="¿Qué es un named export?"
  description="Selecciona la opción correcta."
  type="multiple"
  options={[{ id: 'a', text: 'Respuesta A' }, ...]}
  correct={['a']}
  hint="Pista opcional."
  explanation="Explicación que aparece después de responder."
/>

HomeworkCard

Tarjeta de tarea con lista de ítems checkeables, barra de progreso y recursos de apoyo. El estado se persiste en localStorage con clave homework-m<moduleId>.

CodeBlock

Bloque de código con soporte para múltiples archivos (tabs), lenguaje configurable y botón de copia.

💾 Persistencia

El progreso del usuario se guarda en localStorage:

Clave	Contenido
u3-completed-modules	Array JSON de IDs de módulos completados
u3-total-xp	XP total acumulado (número)
exercise-<id>	Estado de cada ejercicio (selección + enviado)
homework-m<n>	Estado de cada checklist de tarea

Se puede reiniciar completamente desde el botón "Resetear progreso" en la pantalla de finalización.

🤖 Módulo 6 — Demo de IA (Groq)

El módulo 6 incluye un demo funcional que llama directamente a la API de Groq desde el navegador usando el modelo llama-3.3-70b-versatile. Para usarlo:

1. Obtener una API key gratuita en console.groq.com/keys
2. Pegarla en el campo de la demo (la key nunca se almacena ni se envía a ningún servidor propio)

Nota: En producción, las llamadas a APIs de LLM deben pasar por un backend propio para proteger la API key. Este demo es exclusivamente educativo.

📄 Licencia

MIT