25+ React JS Projects to Build in 2026 (Beginner–Advanced)

Most "react project ideas" lists are the same fifteen names repeated across a hundred different pages — todo app, weather app, calculator, done. They're not wrong, exactly. They're just useless on their own, because a project name tells you nothing about what you're supposed to actually learn from building it, or what part of it is going to be harder than it looks.

This list is organized by skill level, and every project below comes with the specific concept it's meant to teach — not just a name and a stock screenshot. A few of them link directly to a coding-challenge version with hidden tests, if you'd rather get objective pass/fail feedback instead of just eyeballing your own output.

How to use this list

Don't start at the top of the beginner section and build all eight in a row. Pick one project per concept you actually want to strengthen, build it until it handles the edge cases (not just the happy path), and move on. Building the same concept five different ways in five different apps teaches you less than building it once and actually breaking it.

Beginner react projects

The goal at this stage is one clean concept per project — state, props, and basic rendering, without async data or complex composition getting in the way.

1. Counter with increment, decrement, and reset

The smallest possible useState project, and still worth building properly — most people get the increment/decrement right and then handle reset carelessly, letting it drift out of sync with the actual displayed value.

2. Todo list with add, complete, and delete

This is where array-state bugs actually show up — mutating an array in place instead of creating a new one is the single most common mistake in a beginner's first todo app, and it silently breaks re-renders instead of throwing an error.

3. Accordion — only one section open at a time

Looks like a styling exercise, is actually a state-design exercise: do you track "which section is open" as one piece of state, or an open/closed boolean per section? The first is simpler and enforces the "only one open" rule for free.

4. Controlled signup or login form

Build it with every field as its own useState first, then rebuild the same form with one object-shaped state and a single change handler. You'll feel exactly why most real forms use the second approach once you have more than three fields.

5. Theme toggle (light/dark) using Context

Your first real use of useContext — the point isn't the dark mode itself, it's practicing reading a value from a Provider higher up the tree without threading it through props.

6. Conditional UI panel (show/hide based on state)

A notification banner, an alert, or an empty state that appears and disappears based on a condition. The trap here is reaching for useEffect to control visibility when deriving it directly from state during render is simpler and correct.

Want objective pass/fail feedback instead of eyeballing it yourself? These four beginner ideas map directly to real coding challenges with hidden tests. Try the beginner problem set on ReactGrind →

Intermediate react project ideas

This tier introduces the two things beginner projects mostly avoid: state that has real rules attached to it, and data that comes from somewhere else.

7. Shopping cart with quantity and totals

The step up from a todo list — updating a quantity has to recalculate a total, removing an item has to update the total too, and if you built it with several loose useState calls, this is usually the project where useReducer starts to make sense instead of feeling like overkill.

8. Multi-step form / wizard

A signup flow split across three or four steps, with validation gating whether "Next" is enabled. The real difficulty isn't any single step — it's deciding where the combined state for all steps should live so the final submission has everything it needs.

9. Photo or product gallery with a live API

First project on this list involving real async data. Handle the three states honestly: loading, error, and success — most beginner-to-intermediate projects only ever demo the success state and fall over the first time the network is slow or the request fails.

10. Debounced search box

Type into an input, wait, then fire a search — without firing a request on every keystroke. This project is small enough to finish in an hour and exposes a real useEffect cleanup bug almost every time it's attempted without one.

11. Tabs built as compound components

Instead of one Tabs component with a big prop list, build `<Tabs>`, `<Tabs.List>`, and `<Tabs.Panel>` that communicate through context internally. It's the first project on this list that's really about component API design, not just state.

12. Multi-file product listing app

Split a single "product list" feature across several component files intentionally — a card, a list, a filter bar — and practice passing data cleanly between them instead of building everything as one large component out of convenience.

The shopping cart, wizard, and product-list ideas above have direct coding-challenge equivalents with hidden tests. See the intermediate challenge set →

Advanced react projects

These are the projects worth putting in an actual portfolio — each one forces a real tradeoff decision, not just "more features."

13. Realtime kanban board with drag-and-drop

The hard part was never rendering columns and cards — it's keeping drag state, optimistic reordering, and the eventual server confirmation in sync without the UI flickering back to its old position while a request is in flight.

14. Virtualized table for large datasets

Render a table with ten thousand rows smoothly by only rendering what's visible in the viewport, plus a small buffer. This is the project where you learn that memoization alone won't save you — the fix is rendering fewer DOM nodes, not rendering the same number more efficiently.

15. Typeahead search with request cancellation

A step past the debounced search box above: type fast enough and older, slower requests can resolve after newer ones, silently overwriting fresh results with stale ones. Handling that race condition correctly is the entire point of this project.

16. Nested, collapsible comment thread

Comments that reply to comments, arbitrarily deep. The rendering is recursive, and the harder problem is usually updating or deleting a single deeply nested comment without rebuilding the entire tree from scratch.

17. Calendar grid with events

Deceptively fiddly date math — months with five weeks versus six, events spanning midnight, time zones — wrapped around a grid layout that looks simple until you're actually maintaining it.

18. Data fetching layer with an in-memory cache

Build a small custom hook that fetches data and caches it by key, so navigating away and back doesn't refetch data you already have. This is the project that makes libraries like React Query click, because you've felt the problem they solve firsthand.

// A minimal shape for the cached-fetch idea above
function useFetchCache<T>(key: string, fetcher: () => Promise<T>) {
  const cache = useRef(new Map<string, T>());
  const [data, setData] = useState<T | null>(cache.current.get(key) ?? null);

  useEffect(() => {
    if (cache.current.has(key)) return; // already cached, skip the request
    let active = true;
    fetcher().then((result) => {
      if (!active) return;
      cache.current.set(key, result);
      setData(result);
    });
    return () => {
      active = false; // avoid setting state after unmount
    };
  }, [key]);

  return data;
}

All six advanced ideas above have a matching hidden-test challenge if you want to confirm your solution actually holds up. Try the advanced problem set →

A few full-app project ideas, if you want something bigger

Everything above is a focused, single-concept build. If you want something closer to a real portfolio piece, these combine several of the concepts above into one app:

• A budgeting or expense tracker — combines controlled forms, derived totals (like the shopping cart), and local persistence
• A recipe or bookmarking app with search and filters — combines the debounced search box with fetched data and empty/error states
• A team dashboard with a kanban board and a notification panel — combines drag-and-drop state with conditional UI
• A blog or docs site with nested comments and a dark/light theme — combines the nested comment tree with Context

Each of these is really three or four of the focused projects above, glued together with real navigation between them. That's a deliberate suggestion — building the focused version of each piece first, then combining them, produces a cleaner result than trying to build the full app from scratch on day one.

How to actually pick one instead of scrolling forever

If you're stuck choosing, don't optimize for what sounds impressive. Pick based on the concept you're currently weakest on:

• Shaky on state fundamentals → todo list, then shopping cart
• Comfortable with state, shaky on effects → debounced search, then typeahead with cancellation
• Comfortable with hooks, never built anything with real async data → photo gallery, then the fetch-cache hook
• Ready for something interview-worthy → kanban board or virtualized table

"A finished small project teaches more than an abandoned ambitious one."

The single biggest failure mode with project-based learning isn't picking the wrong project — it's starting an ambitious one, hitting a hard edge case three days in, and quietly abandoning it for a new idea instead of pushing through. If a project stalls, it's almost always more useful to shrink its scope and finish it than to abandon it for something new.

If you'd rather practice with instant feedback

Open-ended projects are great for portfolios, but they don't tell you objectively whether your code actually works — that requires either a very disciplined self-review or a real test suite checking your work. If you want the second option for any of the ideas above, several map directly to challenges with hidden tests that check behavior, not just output.

Ready to build with real tests checking your work? Browse all React coding challenges →

And if you're building these projects specifically to get ready for interviews rather than a portfolio, it's worth knowing what's actually being evaluated at the level you're targeting.

See what junior vs. senior React interviews actually test. Read the React interview prep guides →