15+ Best React.js Project Examples for 2020
Tags: webdev, react, design, webperf
Published: 2020-07-13 07:23:05

######This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

***

Whether you are new to programming or already an experienced developer, you are probably looking for resources to help you build your own apps. React.js is a very popular frontend framework with a great community, which means that you can find a lot of projects as examples. 

We wanted to ease your researching work, so in this post, we will present 15+ React.js projects that vary in complexity and can be used as a source of inspiration for new projects. Checking on them can also help you learn more about React.js. The list is gathering fresh examples so you can use them in 2020.

## React Templates Examples

### [**Soft UI Dashboard React**](https://www.creative-tim.com/product/soft-ui-dashboard-react?ref=devto)

[**Soft UI Dashboard React**](https://www.creative-tim.com/product/soft-ui-dashboard-react?ref=devto) is an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest design trend right now, Soft UI, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.

[![Soft UI Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/500/original/soft-ui-dashboard-material-ui.jpg?1632195046)](https://www.creative-tim.com/product/soft-ui-dashboard-react?ref=devto)

[Details |](https://www.creative-tim.com/product/soft-ui-dashboard-react?ref=devto)   [Live Preview](https://demos.creative-tim.com/soft-ui-dashboard-react/?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**Purity UI Dashboard**](https://www.creative-tim.com/product/purity-ui-dashboard?ref=devto)

[**Purity UI Dashboard**](https://www.creative-tim.com/product/purity-ui-dashboard?ref=devto) is a beautiful free ReactJS Dashboard based on Chakra UI.  Made of hundred of elements, designed blocks and fully coded pages, Purity UI Dashboard is ready to help you create stunning websites and webapps. It is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using Chakra's style props.

[![Purity UI Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/497/original/purify-ui-dashboard.jpg?1631020684)](https://www.creative-tim.com/product/purity-ui-dashboard?ref=devto)

[Details |](https://www.creative-tim.com/product/purity-ui-dashboard?ref=devto)   [Live Preview](https://demos.creative-tim.com/purity-ui-dashboard/?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**Purity UI Dashboard PRO**](https://www.creative-tim.com/product/purity-ui-dashboard-pro?ref=devto)
[**Purity UI Dashboard PRO**](https://www.creative-tim.com/product/purity-ui-dashboard-pro?ref=devto) is the premium version of the beautiful Purity UI Dashboard, and it comes with over 300 frontend individual elements and 32 fully coded pages. Designed for those who like modern UI elements and beautiful websites, this admin template is ready to help you build your projects faster and easier.

[![Purity UI Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/538/original/purity-ui-dashboard-pro.png?1634731582)](https://www.creative-tim.com/product/purity-ui-dashboard-pro?ref=devto)

[Details |](https://www.creative-tim.com/product/purity-ui-dashboard-pro?ref=devto)   [Live Preview](https://demos.creative-tim.com/purity-ui-dashboard-pro/?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)




### [**Material Tailwind Kit React**](https://www.creative-tim.com/product/material-tailwind-kit-react?ref=devto)

[**Material Tailwind Kit React**](https://www.creative-tim.com/product/material-tailwind-kit-react?ref=devto) is a free and open-source UI Kit based on two popular front-end technologies: Tailwind CSS & React. It was built to simplify the developer's work in the quest of creating intuitive interfaces. Kick-start your development project with this stunning product inspired by Material Design! If you like Google's Material Design, you will love this kit; it features a great number of components built to fit together and look amazing.

[![Material Tailwind Kit React](https://creativetimblog.com/blog/wp-content/uploads/2021/01/Material-Tailwind-Kit-React.jpg)](https://www.creative-tim.com/product/material-tailwind-kit-react?ref=devto)

[Details |](https://www.creative-tim.com/product/material-tailwind-kit-react?ref=devto)   [Live Preview](https://demos.creative-tim.com/material-tailwind-kit-react/#/?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)

### [**Now UI Dashboard React**](https://www.creative-tim.com/product/now-ui-dashboard-react?ref=devto)

[**Now UI Dashboard React**](https://demos.creative-tim.com/now-ui-dashboard-react/#/dashboard?ref=devto) is an admin dashboard template designed by [Invision](https://invisionapp.com/) and coded by [Creative Tim](https://www.creative-tim.com/?ref=devto). It is built on top of Reactstrap, using [Now UI Dashboard](https://www.creative-tim.com/product/now-ui-dashboard?ref=devto), and it is fully responsive. It comes with a big collection of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS, or CRM. 

[![now ui dashboard react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/now-ui-dashboard-react.jpg)](https://www.creative-tim.com/product/now-ui-dashboard-react?ref=devto)

[Details |](https://www.creative-tim.com/product/now-ui-dashboard-react?ref=devto)   [Live Preview](https://demos.creative-tim.com/now-ui-dashboard-react/#/dashboard?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**NextJS Material Kit PRO**](https://www.creative-tim.com/product/nextjs-material-kit-pro?ref=devto)

[**NextJS Material Kit PRO**](https://demos.creative-tim.com/nextjs-material-kit-pro/presentation?ref=devto) is a premium UI Kit made for NextJS, React, and Material-UI. All the Material-UI components that you need in development have been re-design with the new look, inspired by Google's Material Design. Besides the numerous basic elements, we have also created additional classes. All these items will help you take your project to the next level. 

[![NextJS Material Kit PRO](https://creativetimblog.com/blog/wp-content/uploads/2020/07/NextJS-Material-Kit-PRO.jpg)](https://www.creative-tim.com/product/nextjs-material-kit-pro?ref=devto)

[Details |](https://www.creative-tim.com/product/nextjs-material-kit-pro?ref=devto)   [Live Preview](https://demos.creative-tim.com/nextjs-material-kit-pro/presentation?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)
  

### [**Now UI Kit PRO React**](https://www.creative-tim.com/product/now-ui-kit-pro-react?ref=devto)

[**Now UI Kit PRO React**](https://demos.creative-tim.com/now-ui-kit-pro-react/#/presentation?ref=devto) is a premium Bootstrap 4 kit provided by Invision and Creative Tim. It is built over React, React Hooks, and Reactstrap using Create React App. It is a beautiful cross-platform UI kit featuring over 1000 components, 34 sections, and 11 example pages. Now UI Kit PRO React will help you create a clean and simple website that is a perfect fit for today's flat design. If you are a fan of React Bootstrap, you might want to take a look over this post on [how to use Bootstrap with Reactjs.](https://www.creative-tim.com/blog/web-design/how-to-use-bootstrap-with-reactjs/?ref=devto)

[![Now UI Kit PRO React](https://creativetimblog.com/blog/wp-content/uploads/2020/07/Now-UI-Kit-PRO-React.jpg)](https://www.creative-tim.com/product/now-ui-kit-pro-react?ref=devto)

[Details |](https://www.creative-tim.com/product/now-ui-kit-pro-react?ref=devto)   [Live Preview](https://demos.creative-tim.com/now-ui-kit-pro-react/#/presentation?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**BLK• Design System PRO React**](https://www.creative-tim.com/product/blk-design-system-pro-react?ref=devto)

[**BLK• Design System PRO React**](https://demos.creative-tim.com/blk-design-system-pro-react/#/presentation?ref=devto) is a premium Design System for Bootstrap 4 made with React, Reactstrap, and [create-react-app](https://github.com/facebook/create-react-app). It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. [BLK• Design System PRO React](https://www.creative-tim.com/product/blk-design-system-pro-react?ref=devto) comes with a dark design, perfect if you want your website to be perceived as trendy. 

[![BLK Design System PRO React](https://creativetimblog.com/blog/wp-content/uploads/2020/07/BLK-Design-System-PRO-React.jpg)](https://www.creative-tim.com/product/blk-design-system-pro-react?ref=devto)

[Details |](https://www.creative-tim.com/product/blk-design-system-pro-react?ref=devto)   [Live Preview](https://demos.creative-tim.com/blk-design-system-pro-react/#/presentation?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [Shards](https://github.com/designrevision/shards-dashboard-react)

**Shards Dashboard React** is a free React admin dashboard template pack featuring a modern design system and lots of custom templates and components. It is built from scratch while following modern development best practices. 

[![shards-dashboard](https://creativetimblog.com/blog/wp-content/uploads/2020/07/shards-dashboard.jpg)](https://github.com/designrevision/shards-dashboard-react)

[Details |](https://github.com/designrevision/shards-dashboard-react)   [Live Preview](https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview) | [Get Hosting](https://m.do.co/c/276af09d9975)
 

### [**Paper Kit React**](https://www.creative-tim.com/product/paper-kit-react?ref=devto)

[**Paper Kit React**](https://demos.creative-tim.com/paper-kit-react/#/index?ref=devto) is a free Bootstrap 4, React, React Hooks, and Reactstrap UI Kit with pale colors, beautiful typography, and thoughtful drawings. Any elements that are vital to code a web project are already here, fully coded. All components are fully responsive and look great on every screen size. Transitions, shadows, colors, they all resemble the flow you would have using pieces of paper. 

[![Paper Kit React](https://creativetimblog.com/blog/wp-content/uploads/2020/07/Paper-Kit-React.jpg)](https://www.creative-tim.com/product/paper-kit-react?ref=devto)

[Details |](https://www.creative-tim.com/product/paper-kit-react?ref=devto)   [Live Preview ](https://demos.creative-tim.com/paper-kit-react/#/index?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)
 

### [**Black Dashboard React**](https://www.creative-tim.com/product/black-dashboard-react?ref=devto)

[**Black Dashboard React**](https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard?ref=devto) is a beautiful [Bootstrap 4](https://getbootstrap.com/) ([Reactstrap](https://reactstrap.github.io/)) Admin Dashboard with a huge number of components built to fit together and look amazing. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. Black Dashboard comes packed with all plugins that you might need inside a project and documentation on how to get started. It also comes with a dark design that gives a cool effect to your website. 

[![black-dashboard-react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/black-dashboard-react.jpg)](https://www.creative-tim.com/product/black-dashboard-react?ref=devto)

[Details |](https://www.creative-tim.com/product/black-dashboard-react?ref=devto)   [Live Preview](https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


## React App Examples

### [**React Slack Clone**](https://github.com/lukejacksonn/react-slack-clone)

**React Slack Clone** is a static, single-page web app bootstrapped with [create-react-app](https://github.com/facebookincubator/create-react-app) for ease of setup, distribution, and development. It is a thin UI wrapper around the [pusher-chatkit-client](https://github.com/pusher/chatkit-client-js) 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: public/private chat rooms, real-time sending and receiving of messages, rich media attachments, and many more. 

[![react slack clone](https://creativetimblog.com/blog/wp-content/uploads/2020/07/react-slack-clone-1024x664.gif)](https://github.com/lukejacksonn/react-slack-clone)

[Details |](https://github.com/lukejacksonn/react-slack-clone)   [Live Preview](https://github.com/lukejacksonn/react-slack-clone) | [Get Hosting](https://m.do.co/c/276af09d9975)
 

### [**Hacker News Clone**](https://github.com/clintonwoo/hackernews-react-graphql)

This React project is a clone of hacker news rewritten with universal JavaScript, using React and GraphQL. It is intended to be an example to help you structure your projects using production-ready technologies. It can also inspire you to try new design patterns, new libraries, or just build new things. 

[![hacker news react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/hacker-news-react-1024x548.png)](https://github.com/clintonwoo/hackernews-react-graphql)

[Details |](https://github.com/clintonwoo/hackernews-react-graphql)   [Live Preview](http://www.hnclone.win/) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**Dnote**](https://github.com/dnote/dnote)

**Dnote** is an awesome open-source application built with React. It is a simple command-line notebook for programmers. It keeps you focused by providing a way of effortlessly capturing and retrieving information without leaving your terminal. It also offers a seamless multi-device sync and a web interface. 

[![dnote react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/dnote-react.gif)](https://www.getdnote.com/)

[Details |](https://github.com/dnote/dnote)   [Live Preview](https://www.getdnote.com/) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**QRBTF**](https://github.com/ciaochaos/qrbtf)

**QRBTF** is an open-source web application created to beautify your QR code. It features various Art QR Code Styles, parametric design, and support for SVG downloads. No Backend Required. QRBTF is an excellent project example of what you can build with React.js. 

[![qrbtf react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/qrbtf-react-1024x349.png)](https://github.com/ciaochaos/qrbtf)

[Details |](https://github.com/ciaochaos/qrbtf)   [Live Preview](https://qrbtf.com/) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**React Chessground**](https://github.com/ruilisi/react-chessground)

**React Chessground** is an open-source React.js wrapper of the very well-known game, Chessground. 

[![chess react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/chess-react-1016x1024.png)](https://github.com/ruilisi/react-chessground)

[Details |](https://github.com/ruilisi/react-chessground)   [Live Preview](https://github.com/ruilisi/react-chessground) | [Get Hosting](https://m.do.co/c/276af09d9975)


## React Components Examples

### [Material UI](https://material-ui.com/?ref=creativetim)

**Material UI** is a React.js package-framework that implements Google's Material Design using React Components. It comes with numerous components such as Buttons, Inputs, Cards, Tables, and many more. You can find a list containing all their implemented components [here.](https://material-ui.com/getting-started/supported-components/?ref=creativetim) They also have a few starter templates [here](https://material-ui.com/getting-started/templates/), and on [their marketplace](https://material-ui.com/store/?ref=creativetim), you can check some of their premium products as well. 

[![material ui react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/material-ui-react-1024x543.png)](https://material-ui.com/?ref=creativetim)

[Details |](https://material-ui.com/?ref=creativetim)   [Live Preview](https://material-ui.com/getting-started/templates/dashboard/?ref=creativetim)  | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**React Image Gallery**](https://github.com/xiaolin/react-image-gallery)

**React Image Gallery** is an open-source React.js component for building image galleries and carousels. It has a responsive design with mobile swipe gestures and thumbnail navigation. React Image Gallery also features tons of customization options. 

[![react image gallery](https://creativetimblog.com/blog/wp-content/uploads/2020/07/react-image-gallery-1024x752.png)](https://github.com/xiaolin/react-image-gallery)

[Details |](https://github.com/xiaolin/react-image-gallery)   [Live Preview](https://www.linxtion.com/demo/react-image-gallery/) | [Get Hosting](https://m.do.co/c/276af09d9975)
  

### [**React Giphy Searchbox**](https://github.com/sergiop/react-giphy-searchbox)

**React Giphy Searchbox** is a cool React.js component that returns Giphy's GIF or Stickers in a Masonry grid layout. Initially, the component displays trending GIFs from Giphy's feed; when the user starts typing something in the search field, it switches to searched results. When an image is selected, a GIF object is returned. 

![react giphy](https://creativetimblog.com/blog/wp-content/uploads/2020/07/giphy-react-1024x489.png)

[Details |](https://github.com/sergiop/react-giphy-searchbox)   [Live Preview](https://sergiop.github.io/react-giphy-searchbox/) | [Get Hosting](https://m.do.co/c/276af09d9975)
  

### [**React Simple Chatbot**](https://github.com/LucasBassetti/react-simple-chatbot)

**React Simple Chatbot** is a simple but very useful chatbot component for React, designed to create conversation chats. It comes packed with examples to help you understand how your chatbot might work and has a clean, easy to use design. 

[![react chatbot](https://creativetimblog.com/blog/wp-content/uploads/2020/07/react-chatbot.png)](https://github.com/LucasBassetti/react-simple-chatbot)

[Details |](https://github.com/LucasBassetti/react-simple-chatbot)   [Live Preview](https://lucasbassetti.com.br/react-simple-chatbot/) | [Get Hosting](https://m.do.co/c/276af09d9975)


### [**React Stablelist**](https://github.com/RaysOfTheSun/react-stablelist)

**React Stablelist** is a simple listview component for React.js that implements the concept of virtualization for efficiently rendering a huge dataset. While there are already great react components that implement virtualization techniques, it is usually challenging to maintain a variety of layouts and styles while using the libraries mentioned above. Thus, React-StableList was developed with responsive design in mind. 

[![react stablelist](https://creativetimblog.com/blog/wp-content/uploads/2020/07/react-stablelist-1024x950.png)](https://github.com/RaysOfTheSun/react-stablelist)

[Details |](https://github.com/RaysOfTheSun/react-stablelist)   [Live Preview](https://github.com/RaysOfTheSun/react-stablelist) | [Get Hosting](https://m.do.co/c/276af09d9975)
 

## Extra

### [**Made with React**](https://madewithreact.com?ref=devto)

[**Made with React**](https://madewithreact.com?ref=devto) is a beautiful and useful collection of websites and applications using the React or React Native JavaScript library. If you are struggling to find your inspiration for your next React project, this might be the place to be. From components, themes, dashboards to experimental projects, Made with React has everything you need to stay up to date if you are a React developer. 

[![made with react](https://creativetimblog.com/blog/wp-content/uploads/2020/07/made-with-react-1-1024x638.png)](https://madewithreact.com?ref=devto)

[Details |](https://madewithreact.com?ref=devto)   [Live Preview](https://madewithreact.com?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


## Final Thoughts

That's not all! We are constantly updating this list for you to analyze and use the React.js project that fits your needs. Also, if you are a React fan, you might want to take a look over this list of [8 Top React.js Free Templates](https://www.creative-tim.com/blog/web-design/top-react-js-free-templates-july-2019/?ref=devto) that can ease your development work and save you time.