Where to Go Next

Eighteen lessons ago you had an empty folder. Now you have a deployed app built from small components, with state that lives in one place, derived values that can’t drift, a form with real validation, an Effect that persists data and cleans up after itself, a stylesheet you didn’t have to write by hand, and a URL. More importantly, you know why each of those decisions was made, which is what lets you make them again in a different app.

What you can do now

Look back at the six promises on the course page and check each one against something you built:

• Components, props and state: every part of the Watchlist, from MovieItem to App.
• A React 19 and Vite workflow: npm create vite@latest, the dev server, npm run build.
• Events, forms and controlled inputs: the add-movie form, with trimming, disabling and clearing.
• Effects the right way: the tab title and localStorage, and all the places you didn’t use one.
• Composing screens from small pieces: Panel, MovieList and the rest, each with a few props and a clear job.
• Shipping to production: a Vercel deployment with preview URLs for every branch.

Make the Watchlist yours

The fastest way to make this stick is to keep building the same app, without a tutorial. Each of these uses only what you’ve learned:

1. Sort: a select for “Newest first” and “Title A–Z”. One new piece of state, one derived list.
2. Edit a title: double-click a title to turn it into an input; Enter saves, Escape cancels.
3. Search: a text field that filters by title as you type, combined with the status filter.
4. Undo remove: keep the last removed movie and show an “Undo” button for a few seconds. You’ll need a timer in an Effect, with cleanup.
5. Keyboard shortcut: press “/” to focus the add field, with a window listener in an Effect and a ref.

Push each feature on its own branch and check its preview URL before merging, exactly like a team would.

What to learn next

An order that builds on this course:

1. TypeScript. Typing props and state catches a whole class of bugs before you run anything, and most React job listings expect it. Start a project with --template react-ts, or convert the Watchlist file by file. The Advanced TypeScript Patterns course goes much further once you’re comfortable.
2. Testing. Vitest with React Testing Library lets you render a component, click it like a user and assert on the result. Your small components are already easy to test. See Testing JavaScript Apps.
3. More Hooks. useRef for DOM access and values that don’t trigger renders, useReducer when update logic grows, and useContext for data many components need. The React Compiler, an optional build step, handles most memoization, so learn useMemo and memo but don’t sprinkle them everywhere.
4. Data fetching. Real apps load data from servers. Fetching in an Effect works for simple cases if you handle race conditions; for anything more, use TanStack Query, which handles caching, loading and error states for you.
5. Routing and frameworks. For several pages, add React Router. For server rendering, data loading and React Server Components, use a framework such as Next.js or React Router’s framework mode, as the React docs recommend for new full-scale apps.

You came here to build interactive UIs with React. You’ve built one and shipped it. Keep building.