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

First Repeating Element | Easy | Techgig

First Repeating Element | Easy | Techgig C++ Solution First Repeating Element | Easy | Techgig C++ Solution The first repeating element is the problem that comes under the Linear Search problem under the Algorithm section. Linear Search or sequential search is a method for finding an element within a list. The algorithm works by selecting and checking each number sequentially until matched. A linear search runs in at the worst linear time and makes at most n comparisons, where n is the length of the list. If each element is equally likely to be searched, then the sequential search has an average case of (n+1)/2 comparisons, but the average case can be affected if the search probabilities for each element vary. The complexity of the linear search is as follows: The basic linear search algorithm has the following steps: Given a list L on n elements with values L0…Ln-1, and target value T, to find the index of the target T in the list L. Set i to 0. If Li = T , the search te...
Post a Comment
Read more

Data Scraping with Python 2020

Are you a regular coursera user? If yes, then you might like this python program. You can actually use the same program for similar course websites like edx, alison, udemy, etc. So, let’s start. If you have some experience with python and BeautifulSoup then you already have everything you need so make your own. The ones that don’t, follow along. Install python for your operating system. After that install requests and BeautifulSoup like this: After that, lets import the modules, and make a variable to store the url: from bs4 import BeautifulSoup import requests baseUrl = “https://www.coursera.org” Now, take an input from cli or initialize it: skillset = input().split(“ “)  Now, we’ll see the query url for the search input: example: java Fig.1. Search field in a course website Fig.2. Check the url and find a pattern So, the important part is the after the “query=” part. So, we will append the input from the user here. skillset= “%20”.join(input().split(“ “)) courseraUrl = “https://...
Post a Comment
Read more