Sprint 1 — Conectar el frontend al API
El catálogo de eshop.com en pantalla: de datos hardcodeados a productos reales desde MongoDB.
Módulo 1: De frontend aislado a app fullstack
Arquitectura cliente-servidor-base de datos: las tres capas de eshop.com y por qué cada pieza existe donde existe.
Módulo 2: Consumiendo una API REST con fetch, axios y useEffect
Configura un cliente HTTP centralizado, estructura la capa de servicios y aprende el patrón correcto de useEffect para peticiones asíncronas.
Módulo 3: Estados de carga, error y empty
El patrón canónico para manejar los tres estados de cualquier petición HTTP en eshop.com: loading, error y sin datos.
Clase Semana 1 — Listado de productos con datos reales
Live coding: reemplazar el array hardcodeado de eshop por datos reales del API, con apiClient, productService y los tres estados de carga.
Clase Semana 2 — Vista de detalle de producto
React Router, useParams y manejo diferenciado de 404 vs 5xx: construye la vista de detalle de producto de eshop.com.
Drills Sprint 1 — Tanda 1
Practica deliberada: construye un cliente HTTP centralizado, una capa de servicios y el patrón loading/error/success para consumir el API del catálogo de eshop.com.
Drills Sprint 1 — Tanda 2
Practica React Router y manejo de errores diferenciado: lee parámetros de URL con useParams, arma rutas dinámicas y distingue un 404 de un 500 en la vista de detalle de producto.
Sesión de Práctica Sprint 1: Catálogo + Detalle en vivo
Video en vivo, con errores incluidos, de cómo se conecta el flujo completo listado → clic → detalle: cliente HTTP, capa de servicios, React Router y los tres estados de carga.
Entregable Sprint 1: Capstone de catálogo navegable
Abre un PR contra el repo eshop.com: integra el cliente HTTP, lista de productos y vista de detalle en una sola feature completamente funcional.