React Practice Projects
Scrimba's React courses come with capstone projects you build from scratch, not tutorials you copy. Learn React ends in Tenzies and Assembly: Endgame, both free; Advanced React ends in VanLife, a React Router app with a mock API and protected routes. Build those first, then add the three ideas below to cover the gaps a portfolio of course capstones leaves.
Reviewed inside the courses with a Pro account, September 2026.
Who this is for
Developers who have finished a React tutorial and need repos to show.
Featured React Projects on Scrimba
Tenzies (Learn React Course)
Difficulty: Beginner-Intermediate | What you build: A dice-rolling game
Roll ten dice, hold the ones you want, keep rolling until they match. Capstone 1 in Learn React (86 min, 19 scrims): a Die component, holding dice in three parts, lazy state initialization, a ref that moves focus to the button when you win, and confetti. Free.
Assembly: Endgame (Learn React Course)
Difficulty: Intermediate | What you build: A word-guessing game
A hangman-style game where each wrong guess wipes a programming language off the board. Capstone 2 (2.2 hrs, 28 scrims): component composition, state across components, clsx for the keyboard classes, two accessibility passes. Free; the Quizzical Solo Project after it is Pro.
Start the Learn React course (Free)
Movie Search App (React Search Tutorial)
Difficulty: Intermediate | What you build: A movie database search
Query the TMDB API and render the results as cards: an async fetch in try/catch on submit, useState for the query and the list, and a MovieCard props challenge. Eight coding scrims by James Q Quick; you need a free TMDB key before scrim 6. The first four scrims are free, the rest Pro.
Start the Movie Search course (Pro)
Advanced React Projects
Difficulty: Advanced | What you build: Multiple production-quality apps
Compound components, render props, custom hooks, and performance. The big build is VanLife, 86 scrims on React Router 6 with a mock API, protected routes and a fake login, then a Supabase sales dashboard with auth and a Component Library++ solo project from Figma. Three sample scrims are free.
Start the Advanced React course (Pro)
How to Get the Most From Project-Based Learning
- Build first, watch second, try each feature yourself before the solution
- Extend the project, add features the instructor skips (dark mode, local storage, animations)
- Deploy it, on Netlify or Vercel, and link it from your portfolio
- Write about it, a short post on what you built and learned
Portfolio Checklist for React Developers
A strong React portfolio should include:
- A CRUD app (create, read, update, delete), for business logic
- An API-powered app, for external data
- A game or interactive tool, for state management
- A styled project, for design and user experience
Scrimba's React courses collectively cover all four categories.
Three portfolio project ideas beyond the course capstones
Hiring managers skim past identical to-do apps. Once you have shipped the capstones above, these three builds add the API, state, and backend complexity that junior React postings ask for. Each maps onto a Scrimba course so you never start from a blank editor.
1. Movie search with a real API
Scrimba's short Pro course Build a React Project: Movie Search App walks through this exact build with the TMDB API (the search fires on submit, so debouncing is yours to add). To make it portfolio-grade, add a debounced search input, a proper empty state for zero results, and a responsive card grid. Why it lands: a search interface is a core feature of almost every B2B product, and it proves you can work with a large external dataset.
2. Type-safe shopping cart
A cart with useReducer or Context for global state, quantity updates that recalculate totals, and strict TypeScript interfaces for products and line items. Take Learn TypeScript (free, 4.2 hrs) first if your React is still untyped; its React section retypes Assembly: Endgame with useState<string[]> and () => void function props, the same moves a typed cart needs. Why it lands: money implies careful code, and TypeScript is on most React job posts.
3. Real-time chat on Supabase or Firebase
A chat app that subscribes to a database channel in useEffect, handles login and logout, and renders new messages without a refresh. Intro to Supabase (free, 4.8 hrs) covers the Postgres, auth, and realtime pieces: the realtime subscription is one supabase.channel() inside a useEffect, and the 3.8-hour authentication section is where the time goes. Learn Firebase is the Pro alternative (four free sample scrims), a journal app with onSnapshot live updates and security rules. Why it lands: most beginner frontends are stateless, so a persistent backend connection separates you from the entry-level pile.
For non-React ideas, including AI-flavoured ones, see 5 portfolio projects that get you hired.
Choose This If
Choose this guide if: You want course recommendations for hands-on practice. Most require Pro.
Related Practice Guides
- Practice React Hooks, master useState, useEffect
- Practice API Calls, fetch and display data in React
- Practice Tailwind CSS, style your React components
Related Pages
- React Courses | All Courses
- Frontend Developer Path, structured React learning
- Scrimba vs Codecademy | Is Scrimba Worth It?
Build at least 3 projects: a CRUD app (todo list or notes app), an API-powered app (weather or movie search), and something creative (a game or interactive tool). Scrimba's Learn React course includes Tenzies and Assembly: Endgame which cover two of these categories.
Quality matters more than quantity. 3-4 well-built projects with clean code, good UX, and proper deployment are enough. Each project should demonstrate different skills.
Both. Start by following Scrimba's guided projects to learn patterns, then build your own projects from scratch to prove you can work independently. Employers value self-directed projects.
Turn React lessons into portfolio proof
Free Learn React includes capstones; Pro adds Advanced React + paths.