React project ideas: 12 builds that each teach one concept

What makes a good React project?

A good React project makes you decide where state lives. That decision is most of React. A to-do list does not force it, because everything fits in one component. A multi-step form does, because three components need the same data. Pick projects where the answer to “who owns this value?” is not obvious on day one.

The official guide Thinking in React gives a five-step method: break the interface into components, build a static version, find the minimal state, decide where it lives, and add the data flow back. Use it on every project below. The first prompt in each entry follows the same order.

App name:
Who uses it (one sentence):
Screens (list each):
Components I expect (a rough tree):
State, and which component owns each piece:
Data that comes from outside (API, URL, storage):
States every screen needs: loading, empty, error
I will not build in version one (three things):

Which React projects suit a beginner?

Beginner React projects have no server and no routing. They exist to make you comfortable with components, props and state, and with the one rule that confuses most people at first: do not change state in place, replace it.

Build a three-step sign-up form in React with Vite. No backend, no UI library.
Steps: 1 Account (email, password), 2 Profile (display name, country drop-down), 3 Review.
State: one object in the parent component. Each step gets its slice and an onChange.
Rules: email must contain @, password at least 10 characters, display name 2 to 32 characters. Validation lives in a separate pure function file.
Behavior: Next is disabled until the step is valid. Back keeps typed values. Submit logs the object to the console.
Do not build: routing, API calls, password strength meter.
Done when: I can fill step 1, go to 2, go back and see step 1 unchanged, and there are tests for the validation file.

Which React projects teach effects, data and forms?

Here is where apps meet the outside world: the network, the URL, storage. Most bugs in intermediate React come from effects used for things that were never side effects. Read You Might Not Need an Effect before the first project in this group and again after the last.

Build a comment thread in React with Vite. No real backend: write a fake api.js with postComment(text) that waits 800 to 1500 ms and rejects 30 percent of the time.
Behavior: submitting adds the comment to the top immediately, styled as pending. On success it becomes normal. On failure it shows "Failed to send" and a Retry button that resubmits the same text.
Use React's useOptimistic for the pending state.
Do not build: accounts, replies, editing.
Done when: I can submit 10 comments, see some fail, retry them, and no comment is ever shown twice. Add tests for success, failure and retry using React Testing Library.

Which React projects are hard in a useful way?

These four are harder because the naive version stops working, not because they need more libraries. Each starts with an obvious solution and a measurable reason it fails. Write the obvious one first, break it, then fix it.

Create a TypeScript package of four React hooks: useDebounce(value, ms), useMediaQuery(query), useOnClickOutside(ref, handler), useStoredState(key, initial) that persists JSON in Web Storage and falls back to memory if storage is unavailable.
For each: a file, a test file with Vitest and React Testing Library, and a section in README.md with a one-line example.
Rules: every listener and timer is cleaned up on unmount. No dependencies beyond React.
Do not build: SSR support, a docs site.
Done when: the tests pass, including one that unmounts during a pending debounce and asserts nothing fires afterwards.

Where do I find a React project worth building?

Pick a problem from your own week, or from the board at Post your build ideas, where people post app ideas they will never build. Browse all ideas or the productivity category, choose one that fits on two or three screens, and copy its generated build prompt into Claude Code, Cursor or Lovable. Then use the checklist above to review what comes back. Posted does not mean validated. Ask one real person whether they would use it.

React alone is rarely the whole job. When a project needs a database and sign-in, move to the full stack project ideas. For the broader mix across languages, see coding project ideas.