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.
SKempin
/
reactjs-tmdb-app
Responsive React 'The Movie Database' (TMDb) App
TMDb Movie Search
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
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.
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).
🆕 Upgraded version is now available!
An upgraded and more modern version with full-stack monorepo, featuring an event-driven, highly scalable architecture using Node.js, React, Redis, MongoDB, and Docker is now available check out github.com/atulmy/fullstack-event-driven-architecture
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
- …
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 😎.
tvillarete
/
apple-music-js
A music streaming service built from the ground up using React & Redux
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
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.
lukejacksonn
/
react-slack-clone
Complete chat application, built with Chatkit | by @lukejacksonn
React Slack Clone
Slack clone powered by Chatkit. See it in action here https://pusher.github.io/react-slack-clone
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).
clintonwoo
/
hackernews-react-graphql
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
Hacker News Clone React/GraphQL
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.
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 - (
@apollo/client) - Prefetch Page Assets - (
next)
Server
- Universal JS - (
node&…
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 😄!
Top comments (3)
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.