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!
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.
TMDb Movie Search
Key tools used in this React project are:
|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
|Gulp||Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow|
node.js is required to get…
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.
👕👖📦 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).
👕 👖 📦
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.
- 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
- Developers with basic knowledge on…
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 😎.
A music streaming service created from the ground up using ReactJS & Redux
Built by Tanner Villarete
Connect with me on LinkedIn! I'll be graduating soon ;)
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.
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:
There are six required columns:
name: The name of the song
artist: The artist name
album: The album name
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.
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.
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.
The demo attempts to be feature complete according to documentation here. Feature requests should be made via issues or pull requests to this repository.
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).
Hacker News Clone React/GraphQL
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)
TSLint - (JS Best Practices/Code Highlighting)
Jest - (Tests)
Docker - (Container Deployment)
Optional - Yarn or Pnpm Package Manager - (Better Dependencies)
- Declarative UI - (react)
- Static Typing (typescript)
- GraphQL Fragment Colocation - (react-apollo)
- Prefetch Page Assets - (next)
- Universal JS - (node & express)
- Declarative GraphQL Schema - (apollo-server)
- GraphQL Query Batching…
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 😄!