El eje central de JSCamp es un proyecto práctico único que crece contigo durante todo el bootcamp: DevJobs, una aplicación de búsqueda y listado de ofertas de empleo para desarrolladores. En lugar de hacer ejercicios desconectados, cada módulo incorpora nuevas tecnologías directamente sobre el mismo proyecto, de forma que al terminar tienes una aplicación full-stack real y lista para tu portafolio.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/midudev/jscamp/llms.txt
Use this file to discover all available pages before exploring further.
Evolución del Proyecto
Módulo 00 — HTML & CSS estático
El punto de partida es una página HTML semántica con estilos CSS modernos. En esta etapa construyes la estructura visual de DevJobs: el listado de tarjetas de empleo, los filtros laterales, la cabecera y la página de detalle. Todo el contenido está hardcodeado directamente en el HTML — el objetivo es dominar la maquetación antes de introducir lógica.Módulo 01 — JavaScript vanilla
Con la estructura HTML ya en pie, se le da vida con JavaScript puro. Usarás la DOM API para renderizar dinámicamente las tarjetas de empleo a partir de un array de datos endata.json, implementarás filtros interactivos (por modalidad, nivel y tecnología) y verás cómo los Web Components permiten encapsular partes reutilizables de la interfaz sin ningún framework.
Módulo 02 — React con CDN → Vite
La interfaz se migra a React. Primero se introduce React mediante CDN para entender los conceptos básicos de componentes y props; después el proyecto se moderniza con Vite como bundler, obteniendo hot module replacement, imports de ES modules y una DX (developer experience) de nivel profesional. El resultado es la misma app de empleos, ahora compuesta de componentes React reutilizables.Módulo 03 — Estado Global y React Router
Con la base de componentes establecida, se añade navegación real con React Router (rutas para el listado, el detalle y el login) y gestión de estado global con Zustand para manejar los filtros activos y la sesión de usuario. En este módulo también se implementa un flujo básico de autenticación en el frontend.Módulo 04 — Node.js
Es el momento de crear el backend. Se construye una API REST con Express que expone los datos de empleos (/api/jobs) y los sirve al frontend React. El listado de ofertas ya no vive en un archivo local del cliente, sino que se obtiene mediante fetch desde el servidor Node.js.
Módulo 05 — TypeScript
Se aplica TypeScript de forma progresiva, comenzando por la API Express. Los modelos de datos (Job, Filter, User), los handlers de rutas y las respuestas HTTP se tipan completamente, eliminando una categoría entera de bugs en tiempo de compilación. La base de datos SQLite también se integra en este módulo con tipos seguros.Módulo 06 — Integración de IA
Se integra un chat de IA directamente en la aplicación DevJobs. El usuario puede hacer preguntas sobre las ofertas de empleo o pedir recomendaciones, y la respuesta se genera usando modelos de IA desde el ecosistema JavaScript. Este módulo muestra cómo añadir capacidades de IA a una app web existente de forma práctica.Módulo 07 — SQL
La capa de datos evoluciona hacia una base de datos SQLite real con migraciones versionadas. Se reemplaza el archivo JSON estático por tablas SQL, se escriben consultas con JOINs y filtros dinámicos, y se implementa un sistema de migraciones para gestionar los cambios de esquema de forma controlada.Módulo 08 — CI/CD con GitHub Actions
Se configura un pipeline de integración y despliegue continuo usando GitHub Actions. El workflow ejecuta el linter, los tests y el build de producción en cada pull request, garantizando que ningún cambio roto llegue a la rama principal. Se añaden badges de estado al repositorio.Módulo 09 — Docker
En el módulo final, toda la aplicación se conteneriza con Docker. Se creanDockerfile independientes para el frontend (React/Vite) y el backend (Node.js/Express), y se orquestan con docker-compose para levantar todo el stack con un solo comando. Este módulo cierra el ciclo completo del desarrollo al despliegue.
Estructura de Datos
Todas las ofertas de empleo del proyecto siguen la misma forma de datos. A continuación se muestra la estructura real utilizada en el proyecto (extraída de04-express/jobs.json):
| Campo | Tipo | Descripción |
|---|---|---|
id | string (UUID) | Identificador único de la oferta |
titulo | string | Nombre del puesto de trabajo |
empresa | string | Nombre de la empresa que oferta |
ubicacion | string | Ciudad o modalidad de trabajo |
descripcion | string | Resumen breve de la oferta (para tarjetas) |
data.technology | string[] | Tecnologías requeridas (usadas para filtrar) |
data.modalidad | string | Modalidad: remoto, barcelona, cdmx, etc. |
data.nivel | string | Nivel requerido: junior, mid-level, senior |
content | object | Descripción larga, responsabilidades y requisitos |
01-javascript) se usa una versión simplificada del objeto sin la clave content. A partir del módulo 04 con Node.js y Express, y definitivamente desde el módulo 07 con SQL, se trabaja con la estructura completa almacenada en base de datos.