21 React Example Projects to Learn From (Open-source, Beginner-Intermediate Level)
Tags: react, webdev, javascript, opensource
Published: 2020-09-28 15:35:00

This post was originally published at <a href="https://www.devaradise.com/react-example-projects">https://www.devaradise.com/react-example-projects</a>

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this post, I'll share with you the list of React example projects to learn from, from beginner to intermediate level.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But before you jump to learn from an example project, you should know <a href="https://reactjs.org/tutorial/tutorial.html" target="_blank" rel="noreferrer noopener">the basic React.js</a>. At least, you should know the React syntax (JSX), states, props, components, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Related Posts</h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://www.devaradise.com/how-to-become-front-end-developer">How to Become a Front-end Developer 2020 (A Complete Practical Guide)</a></li><li><a href="https://www.devaradise.com/best-react-ui-frameworks-libraries">10 Best React UI Frameworks / Libraries 2020</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>How To Learn React With Example Projects / Case Studies?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Just because you clone an example project from Github, you won't really learn much from it. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before you choose an example project, Here are some tips when learning from it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>1. Choose Only One Project at A Time</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With so many open-source projects available on Github, we often feel overwhelmed with them. That's okay.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But, when you really want to learn from those projects, never do that by learning them at once. <a href="https://brainfodder.org/multi-tasking-doesnt-work/" target="_blank" rel="noreferrer noopener">Human brains aren't designed to multi-task</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>2. Replicate, But Don't Copy-Paste the Codes</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With an example project, you might think that you will learn it only by reading the codes. No, you don't.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>3. Be Curious, Find out Why the Codes Work</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the rewriting process, you will find some codes that aren't familiar with you. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When this happened, be curious to find why those codes work. Because it will likely to increase your knowledge.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>4. Experiment, and Add Your Own Flavour</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With enough modification, you can make it as your portfolio, of course by mentioning the example project you use.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>5. Have Patience and Stay Focused</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Last but not least, have patience while you learn. Don't rush, and stay focused. It will takes time, but it worth it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Good luck!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What are Example Projects You Can Use to Learn React?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, you can choose one of the following projects to learn. I sort them from the easiest to moderate level.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Remember, only pick one project to learn at a time! </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>1. Simple React To-do App</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2796,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-simple-todo-app-1024x478.jpg" alt="React Simple Todo App" class="wp-image-2796"/></figure>
<!-- /wp:image -->

{% github kabirbaidhya/react-todo-app no-readme %}

<!-- wp:paragraph -->
<p>A simple react app todo. you will learn the fundamental of React.js with this.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>2. Calculator</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2809,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-calculator-1-1024x489.jpg" alt="React Calculator" class="wp-image-2809"/></figure>
<!-- /wp:image -->

{% github ahfarmer/calculator no-readme %}

<!-- wp:paragraph -->
<p>Simple calculator that let you learn some logics in Javascript and React.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>3. BMI Calculator</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2811,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/bmi-calculator-1-1024x492.jpg" alt="BMI Calculator" class="wp-image-2811"/></figure>
<!-- /wp:image -->

{% github GermaVinsmoke/bmi-calculator no-readme %}

<!-- wp:paragraph -->
<p>You will learn React hooks with this BMI-calculator.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>4. Snapshot</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2802,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/snapshot-1-1024x492.jpg" alt="Snapshot" class="wp-image-2802"/></figure>
<!-- /wp:image -->

{% github Yog9/SnapShot no-readme %}

<!-- wp:heading {"level":3} -->
<h3>5. HackerNews Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2806,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/hacker-news-clone-1-1024x492.jpg" alt="React Hacker News Clone" class="wp-image-2806"/></figure>
<!-- /wp:image -->

{% github clintonwoo/hackernews-react-graphql no-readme %}

<!-- wp:heading {"level":3} -->
<h3>6. TMDb Movie Search</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2797,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-tmdb-search-1-1024x492.jpg" alt="React The Movie DB Search" class="wp-image-2797"/></figure>
<!-- /wp:image -->

{% github SKempin/reactjs-tmdb-app no-readme %}

<!-- wp:paragraph -->
<p>A React movie search app with <a href="https://www.themoviedb.org/" target="_blank" rel="noreferrer noopener">The Movie Database API</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>7. React Trello Board</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2799,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-trello-board-1024x492.jpg" alt="" class="wp-image-2799"/></figure>
<!-- /wp:image -->

{% github web-pal/react-trello-board no-readme %}

<!-- wp:heading {"level":3} -->
<h3>8. React Photo Feed</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2792,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-photo-feed-1-1024x492.jpg" alt="React Photo Feed - Flickr &amp; Yandex" class="wp-image-2792"/></figure>
<!-- /wp:image -->

{% github lkazberova/react-photo-feed no-readme %}

<!-- wp:heading {"level":3} -->
<h3>9. React Redux To-do App (Full-stack)</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2798,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-todo-redux-firebase-1-1024x492.jpg" alt="React Todo Redux Firebase" class="wp-image-2798"/></figure>
<!-- /wp:image -->

{% github r-park/todo-react-redux no-readme %}

<!-- wp:paragraph -->
<p>Another react todo app, but added with authentication feature, database with firebase, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>10. React Lab - UI Component Experiments</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2788,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-lab-ui-component-experiment-1024x492.jpg" alt="React Lab - UI Component Experiments" class="wp-image-2788"/></figure>
<!-- /wp:image -->

{% github syakirurahman/react-lab no-readme %}

<!-- wp:paragraph -->
<p>This is my own project. It contains some UI experiments and demo examples for tutorials that i wrote in this blog.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>11. Netflix Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2790,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-netflix-clone-1-1024x492.jpg" alt="React Netflix Clone" class="wp-image-2790"/></figure>
<!-- /wp:image -->

{% github AndresXI/Netflix-Clone no-readme %}

<!-- wp:paragraph -->
<p>The movies are from <a href="https://www.themoviedb.org/" target="_blank" rel="noreferrer noopener">the Movie Database</a>. It clones only the skin of Netflix web app, not the functions.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>12. React Redux Real World Example</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2794,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-redux-real-world-example-1-1024x492.jpg" alt="React Redux Real world Examples" class="wp-image-2794"/></figure>
<!-- /wp:image -->

{% github gothinkster/react-redux-realworld-example-app no-readme %}

<!-- wp:heading {"level":3} -->
<h3>13. Apple Music Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2804,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/apple-music-clone-1-1024x579.jpg" alt="Apple Music Clone" class="wp-image-2804"/></figure>
<!-- /wp:image -->

{% github tvillarete/apple-music-js no-readme %}

<!-- wp:heading {"level":3} -->
<h3>14. SoundCloud Redux</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2803,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/soundcloud-redux-1-1024x492.jpg" alt="Soundcloud React Redux" class="wp-image-2803"/></figure>
<!-- /wp:image -->

{% github r-park/soundcloud-redux no-readme %}

<!-- wp:heading {"level":3} -->
<h3>15. Linkedin Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2807,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/linkedin-react-1-1024x537.jpg" alt="React Linkedin Clone" class="wp-image-2807"/></figure>
<!-- /wp:image -->

{% github ghoshnirmalya/linkedin-clone-react-frontend no-readme %}

<!-- wp:heading {"level":3} -->
<h3>16. Crate - Ecommerce Starter (Full-Stack project)</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2805,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/crate-ecommerce-web-app-1-1024x512.jpg" alt="Crate Ecommerce Web App Starter" class="wp-image-2805"/></figure>
<!-- /wp:image -->

{% github atulmy/crate no-readme %}

<!-- wp:heading {"level":3} -->
<h3>17. React Twitter Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2800,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-twitter-clone-1024x489.jpg" alt="React Twitter Clone" class="wp-image-2800"/></figure>
<!-- /wp:image -->

{% github manikandanraji/twitter-clone-frontend no-readme %}

<!-- wp:heading {"level":3} -->
<h3>18. React Instagram Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2810,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-insta-clone-1-1024x492.jpg" alt="React Instagram Clone" class="wp-image-2810"/></figure>
<!-- /wp:image -->

{% github manikandanraji/instaclone-frontend no-readme %}

<!-- wp:heading {"level":3} -->
<h3>19. React Youtube Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2801,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-youtube-clone-1-1024x492.jpg" alt="React Youtube Clone" class="wp-image-2801"/></figure>
<!-- /wp:image -->

{% github manikandanraji/youtubeclone-frontend no-readme %}

<!-- wp:heading {"level":3} -->
<h3>20. Money Tracker</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2808,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/money-tracker-1-1024x470.jpg" alt="Money Tracker" class="wp-image-2808"/></figure>
<!-- /wp:image -->

{% github ayastreb/money-tracker no-readme %}

<!-- wp:heading {"level":3} -->
<h3>21. Jira Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2786,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/09/react-jira-clone-1024x492.jpg" alt="React Jira Clone" class="wp-image-2786"/></figure>
<!-- /wp:image -->

{% github oldboyxx/jira_clone no-readme %}

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">~~</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Do you know other repos?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you know other Github repositories that worth mentioning here, don't hesitate to share them in the comment section.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The repository should be:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>A React project example</li><li>Has a demo page, or at least some screenshot</li><li>Work with no significant console error</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Thank you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!</p>
<!-- /wp:paragraph -->