# React Practice Projects > Markdown edition of https://scrimbaguide.tech/docs/practice/practice-react-projects/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/practice/practice-react-projects/ Last updated: 2026-09-26 Scrimba's React courses come with capstone projects you build from scratch, not tutorials you copy. [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) ends in Tenzies and Assembly: Endgame, both free; [Advanced React](https://scrimbaguide.tech/docs/courses/react/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](https://scrimbaguide.tech/docs/courses/react/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](https://scrimbaguide.tech/docs/courses/react/learn-react/) (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](https://scrimbaguide.tech/docs/courses/react/a-react-project-movie-search-app/) (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](https://scrimbaguide.tech/docs/courses/react/advanced-react/) (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](https://scrimbaguide.tech/docs/courses/react/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](https://scrimbaguide.tech/docs/courses/typescript/learn-typescript/) (free, 4.2 hrs) first if your React is still untyped; its React section retypes Assembly: Endgame with `useState` 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](https://scrimbaguide.tech/docs/courses/backend/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](https://scrimbaguide.tech/docs/courses/javascript/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](https://scrimbaguide.tech/blog/portfolio-projects-get-hired-2026/). ## Choose This If Choose this guide if: You want course recommendations for hands-on practice. Most require Pro. ## Related Practice Guides - [Practice React Hooks](https://scrimbaguide.tech/docs/practice/practice-react-hooks/), master useState, useEffect - [Practice API Calls](https://scrimbaguide.tech/docs/practice/practice-api-calls/), fetch and display data in React - [Practice Tailwind CSS](https://scrimbaguide.tech/docs/practice/practice-tailwind-css/), style your React components ## Related Pages - [React Courses](https://scrimbaguide.tech/docs/courses/react/) | [All Courses](https://scrimbaguide.tech/docs/courses/) - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/), structured React learning - [Scrimba vs Codecademy](https://scrimbaguide.tech/docs/comparisons/scrimba-vs-codecademy/) | [Scrimba Review 2026](https://scrimbaguide.tech/blog/scrimba-review/) **Q: What React projects should I build for my portfolio?** 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. **Q: How many React projects do I need to get hired?** 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. **Q: Should I build from scratch or follow tutorials?** 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. **[Try Scrimba free](https://scrimba.com/?via=u42d4986)** ### Related Guides - [All Courses](https://scrimbaguide.tech/docs/courses/) - [Frontend Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)