loading...
Cover image for 21 React Example Projects to Learn From (Open-source, Beginner-Intermediate Level)

21 React Example Projects to Learn From (Open-source, Beginner-Intermediate Level)

syakirurahman profile image Syakir Rahman Originally published at devaradise.com ・9 min read

This post was originally published at https://www.devaradise.com/react-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

How To Learn React With Example Projects / Case Studies?

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. Replicate, 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!

What are Example Projects You Can Use to Learn React?

Now, you can choose one of the following projects to learn. I sort them from the easiest to moderate level.

Remember, only pick one project to learn at a time!

1. Simple React To-do App

React Simple Todo App

A simple react app todo. you will learn the fundamental of React.js with this.

2. Calculator

React Calculator

GitHub logo ahfarmer / calculator

Simple calculator built with React

Simple calculator that let you learn some logics in Javascript and React.

3. BMI Calculator

BMI Calculator

GitHub logo GermaVinsmoke / bmi-calculator

React Hooks app for calculating BMI

You will learn React hooks with this BMI-calculator.

4. Snapshot

Snapshot

GitHub logo Yog9 / SnapShot

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.

5. HackerNews Clone

React Hacker News Clone

GitHub logo clintonwoo / hackernews-react-graphql

Hacker News clone rewritten with universal JavaScript, using React and GraphQL.

6. TMDb Movie Search

React The Movie DB Search

GitHub logo SKempin / reactjs-tmdb-app

Responsive React 'The Movie Database' (TMDb) App

A React movie search app with The Movie Database API.

7. React Trello Board

GitHub logo web-pal / react-trello-board

Trello like board based on React, Redux, React-dnd

8. React Photo Feed

React Photo Feed - Flickr & Yandex

GitHub logo lkazberova / react-photo-feed

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.

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

React Todo Redux Firebase

GitHub logo r-park / todo-react-redux

Todo app with Create-React-App • React-Redux • Firebase • OAuth

Another react todo app, but added with authentication feature, database with firebase, etc.

10. React Lab - UI Component Experiments

React Lab - UI Component Experiments

GitHub logo syakirurahman / react-lab

React Lab - React UI Component Experiments

This is my own project. It contains some UI experiments and demo examples for tutorials that i wrote in this blog.

11. Netflix Clone

React Netflix Clone

GitHub logo AndresXI / Netflix-Clone

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.

The movies are from the Movie Database. It clones only the skin of Netflix web app, not the functions.

12. React Redux Real World Example

React Redux Real world Examples

GitHub logo gothinkster / react-redux-realworld-example-app

Exemplary real world application built with React + Redux

13. Apple Music Clone

Apple Music Clone

GitHub logo tvillarete / apple-music-js

A music streaming service built from the ground up using React & Redux

14. SoundCloud Redux

Soundcloud React Redux

GitHub logo r-park / soundcloud-redux

SoundCloud API client with React • Redux • Redux-Saga

15. Linkedin Clone

React Linkedin Clone

GitHub logo ghoshnirmalya / linkedin-clone-react-frontend

🚀 Frontend for a software similar to LinkedIn

16. Crate - Ecommerce Starter (Full-Stack project)

Crate Ecommerce Web App Starter

GitHub logo atulmy / crate

👕 👖 📦 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).

17. React Twitter Clone

React Twitter Clone

18. React Instagram Clone

React Instagram Clone

GitHub logo manikandanraji / instaclone-frontend

Instagram clone using MERN stack

19. React Youtube Clone

React Youtube Clone

GitHub logo manikandanraji / youtubeclone-frontend

Youtube Clone Frontend (React + Redux)

20. Money Tracker

Money Tracker

GitHub logo ayastreb / money-tracker

💰 Personal finances tracking web app

21. Jira Clone

React Jira Clone

GitHub logo oldboyxx / jira_clone

A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress.

~~

Do you know other repos?

If you know other Github repositories that worth mentioning here, don't hesitate to share them in the comment section.

The repository should be:

  • A React project example
  • Has a demo page, or at least some screenshot
  • Work with no significant console error

Thank you.

Happy coding!

Discussion

pic
Editor guide
Collapse
n1ru4l profile image
Laurin Quast

github.com/dungeon-revealer/dungeo... is a frontend & backend web app for (remote) tabletop role-playing games built with react, typescript, react-three-fiber, and heavily uses fp-ts on the backend. We are actively looking for contributors and there a few issues for getting started quickly 🙂 We have a discord community and I would be happy to guide new contributors throughout their first open-source adventures!

Collapse
steniowagner profile image
Stenio Wagner

Here's my contribution with more projects for this post!

A Store System built with Electron, React, Material-UI, Redux, Redux-Saga, MySQL and Sequelize:
github.com/steniowagner/store-system

A React-Native streaming-audio app that provides knowledge in the shape of Podcasts.

A React-Native App that shows options of Restaurants, Gastronomic Events and Dishes in the City of Fortaleza (Brazil).

A Full-stack to send push notifications to Expo apps.

Collapse
syakirurahman profile image
Syakir Rahman Author

Thanks for the addition, Stenio!

Collapse
jsolano profile image
J.P. Solano

Hi Syakir, thank you for compiling all this awesome react projects. Here my contribution : I create a React app that solve every sudoku puzzle (Porting Peter Norvig python solver) github.com/jsolano/react-sudoku-so...

Collapse
jsolano profile image
J.P. Solano

Just published an post about it dev.to/jsolano/building-a-react-ap...

Collapse
webdril_91 profile image
Emeka Michael

Hi, these is awesome, but how do one get a walkthrough video or doc on these projects... It will really make learning easier if there are walkthrough for these projects... Please kindly share walkthrough video or doc.

Collapse
syakirurahman profile image
Syakir Rahman Author

These projects are not mine.. some projects might have a youtube tutorial for them.. just check the detail in their repository

Collapse
miladr0 profile image
Milad Ranjbar

Simple task management like Trello, using Tailwind CSS and react, just frontend.
github.com/miladr0/task-do

Collapse
hailomym profile image
HailoMYM

Nice post, thanks. Do you have a list of backend projects? That may be interesting too

Collapse
syakirurahman profile image
Syakir Rahman Author

The list number 17-21 have their own backend projects too. Just check their repos.

Collapse
manikandanraji profile image
Manikandan

glad to see my 'clone trilogy' here

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast

Scrum poker app, real time, React with ts and dotnet core signalR on the backend
github.com/TheOnlyBeardedBeast/Scr...
github.com/TheOnlyBeardedBeast/Scr...

Collapse
syakirurahman profile image
Syakir Rahman Author

Thanks.. I'll take a look