Skip to main content

React js Project 2020 [ Github Link Included ]

Fig.1. Cool graphic design for better visuals

Are you looking for some new react js to expand your skills or to explore the possibilities of react js, have a look at these projects : 

Project 1 : Next.js React GraphQL Express Apollo Boilerplate
If you are react js developer who uses GraphQL, Next.js, Express and Apollo regularly ( well I do ) then, give this boilerplate a go. 

Next.js React GraphQL Express Apollo Boilerplate

Features:
  • Next.js
  • React
  • GraphQL
  • Express
  • React Apollo
  • Typescript
  • JsonWebToken
  • TSLint
  • Husky
  • Bluebird
  • Cors

Github Link


Project 2 : React Dashboard - "isomorphic" admin dashboard template
If you are looking for a react dashboard template to use it for your own website, take a look at this:

React Dashboard

Fig.2. React Dashboard


Features:
  • React
  • Mobile Friendly layout (responsive)
  • React Router
  • Bootstrap
  • GraphQL
  • Nodejs Backend Integration
  • Sass styles
  • Stylish, clean, responsive layout
  • Lots of utility css classes for rapid development (flatlogic css set)
  • Authentication
  • CRUD operations examples

Github Link


Project 3 : React Stripe.js
If you looking to integrate payment take a look at stripe's own java script library to build custom payment forms on the web.

Fig.4. Stripe payment


Github Link

Link for the Docs


Project 4 : React-Stack-Grid
Did it ever occurred to you how the pintrest grid system looks so neat? Well take a loot at this project how it can be replicated in react:

Fig.5. React-Stack-Grid


Live Demo

Github Link


Project 5 : ReactJS-and-Socket.io-Chat-App

If you are looking to make a small / big chat application using react js and socket.io, then Leon Watson has a YouTube tutorial you should definitely check out, link below.

Fig.6. React JS and Socket.io Chat App

Youtube Tutorial Link


Project 6 : ReactJS-and-Socket.io-Chat-App

If you are looking for a tilt effect on your cards / images or in general make your website a little more interactive, then you should check this out.
react-tilt demo gif
Fig.7. React.js - Tilt.js 
Github Link
Live Demo


Project 7 : React Carousel

If you are looking to add beautiful carousel using react, then check this library out. This library provides carousel that is not merely a wrapper for some jQuery solution, but also can be used as controlled or uncontrolled element and has tons of useful features.

Fig.8. React Carousel
Github Link

Project 8 : A Blockchain tvDApp using React, Next.js and MobX.

If you are looking to build a distributed Ethereum Blockchain app using React, Next.js and MobX, then check out the links below.

The app displays a list of shows coming from rotten tomatoes unofficial API. Users are able to add or remove shows from their Bookmarks section. Everytime a user adds or removes a show a Smart Contract function is invoked and the change is stored on the Blockchain.

Fig.9. A Blockchain tvDApp using React, Next.js and MobX



Project 9 : React-Django Admin

Do you want to create a react django integration app and looking for an inspiration, take a look at this github project.

The app has beautiful and elegant administration interface developed in React JS, and a simple Django Rest Framework (with OAuth2 provider) for the backend. This uses Bootstrap for the templates. The authentication is done using OAuth2-based API and the project has a separate "administration" area for the users.

image
Fig.10. React-Django Admin
Github Link


Labels:

Comments

Post a Comment

Popular posts from this blog

How to use Chess com API using Python

  How to use Chess com API using Python Chess is an amazing strategy-based game and if you have been following the recent boom of online chess then welcome to the chess club. Online chess is amazing since it allows you to play with a random stranger at your level or stockfish (computer). There are many popular online chess websites like lichess.org, chess.com, playchess.com, and newly created kasparovchess.com. Today we will be seeing how to use chess.com API for getting players' stats. You can create software and get affiliates from them (check out the link below), so share it with them if you are planning to create something. Before you start make sure you have the following things: Pre-requirements Postman Anaconda or mini conda or Python idle Any text editor of your choice Pretty good? Now let’s download the JSON file that chess com developers have already made for us from here and then you import it to the Postman. This just helps you with prewritten get methods so that ...
Post a Comment
Read more

Create your own YouTube video and playlist downloader using QT designer in Python

Create your own YouTube video and playlist downloader using QT designer in Python The code for this software is available on my GitHub, the link is given below. Create your own YouTube video and playlist downloader using QT designer in Python This is the thing we are trying to make today for this article The code for this software is available on my GitHub, the link is given below. If you haven’t checked out my previous article on the same topic but not the GUI version, please check it out. 3 ways to download YouTube playlists at once using Python Have you guys ever wanted to download your entire youtube playlist? rahulbhatt1899.medium.com So before starting to code let's check if you have all the requirements beforehand: Pre-requirements : Qt designer Anaconda or mini conda or python 3.7 compiler Any text editor of your choice Libraries to download: Pytube Ffmpy PyQt5 This would be sectioned into the following structure: Creating the UI in Qt designer Converting UI file int...
Post a Comment
Read more

Authentication Using Passport JS

Authentication is big and most complicated part of an application, but it is also the  preponderance  part of any web app/software in general. Passport JS Passport JS is a widely popular authentication module for  Node js.  The sole purpose is to authenticate requests and is based on the idea of pluggable authentication strategies ( including local strategy, there are more than 500 strategies currently  available  ). When using third party application Your app never receives your password  thus freeing the developer from the burden of security related to handling and storing passwords. The Passport authentication and its strategy will include protection against attacks like “man in the middle” and other vectors an attacker might exploit. We are going to use Facebook strategy, for now, to install Passport and Facebook strategy type in the following command: Next, we are going to write the authentication code, and we’ll be creating a different module cal...
Post a Comment
Read more