30 niveles progresivos
Desde Hello World hasta deploy en Vercel: JSX, componentes, props, useState, useEffect, React Router, Context, tests con Vitest y CI con GitHub Actions.
Volver a proyectos
2025 - Proyecto formativo
Curso interactivo de React
Aprende React construyendo un portfolio
Curso interactivo de React para principiantes: 30 niveles que guían la creación de un portfolio real, con corrección automática en local y progreso sincronizado en la nube.
Por qué este curso
Quería una forma de aprender React que fuera práctica, paso a paso y con feedback inmediato — no tutoriales pasivos ni copiar código sin entender. Diseñé un recorrido gamificado integrado en este portfolio: cada nivel explica conceptos (JSX, componentes, props, estado, hooks, routing…) mientras construyes tu propio sitio con Vite y Tailwind.
Cómo funciona
Descargas una plantilla, ejecutas npm run dev y npm run check. Playwright valida cada paso en tu código; solo avanzas de uno en uno. La web del curso muestra conceptos React, instrucciones claras y un mapa de niveles. Al completar los 30 obtienes un diploma con tu nombre.
Características
Corrección automática
Playwright comprueba tu código en local. Un paso = un avance; no se marcan varios a la vez aunque el código ya los cumpla.
Conceptos explicados
Cada paso incluye una explicación del concepto React antes de la acción práctica — no hace falta pulsar «ver pista» para entender qué estás haciendo.
Portfolio real al final
El resultado es un portfolio desplegable con navbar, proyectos, contacto, tema claro/oscuro y panel admin.
Stack tecnológico
Frontend del curso + infraestructura del portfolio.
- React 19UI del alumno · Vite
- Tailwind CSSEstilos utility-first
- PlaywrightValidación automática local
- Next.jsPlataforma del curso
- SupabaseProgreso y diplomas
Mi rol
Diseño pedagógico, contenido de 30 niveles, motor de verificación, UI del mapa de niveles e integración en el portfolio.