5 Examples of React Applications To Learn From
Tags: react, graphql
Published: 2019-08-09 16:14:45

---
title: 5 Examples of React Applications To Learn From 
published: true
description: When learning React you don't need to just follow tutorials or buy books, you can also learn from other projects. I collected 5 examples of great React projects to get you started
tags: react, graphql, opensource
---

The first time I started coding was at the age 14 and I was looking to build my first startup. I had no clue where to start and ended up by building forward on a popular opensource ecommerce platform called OpenCart. After a lot of time and sleepless nights I released the first version of my startup, where users could trade and sell used DVDs. A few versions later I applied all the best practices from that codebase to create a custom platform, something I couldn't have done if there wasn't any example to learn from.

{% twitter 1142514884992786435 %}

In this blogpost I collected 5 examples of projects build with React that can help every starting (React) developer to level up their skills. Sometimes tutorials are a bit too slow or not complex enough, and you just want to explore a "real" codebase. All listed projects come with a custom backend or are using open APIs to get their data from, so you don't have to work with mock data. Enjoy!


## TMDB Movie Database 

As a movie fan I spend a lot of time looking up shows or people on IMDb, but unfortunately they don't provide an open API. That's where The Movie Database (TMDb) comes along, which provides a great [open-source API](https://www.themoviedb.org/documentation/api?language=en-US) with information about most movies and tv-shows. It's a popular API to use for (hobby) projects or when you're just really into movies. This project by [Stephen Kempin](https://twitter.com/s_kempin) shows how to build a movie database application on top of this API, using React and the typeahead.js library from Twitter for the autosuggest search functionality.

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

## Ecommerce Starter

Subscriptions for food, shaving products or clothes have become very popular over the last few years. With this open-source product you can create your own subscription service, and it's FULL-STACK!(!!!). With Crate you get a frontend created with React and a Node.js and GraphQL backend. If you're eager to start your own company and are looking for good material to learn how to modularize your code or integrate front- and backend, than definitely have a look at this repository. They even use [StoryBook](https://storybook.js.org/) so you can inspect all the components that are used in this project.

{% github atulmy/crate%}

## Apple Music clone

Do you ever listen to music on Apple Music, Spotify or Google? This project is a clone of the first one, and even comes with a backend that you can use. Want to build your own backend? There are instructions to do that yourself. On the frontend React is used together with Redux and Redux Thunk, providing you with an extensive example to get started with Redux for state management. The project isn't supporting React Hooks yet, so consider that a challenge and see if you can refactor it 😎.

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

## Slack clone

If you're working as a developer for a company, than there's a big chance you've been using Slack as a communication tool. What better to learn from than by creating a clone of a tool you use every day? This Slack clone by [Luke Jackson](https://twitter.com/lukejacksonn) is using React and the popular product [ChatKit](https://pusher.com/chatkit) that lets you easily create advanced chat applications. You can get started for free by requesting an API key. Spot any bugs and willing to start contributing to open-source? There are open [beginner friendly](https://github.com/pusher/react-slack-clone/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) tickets in this repository.

{% github pusher/react-slack-clone%}

## Hacker News clone
Not only is [Hacker News](https://news.ycombinator.com/) a great source for news related to programming and technology. It also is a classic amongst developers and often the starting point for demos of showcasing new frontend frameworks or languages. This particular project by [Clinton D'Annolfo](https://twitter.com/clintondannolfo) has done that by using React and GraphQL on the frontend, together with a server running on Node.js and GraphQL. As a bonus [Next.js](https://nextjs.org/) is added to support Server Side Rendering (SSR).

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

What do you think of these projects? Hope they can help you with boosting your React skills, and don't forget to leave any feedback 😄!