loading...

react projects 5 Examples of React Applications To Learn From

gethackteam profile image Roy Derks Updated on ・3 min read

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.

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 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 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 logo SKempin / reactjs-tmdb-app

Responsive React 'The Movie Database' (TMDb) App

TMDb Movie Search

License GitHub stars GitHub forks Mentioned in Awesome React

TMDb Movie Search is a responsive React app that utilises Twitter's typeahead.js and Bloodhound suggestion engine, loading data via The Movie Database (TMDb) API.

Demo

TMDb Movie Search - Live DEMO

Tools

Key tools used in this React project are:

Tool Description
React A JavaScript library for building user interfaces
Typeahead.js A flexible JavaScript library that provides a strong foundation for building robust typeaheads
Bloodhound Bloodhound is the typeahead.js suggestion engine
Bootstrap Build responsive, mobile-first projects on the web with the world's most popular front-end component library
SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world
Browserify Browserify lets you require('modules') in the browser by bundling up all of your dependencies
Babel Use next generation JavaScript, today
Gulp Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow

Installation

node.js is required to get…

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 so you can inspect all the components that are used in this project.

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).

Crate

Crate 👕👖📦

Get monthly subscription of trendy clothes and accessories.

  • API built with Node, GraphQL, Express, Sequelize (MySQL) and JWT Auth
  • WebApp built with React and Redux along with Server Side Rendering (SSR) / SEO friendly
  • Mobile (Android and iOS) Native App build with React Native
  • Written in ES6+ using Babel + Webpack
  • Designed using Adobe Experience Design. Preview it here.

Features

  • Modular and easily scalable code structure
  • Emphasis on developer experience
  • UI components in separate folder which can be swapped for your favorite UI framework easily
  • Responsive UI for React Native to support Mobile and Tablet
  • GraphQL schema with associations
  • Database migration and data seeding
  • User authentication using JSON Web Tokens with GraphQL API
  • File upload feature with GraphQL
  • React storybook demonstrating UI components for web
  • Server side rendering
  • Multi-package setup and dev scripts for an automated dev experiance

Useful for

  • Developers with basic knowledge on…

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 logo tvillarete / apple-music-js

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

og

Built by Tanner Villarete

Connect with me on LinkedIn! I'll be graduating soon ;)

How far can JavaScript take us?

Turns out, pretty dang far. This web app was my attempt at mimicking Apple's iOS music app, and I think I've come pretty close!

Check out a live demo here


screen shot 2018-08-12 at 9 49 19 am

screen shot 2018-08-12 at 9 49 27 am

I'm in my fourth year of college, and it's been super cool to see how much I've improved and continue to improve all aspects of programming.

Backend API

The API is hosted on a Raspberry Pi, and it's kept private (but still accessible if you try) so that it doesn't get overloaded. If you're interested in building your own backend to plug into this tool, here's what my database and endpoints look like:

Database

There are six required columns:

  • name: The name of the song
  • artist: The artist name
  • album: The album name
  • track: The…

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 is using React and the popular product 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 tickets in this repository.

GitHub logo lukejacksonn / react-slack-clone

Complete chat application, built with Chatkit | by @lukejacksonn

React Slack Clone

Star on GitHub Tweet Build Status

Slack clone powered by Chatkit. See it in action here https://pusher.github.io/react-slack-clone

demo

This is a static, single page web app bootstrapped with create-react-app for ease of setup, distribution and development. It is a thin UI wrapper around the pusher-chatkit-client library to demonstrate how different features can work together to form a compelling real-time chat client with various potential product applications.

Features

The Chatkit SDK allows you to implement features you would expect from a chat client. These include:

  • 📝 Public and private chat rooms
  • 📡 Realtime sending and receiving of messages
  • 📦 Rich media attachments (drag and drop)
  • 💬 Typing and presence indicators
  • 📚 Read message cursors

Want to get involved? We have a bunch of beginner-friendly GitHub issues.

Components

The demo attempts to be feature complete according to documentation here. Feature requests should be made via issues or pull requests to this repository.

  • CreateMessageForm…

Hacker News clone

Not only is Hacker News 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 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 is added to support Server Side Rendering (SSR).

GitHub logo clintonwoo / hackernews-react-graphql

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

Hacker News Clone React/GraphQL

GitHub Stars GitHub Followers GitHub Issues GitHub Pull Requests

This project is a clone of hacker news rewritten with universal JavaScript, using React and GraphQL. It is intended to be an example or boilerplate to help you structure your projects using production-ready technologies.

Hacker News Clone Demo

Live Demo

Overview

Featuring

  • React - (UI Framework)

  • GraphQL - (Web Data API)

  • Apollo - (GraphQL Client/Server)

  • Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack)

  • TypeScript - (Static Types)

  • Webpack - (Module Bundler)

  • PostCSS - (CSS Processing)

  • Node.js - (Web Server)

  • Express - (Web App Server)

  • Passport - (Authentication)

  • ESLint - (Coding Best Practices/Code Highlighting)

  • Jest - (Tests)

  • Docker - (Container Deployment)

  • Optional - Yarn or Pnpm Package Manager - (Better Dependencies)

Benefits

Front End

  • Declarative UI - (react)
  • Static Typing (typescript)
  • GraphQL Fragment Colocation - (react-apollo)
  • Prefetch Page Assets - (next)

Server

  • Universal JS - (node &amp…




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 😄!

Posted on by:

gethackteam profile

Roy Derks

@gethackteam

I do conferences, workshops and open-source projects on React, GraphQL and ReasonML

Discussion

markdown guide
 

Thanks for taking the time to write this article Roy! I will definitely refer back to it.

 

Hey.

Thanks !! this is a great article for newcomers like myself who are just getting into web dev.
do you by any chance have similar examples that make use of microservices on the backend ?
I'm trying to develop and test using microservices architechture and in need of "production grade" examples.

 

This has great value, we always look for "real life examples". We can learn from the experience of others.