Skip to content
Use casesReact projects

Master React with real-world projects

Transform your React knowledge into job-ready skills through hands-on projects. Build modern React applications with professional designs, practice hooks and state management, and get feedback from the Frontend Mentor community.

Start building free

Join 1,100,898 developers building projects, reviewing code, and helping each other improve.

Testimonials

"I highly recommend Frontend Mentor. Skip the search for project ideas and dive into ready-made challenges that help you level up as a developer."

Kevin PowellWeb Developer & YouTuber

"Frontend Mentor is a win-win. You can sharpen your skills building websites and add finished projects to your portfolio to help land a job!"

Jessica ChanWeb Developer & YouTuber

Learn React by building, not just watching

Frontend Mentor provides realistic project briefs that allow you to practice React on real-world UI challenges. Build anything from simple components using hooks to full-stack applications with routing and state management. Compare your solutions, get community feedback, and ship portfolio-ready React projects that demonstrate your skills to potential employers.

How to start building React projects

  1. Pick a project below that matches your current skill level.

  2. Build it from scratch—don’t just copy-paste code. Make it your own.

  3. Push to GitHub and share your work.

  4. Iterate: Add features, refactor your code, try different approaches.

  5. Want feedback? Submit your project for community review on Frontend Mentor.

Beginner React projects

Start with simple React components to learn the fundamentals of JSX, props, and the useState hook. These projects help you understand component architecture and basic React patterns while building interactive UIs. Perfect for developers transitioning from vanilla JavaScript or starting their React journey.

  • Free

    Results summary component

    • HTML
    • CSS
    1newbie

    This challenge has something for everyone. It’s a HTML and CSS only project, but we’ve also provided a JSON file of the test results for anyone wanting to practice JS.

  • Free

    Social links profile

    • HTML
    • CSS
    1newbie

    In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!

  • Free

    FAQ accordion

    • HTML
    • CSS
    • JS
    1newbie

    In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!

  • Free

    Interactive rating component

    • HTML
    • CSS
    • JS
    1newbie

    This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

  • Free

    Expenses chart component

    • HTML
    • CSS
    • JS
    2junior

    In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.

Intermediate React projects

Level up with useEffect, custom hooks, API integration, and form handling in React. These projects demonstrate your ability to manage side effects, work with external data, and build fully functional React applications with proper state management and an understanding of the component lifecycle.

  • Free

    Advice generator app

    • HTML
    • CSS
    • JS
    • API
    2junior

    The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.

  • Free

    Newsletter sign-up form with success message

    • HTML
    • CSS
    • JS
    2junior

    This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.

  • Free

    Time tracking dashboard

    • HTML
    • CSS
    • JS
    2junior

    A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

  • Free

    Tip calculator app

    • HTML
    • CSS
    • JS
    2junior

    This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!

  • Free

    Mortgage repayment calculator

    • HTML
    • CSS
    • JS
    2junior

    This mortgage calculator is an excellent project for practicing working with forms, client-side validation, and updating the DOM. Remember to focus on accessibility, too!

  • Premium

    GitHub user search app

    • HTML
    • CSS
    • JS
    • API
    2junior

    In this project, you'll use the GitHub users API to pull profile data and display it. It's a great challenge if you're looking to practice working with a 3rd-party API.

  • Free

    Product list with cart

    • HTML
    • CSS
    • JS
    2junior

    Practice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.

  • Free

    Contact form

    • HTML
    • CSS
    • JS
    2junior

    Building accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.

  • Free

    Conference ticket generator

    • HTML
    • CSS
    • JS
    2junior

    In this challenge, you'll create a form that generates a ticket. There's a lot of scope for customizing the generated ticket and putting your own stamp on the project.

  • Premium

    Character counter

    • HTML
    • CSS
    • JS
    2junior

    This project will test a range of your skills, especially your JavaScript, with the counters and letter density graph. The theme switcher is another little challenge.

  • Free

    Weather app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    Build a responsive weather app with search functionality, unit conversion, and detailed forecasts using the Open-Meteo API.

  • Premium

    Password generator app

    • HTML
    • CSS
    • JS
    3intermediate

    This app will be an excellent test of your HTML, CSS, and JS skills. You'll build custom form controls and use JavaScript to generate random passwords.

  • Free

    Interactive comments section

    • HTML
    • CSS
    • JS
    3intermediate

    This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!

  • Free

    Calculator app

    • HTML
    • CSS
    • JS
    3intermediate

    This calculator app will be a great test of your CSS and JS skills especially. If you're wanting to practice using Grid, this challenge will be perfect for you!

  • Free

    Todo app

    • HTML
    • CSS
    • JS
    3intermediate

    The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

Advanced React projects

Challenge yourself with complex state management, React Router, context API, and performance optimization. These projects showcase advanced React patterns, including compound components, render props, higher-order components, and building scalable application architecture that impresses employers.

  • Free

    REST Countries API with color theme switcher

    • HTML
    • CSS
    • JS
    • API
    4advanced

    If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.

  • Premium

    Personal blog

    • HTML
    • CSS
    • JS
    3intermediate

    This multi-page personal blog project has a JSON file to practice working with dynamic data. You can even use a headless CMS to take the difficulty up a notch!

  • Premium

    Frontend Quiz app

    • HTML
    • CSS
    • JS
    3intermediate

    This app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!

  • Premium

    Devjobs web app

    • HTML
    • CSS
    • JS
    4advanced

    Build a jobs board that pulls data from a local JSON file. This is a great opportunity to practice JS and get to grips with a framework/library of your choice!

  • Free

    Multi-step form

    • HTML
    • CSS
    • JS
    4advanced

    An excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.

  • Premium

    Bookmark manager app

    • HTML
    • CSS
    • JS
    4advanced

    Build a fully-functional bookmark manager with add, edit, archive, search, and filter features. Perfect for practicing forms and state management.

  • Premium

    Mood tracking app

    • HTML
    • CSS
    • JS
    4advanced

    Building this app will be a fun way to test a range of your skills. From working with JSON data to logging and charting mood entries, there's a lot to get stuck into!

  • Premium

    Pomodoro app

    • HTML
    • CSS
    • JS
    4advanced

    This Pomodoro app will provide some tricky challenges, including building a circular progress bar. You'll also build a range of customizations, like colors and fonts.

  • Premium

    Entertainment web app

    • HTML
    • CSS
    • JS
    4advanced

    This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.

  • Free

    Rock, Paper, Scissors game

    • HTML
    • CSS
    • JS
    4advanced

    This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.

  • Premium

    Hangman game

    • HTML
    • CSS
    • JS
    4advanced

    This project is a great all-around test. You'll need good HTML to ensure accessible navigation. There are many tricky CSS details, and the game logic will test your JS.

  • Premium

    Connect Four game

    • HTML
    • CSS
    • JS
    4advanced

    Your JS knowledge will be challenged in this fun project, where you'll build a two-player game. You'll write the logic for the game and how to test for win conditions.

  • Premium

    Memory game

    • HTML
    • CSS
    • JS
    4advanced

    This project will be an excellent test for your HTML, CSS, and JS skills! You'll be building a fun memory game where players try to match pairs.

  • Premium

    Note-taking web app

    • HTML
    • CSS
    • JS
    4advanced

    This project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!

  • Premium

    Link-sharing app

    • HTML
    • CSS
    • JS
    5guru

    In this project, you'll build a fully-functional link-sharing app for developers! You'll practice working with image uploads, repeater fields, drag-and-drop, and more!

  • Premium

    Product feedback app

    • HTML
    • CSS
    • JS
    5guru

    This will be a perfect portfolio piece! You'll be working with JSON, managing state, and building like a real-world app. You can even create it as a full-stack project!

  • Premium

    Audiophile e-commerce website

    • HTML
    • CSS
    • JS
    5guru

    This huge e-commerce challenge will provide an incredible test for your front-end skills. Once you're done, you'll have an amazing project to add to your portfolio!

  • Premium

    Invoice app

    • HTML
    • CSS
    • JS
    5guru

    This invoicing app project will test you on many levels. You'll be working with JSON data, managing state, plus a lot more. You can even build it out as a full-stack app!

  • Premium

    Personal finance app

    • HTML
    • CSS
    • JS
    5guru

    This app contains 5 pages (Overview, Transactions, Budgets, Pots, and Recurring Bills) and includes a lot of tricky elements. You can also build it as a full-stack app!

  • Premium

    Kanban task management web app

    • HTML
    • CSS
    • JS
    5guru

    In this project, you'll build a fully-functional task management app with a light/dark mode toggle. We provide a JSON file, so you can practice working with JSON data.

Why Frontend Mentor for React projects?

We're not just another tutorial site. Our approach is proven to help developers build real skills that translate directly to job requirements.

  • Professional designs included

    Skip the design phase and focus on coding. Every project comes with Figma files and style guides from professional designers.

  • Code reviews & feedback

    Get constructive feedback from our community of 1,000,000+ developers. Learn best practices and improve your code quality.

  • Portfolio-ready projects

    Every completed project can be added to your portfolio with live demos and GitHub repos that impress recruiters.

Frequently Asked Questions

  • What React projects should beginners start with?

    Begin with single-component projects that focus on props and useState. Build interactive UI elements like accordions, tabs, or rating components that teach fundamental React concepts without overwhelming complexity. Avoid projects requiring routing, global state management, or advanced hooks initially. Each project should introduce 1-2 new React concepts while reinforcing JSX and component thinking. Progress to useEffect and API calls only after mastering basic state and props.

  • Should I learn vanilla JavaScript before React?

    Yes, absolutely. React is a JavaScript library, not a separate language. You need solid JavaScript fundamentals—ES6+ features, array methods, destructuring, async/await, and promises—before React makes sense. Without this foundation, you'll struggle with concepts like closures in hooks or why props are immutable. Build 5-7 vanilla JavaScript projects first. This foundation ensures you understand what React abstracts away and helps you debug issues that stem from JavaScript, not React itself.

  • How many React projects do I need for my portfolio?

    Quality over quantity: 3-5 well-built React projects outperform 10 basic ones. Hiring managers look for diversity in your portfolio—show different React features and patterns. Include one project demonstrating component composition and hooks, another showcasing routing and API integration, and a complex one with advanced state management. Each should have clean code, proper error handling, loading states, and responsive design. Deploy all projects and include thoughtful READMEs that explain your architectural decisions and the challenges you've solved.

  • What makes a React project portfolio-worthy?

    Portfolio-worthy React projects demonstrate production-ready thinking, not just the completion of tutorials. They feature proper component architecture with single responsibility, custom hooks for reusable logic, and appropriate state management choices. Error boundaries handle failures gracefully. Loading and empty states provide an excellent user experience. Code is organized logically with a clear file structure. PropTypes or TypeScript add type safety. Performance optimizations, such as memoization or lazy loading, demonstrate an advanced understanding. Deploy with proper CI/CD. Most importantly, projects should solve real problems with professional UI design—this is where Frontend Mentor projects excel.

  • Should I use React hooks or class components?

    Use hooks exclusively. Class components are legacy code. The React team recommends hooks for all new projects, and employers expect modern React knowledge. Hooks simplify code, reduce boilerplate, and make logic reuse easier through custom hooks. Every React tutorial, library, and best practice documentation focuses on functional components with hooks. Learning class components first can create bad habits and waste time on outdated patterns. Start with useState and useEffect, then progress to useContext, useReducer, and custom hooks.

  • Do I need to learn Redux for React projects?

    Not initially. Modern React's built-in tools—useState, useReducer, and Context API—handle state management for most applications. Learn these thoroughly first. Redux adds complexity that beginners don't need and can obscure React fundamentals. Build 5-10 React projects using only built-in hooks. Once you reach limitations with prop drilling or complex state management, consider exploring Redux Toolkit or Zustand. Many production apps never need Redux. Employers value developers who choose appropriate tools rather than defaulting to the heaviest solution.

Join 1,100,898 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in

Related pages

JavaScript projects

Learn JavaScript by building real projects. From beginner-friendly mini projects and API work all the way up to fully-functional multi-page web apps.

API integration projects

Connect to real APIs and build portfolio-ready apps. Practice fetch, JSON handling, and error states with beginner-to-advanced challenges.