30 React Example Projects to Learn From (Open-source, Beginner-Advanced Level)

A CURATED list of React example projects that can be filtered and sorted by github stars, tags, difficulty level, and other features to help you find the best projects to learn from.

Latest updated on



30 results

How To Learn React With Example Projects?

Learning React.js can be done in many ways. One of the most effective ways to learn React is by learning from case studies, or example projects.

With an example project, you will figure out the principles and best practices of React.js faster. It will develop your problem solving and analytical skill that needed in the real-world project.

In this post, I'll share with you the list of React example projects to learn from, from beginner to intermediate level.

But before you jump to learn from an example project, you should know the basic React.js. At least, you should know the React syntax (JSX), states, props, components, etc.

Related Posts

Just because you clone an example project from Github, you won't really learn much from it.

Before you choose an example project, Here are some tips when learning from it.

1. Choose Only One Project at A Time

With so many open-source projects available on Github, we often feel overwhelmed with them. That's okay.

But, when you really want to learn from those projects, never do that by learning them at once. Human brains aren't designed to multi-task.

You should filter them, and choose only one project that you really want to learn. After you finished it, then you can choose the next project.

2. Replicates, But Don't Copy-Paste the Codes

With an example project, you might think that you will learn it only by reading the codes. No, you don't.

You should rewrite it on your own, and don't just copy-pasting it. It may sound trivial, but trust me you will find out more as you rewrite the codes.

3. Be Curious, Find out Why the Codes Work

In the rewriting process, you will find some codes that aren't familiar with you.

When this happened, be curious to find why those codes work. Because it will likely to increase your knowledge.

4. Experiment, and Add Your Own Flavour

After you find some unfamiliar codes, do some experiment with them. Modify them, see if it still works or not, and again, find out why.

You should also add your own codes as you learn more. Combine it with the base codes. It can be styling or adding more features.

With enough modification, you can make it as your portfolio, of course by mentioning the example project you use.

5. Have Patience and Stay Focused

Last but not least, have patience while you learn. Don't rush, and stay focused. It will takes time, but it worth it.

Good luck!

React Crud App

1. React Crud App

Github stars143 stars
❄️ A simple and beautiful CRUD application built with React.
React Weather App

2. React Weather App

Github stars82 stars
☁️ React Weather App. Uses Openweathermap.org APIs
Weather App
Public API
Visit repository
Pokemon Catcher

3. Pokemon Catcher

0
A simple web app to search and catch a pokemon using React, Redux Toolkit, and MaterialUI
You will also learn Redux, MaterialUI in this project.
BMI Calculator

4. BMI Calculator

Github stars199 stars
React Hooks app for calculating BMI
SnapShot

5. SnapShot

Github stars420 stars
SnapShot is Gallery created using React Hooks, Context API and React Router. The Routes were setup for four default pages and a search page. Also the images were displayed using the Flickr API and Axios to fetch data.
Gallery
Public API
Visit repository
React Simple Todo App

6. React Simple Todo App

Github stars252 stars
React Todo App
React Calculator

7. React Calculator

Github stars1.2k stars
Simple calculator built with React
TMDB Movie Search

8. TMDB Movie Search

Github stars944 stars
Responsive React 'The Movie Database' (TMDb) App
You will also learn Boostrap in this project.
React Trello Board

9. React Trello Board

Github stars1.6k stars
Trello like board based on React, Redux, React-dnd
You will also learn Redux, React-dnd in this project.
Project Clone
Visit repository
React Photo Feed

10. React Photo Feed

Github stars119 stars
Simple photo gallery and example app with responsive image grid, columns customizing, one-column view with description, fullscreen preview with one click. Pure CSS for that.
Gallery
Public API
Visit repository
Comuline - Indonesia Public Train Schedule

11. Comuline - Indonesia Public Train Schedule

Github stars72 stars
The web app for Indonesian public transportation data, built using Next.js
You will also learn Next.js (SSR), Tailwindcss in this project.
Transportation
Visit repository
Onboarda

12. Onboarda

Github stars479 stars
An onboarding wizard flow for Next.js powered by framer motion
You will also learn Next.js (SSR), Framer Motion in this project.
Aahaaram Services

13. Aahaaram Services

Github stars14 stars
Excited to share my latest achievement! Introducing "π€πšπ‘πšπšπ«πšπ¦ π’πžπ«π―π’πœπžπ¬".
You will also learn Express, Mongodb in this project.
Simple React Ecommerce

14. Simple React Ecommerce

Github stars29 stars
A simple ecommerce demo project developed with react, typescript & tailwind
You will also learn Typescript, Tailwindcss, Redux Toolkit in this project.
3D Portfolio

15. 3D Portfolio

Github stars27 stars
Explore the code behind my innovative and immersive 3D developer portfolio. Tech used- React, Three.js, and Tailwind CSS, creating a visually stunning and interactive web experience
You will also learn Three.js, Tailwindcss in this project.
Youtube Clone

16. Youtube Clone

Github stars1.4k stars
Youtube Clone Frontend (React + Redux)
You will also learn Redux, Styled Component in this project.
Project Clone
Social Media
Visit repository
Instagram Clone

17. Instagram Clone

Github stars284 stars
Instagram clone using MERN stack
You will also learn Styled Component in this project.
Project Clone
Social Media
Visit repository
Twitter Clone

18. Twitter Clone

Github stars361 stars
Twitter Clone Frontend
You will also learn Graphql, Styled Component in this project.
Project Clone
Social Media
Visit repository
Mern Store

19. Mern Store

Github stars1.6k stars
🎈 Fullstack MERN Ecommerce Application
You will also learn Redux, Express, Mongodb in this project.
Netflix Clone

20. Netflix Clone

Github stars566 stars
This project is a simplified front end clone of Netflix. It was created with React and CSS (Grid and Flexbox). It uses The MovieDB Api.
You will also learn Redux, Storybook in this project.
Project Clone
Public API
Visit repository
Linkedin Clone

21. Linkedin Clone

Github stars66 stars
πŸš€ Frontend for a software similar to LinkedIn
You will also learn Redux, Docker in this project.
Project Clone
Social Media
Visit repository
Apple Music Clone

22. Apple Music Clone

Github stars1.8k stars
A music streaming service built from the ground up using React & Redux
You will also learn Redux in this project.
Project Clone
Music
Visit repository
SoundCloud Redux

23. SoundCloud Redux

Github stars713 stars
SoundCloud API client with React β€’ Redux β€’ Redux-Saga
You will also learn Redux, RxJS, Express in this project.
Project Clone
Music
Visit repository
React Redux Real World Example

24. React Redux Real World Example

Github stars5.6k stars
Exemplary real world application built with React + Redux
You will also learn Redux in this project.
Social Media
Visit repository
React Redux To-do App (Full-stack)

25. React Redux To-do App (Full-stack)

Github stars1.0k stars
Todo app with Create-React-App β€’ React-Redux β€’ Firebase β€’ OAuth
You will also learn Redux, Firebase in this project.
GrooveIt

26. GrooveIt

Github stars17 stars
GrooveIt, a cutting-edge music application built with ReactJs and Firebase that seamlessly integrates with the Deezer music API to bring you an immersive music experience. GrooveIt not only provides a vast library of songs but also enhances your music journey with a user-friendly interface and a range of features to keep you in control.
You will also learn React Query, Tailwindcss, Firebase in this project.
Gallery
Music
Visit repository
Jira Clone

27. Jira Clone

Github stars10.5k stars
A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress.
You will also learn Typescript, Styled Component, Express in this project.
Project Clone
Project Management
Visit repository
Crate - Ecommerce Starter (Full-stack)

28. Crate - Ecommerce Starter (Full-stack)

Github stars2.4k stars
πŸ‘• πŸ‘– πŸ“¦ A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
You will also learn Graphql, Express, Sequelize, Storybook in this project.
HackerNews Clone

29. HackerNews Clone

Github stars4.4k stars
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
You will also learn Typescript, Next.js (SSR), Graphql in this project.
Project Clone
Visit repository
Money Tracker

30. Money Tracker

Github stars891 stars
πŸ’° Personal finances tracking web app
You will also learn PouchDB, Redux, Semantic UI in this project.