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.
- 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ó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 |
| 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 |
- Node.js 18+
- npm o bun
# Clonar el repositorio
git clone <repo-url>cd interactive-guide
# Instalar dependencias
npm install
# o con bun:
bun installnpm run devLa app estará disponible en http://localhost:5173.
npm run build # Compila TypeScript y genera el bundle
npm run preview # Sirve el build localmente para verificarinteractive-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
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>.
<Exerciseid="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."/>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>.
Bloque de código con soporte para múltiples archivos (tabs), lenguaje configurable y botón de copia.
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.
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:
- Obtener una API key gratuita en console.groq.com/keys
- 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.
MIT