👋 Bienvenido a Integración Fullstack con React
Llevas dos cursos. En uno construiste un backend con Express y MongoDB. En otro armaste un frontend con React y Vite. Cada uno funcionaba por su lado, pero los dos vivían en mundos separados.
Este curso es donde se encuentran.
Vas a tomar todo lo que ya sabes y vas a integrarlo construyendo eshop.com — una tienda online mexicana que vende celulares, smartwatches y audífonos premium. Es un producto pequeño, pero real: tiene catálogo, login, carrito, checkout, deploy y monitoreo. Lo mismo que cualquier startup en su primer año.
No vas a ser el único en el equipo. Mariana es la Product Owner — te explica el "por qué" de cada feature en historias de usuario. Diego es tu tech lead — te hace code review, te suelta tips de producción y te enseña a leer errores. Renata es la diseñadora UX — pasa los Figmas y te marca los estados de loading y error que el frontend tiene que respetar. Tú eres el dev fullstack junior que se acaba de sumar al equipo.
Cada sprint es un ticket real del board.
Lo que vas a construir
A lo largo de 14 semanas vas a pasar por el ciclo completo de una feature en producción:
- Conectar un frontend al API y manejar estados de carga, éxito y error.
- Implementar autenticación con JWT y rutas privadas.
- Construir formularios controlados con validación y un carrito persistente.
- Escribir tests con Vitest y React Testing Library para no romper nada en el camino.
- Migrar a MongoDB Atlas y separar entornos con variables de entorno.
- Hacer deploy en Render y refactorizar la lógica repetida en custom hooks.
- Agregar logs y manejo de errores para tu primer postmortem real.
No te quedas en el "funciona en mi compu" — terminas con la aplicación corriendo en Render, contra MongoDB Atlas, con pruebas automatizadas y un README profesional que vas a defender en una evaluación técnica externa.
Estructura — 7 sprints, 14 semanas
| Sprint | Semanas | Foco |
|---|---|---|
| Sprint 1 | 1–2 | Arquitectura Full Stack y consumo de APIs (React ↔ Express ↔ MongoDB) |
| Sprint 2 | 3–4 | Autenticación con JWT, rutas protegidas y estado global con Context API |
| Sprint 3 | 5–6 | Formularios avanzados y flujo de checkout con validaciones síncronas y asíncronas |
| Sprint 4 | 7–8 | Pruebas en React y Vibe Coding: testear componentes, simular eventos y mockear la API con IA |
| Sprint 5 | 9–10 | Preparación productiva y MongoDB Atlas — variables de entorno y la "app camaleón" |
| Sprint 6 | 11–12 | Despliegue Full Stack en Render + hardening de seguridad post-deploy |
| Sprint 7 | 13–14 | Supervivencia en producción, simulacros de incendio y cierre técnico (README + evaluación) |
El mapa narrativo: 7 sprints
Cada sprint termina con un entregable que se evalúa como un PR contra el repo de eshop.
Sprint 1 — Conectar el frontend al API
"El catálogo en el frontend está hardcodeado. Necesito que el frontend lea del API." Mariana abre el sprint con esa frase. Aprendes fetch / axios, manejo de loading y error, y renderizado de listas reales desde el backend.
Sprint 2 — Auth y rutas privadas
"Quiero saber quién compra. Sin login no podemos cobrar." Implementas login con JWT, almacenamiento del token, rutas protegidas y la página de perfil.
Sprint 3 — Formularios y carrito
Renata pasa el Figma del checkout. Construyes formularios controlados con validación en tiempo real, contexto de carrito y el flujo completo de compra.
Sprint 4 — Testing con Vitest
"Tres veces este mes alguien rompió el cálculo del total." Aprendes Vitest, React Testing Library, tests de componentes y hooks, mocks del API. Empiezas a sentirte seguro al refactorizar.
Sprint 5 — Producción y datos reales
Migras de MongoDB local a Atlas, configuras .env por entorno y separas dev, staging y producción.
Sprint 6 — Deploy en Render + custom hooks
"Vamos a poner esto en internet." Deploy del API y del frontend, custom hooks (useFetch, useCart) y configuración de variables de entorno en producción.
Sprint 7 — Observabilidad y cierre
"Anoche se cayó el checkout 40 minutos." Logs estructurados, manejo global de errores, y tu primer postmortem con datos reales.
Hito final — Evaluación técnica externa
Al cerrar las 14 semanas presentas tu e-commerce desplegado en una evaluación técnica oficial: explicas tus decisiones de código, corres tus pruebas automatizadas en vivo y justificas la arquitectura React ↔ Render ↔ MongoDB.
Cómo está armado cada sprint
Cada sprint tiene la misma estructura — diseñada para que practiques deliberadamente, no solo para que leas:
- Lecciones conceptuales con video, metáfora, código de referencia y una Autopsia React que anticipa la trampa más común.
- Drills de repetición — 5 a 8 retos cortos por tanda, dos tandas por sprint. Práctica muscular para que el patrón se quede.
- Sesión de práctica — construcción guiada en vivo de una mini-feature integradora.
- Entregable final — un capstone en formato de PR contra el repo de eshop, con definition of done y criterios de evaluación claros.
Requisitos
- Haber cerrado el curso de Express + MongoDB o sentirte cómodo construyendo un API REST con Mongoose.
- Haber cerrado el curso de React con Vite o conocer hooks básicos (
useState,useEffect) y componentes funcionales. - Editor con buen soporte de JSX (VS Code recomendado), Node 20+ instalado, y ganas de fallar varias veces antes de que algo funcione.
¡Comencemos! 🚀