30 progressive levels
From Hello World to Vercel deploy: JSX, components, props, useState, useEffect, React Router, Context, Vitest tests and GitHub Actions CI.
Back to projects
2025 - Educational project
Interactive React Course
Learn React by building a portfolio
Interactive React course for beginners: 30 levels guiding you to build a real portfolio, with local auto-checks and cloud progress.
Why this course
I wanted a practical, step-by-step way to learn React with immediate feedback — not passive tutorials or copy-paste without understanding. I designed a gamified path inside this portfolio: each level explains concepts (JSX, components, props, state, hooks, routing…) while you build your site with Vite and Tailwind.
How it works
Download a template, run npm run dev and npm run check. Playwright validates each step in your code; you advance one at a time. The course web shows React concepts, clear instructions and a level map. Complete all 30 for a diploma with your name.
Features
Automatic checking
Playwright verifies your code locally. One step = one advance; no batch completion even if code already satisfies later steps.
Concepts explained
Each step includes a React concept explanation before the practical action — no need to hunt for hints.
Real portfolio outcome
End result is a deployable portfolio with navbar, projects, contact, theme toggle and admin panel.
Tech stack
Student frontend + portfolio platform.
- React 19Student UI · Vite
- Tailwind CSSUtility-first styling
- PlaywrightLocal auto-validation
- Next.jsCourse platform
- SupabaseProgress & diplomas
My role
Pedagogical design, 30 levels of content, verification engine, level map UI and portfolio integration.