A lesson teaches one thing.
A build uses all of them.
Six projects, one for each course. Every project is made in five steps, each one checked, and each step starts from the code you left in the step before — so what you finish with is one thing you built, not five exercises.
A product page, marked up properly
One page, written as a document rather than a pile of divs: landmarks, a real table, a form anyone can fill in, and the metadata that decides how it is shared.
Style it, from tokens to motion
Take the same page and give it a design system: tokens, a layout that holds at any width, a component with variants, dark mode, and motion that has a reason.
A catalogue that filters, sorts and remembers
The page becomes an application: render from data, filter and sort as the user types, validate a form, keep the state in the URL and the browser, and handle every failure.
The same catalogue, in React
Rebuild it with components and state: props down, events up, a custom hook for the logic, a form that reports its errors, and a list that does not rebuild itself for nothing.
The API behind it
A REST API with the parts that are usually skipped: validation, the right status codes, one error shape, a session, and a health check that tells the truth.
Put it together and ship it
The whole thing as one Next.js application: routes from folders, server components that fetch, a server action that writes, metadata that shares well, and a build you could deploy.