Any GitHub user analysis application based on React, Auth0, GitHub API, FusionCharts, Netlify

Overview

Github-user-analytics

About

In This Project, You can get the analysis of Any GitHub User. Here I used React, Auth0( for authentication), GitHub API ( for data fetch), FusionCharts ( for Graph & Chart Analysis ), Netlify ( for deployment )

Live Demo: https://github-user-analytic.netlify.app/

Netlify Status

Styled Components

Styled-Components - Main Docs

{ // logic here return {some content} } const Wrapper = styled.htmlElement` write your styles here ` export default ReactComponent">
import styled from "styled-components";

const ReactComponent = () => {
 // logic here
 return <Wrapper>
 {some content}
 </Wrapper>
}


const Wrapper = styled.htmlElement`
write your styles here
`
export default ReactComponent

React Icons

React Icons - Main Docs

;">
import { FiUsers, FiUserPlus } from "react-icons/fi";
<FiUsers className="nameOfTheClass"> </FiUsers>;

React Router Dom

version used - "react-router-dom": "^5.2.0",

Github API

  • Root Endpoint

  • Get User

  • Repos

  • Followers

  • Rate Limit

    For unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address, and not the user making requests.

Fusion Charts

Auth0

  • Auth0 - Main Docs

  • Create Application

  • Choose : Single Page Web Applications

  • Choose : React

  • Go to Settings Tab

  • Copy/Paste Domain, ClientID - can be public (or use .env)

  • Add Domain - for now http://localhost:3000 (DON'T COPY PASTE FROM URL BAR)

    • Allowed Callback URLs
    • Allowed Logout URLs
    • Allowed Web Origins
    • SAVE CHANGES!!!!!!!!!!!!!!!
  • Connections email,social

  • React SDK Docs

  • REACT SDK API Docs

Deployment

Netlify

Additional Info

Redirects with react-router-dom

In order for routing to work on netlify, redirects was added to the public folder

  • _redirects file in public

/*    /index.html   200

Redirects Blog Post

Warnings and create-react-app

package.json

"build": "CI= react-scripts build",

create-react-app Warning Fix Blog Post

You might also like...
A simple Website that search for github users using github API built with react js

A simple Website that search for github users using github API built with react js

 Github Explorer - 🔍 Repository search using the Github API.
Github Explorer - 🔍 Repository search using the Github API.

Github Explorer 🔍 Repository search using the Github API. Link to the Project Installation Before starting, you'll need to have the following tools i

Poem Generator - This application is used to generate poems based on user's input
Poem Generator - This application is used to generate poems based on user's input

Poem Generator This application is used to generate poems based on user's input. Deployed App https://my-poem-generator.herokuapp.com/ Front End The f

Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.
Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.

Amazon Clone is the Fully functional Real custom made Web application that covers and entire E-commerece functionality from designing, User Authentication till Payments build using React JS, Firebase and Stripe.

A User Searcher To Get User Information Built With React
A User Searcher To Get User Information Built With React

Search github users A simple service to search github users and get their information. All information are from api.github.com Available Scripts In th

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector
The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector. Once our system is connected to the keyboard, the user can interactively learn, play or teach in combination with the web application that we provide.

A responsive mobile-based SPA web application built using React, Redux, Chart.js, API, JavaScript, JSX, and CSS
A responsive mobile-based SPA web application built using React, Redux, Chart.js, API, JavaScript, JSX, and CSS

This is a responsive mobile-based SPA web application built using React, Redux, Chart.js, API, JavaScript, JSX, and CSS. It provides numerical data of a crypto coin fetched from the API. It has three pages, the home page with a list of coins, the details page with details of a coin, and the historical data page for visualizing the coin market price in the graph.

Web Audio API based Pitch Tuner application made with ReactJS.

Pitch Tuner Pitch Tuner is a ReactJS application based on WebAudio API. You can tune your guitar/ukelele from online without any application! The algo

Single Page Application built using React, Context API and OMDb API.
Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Comments
  • User portfolio website link not working

    User portfolio website link not working

    In the project, portfolio links with the protocol https:// are not working since the output comes out to be https://https//[thewebsitelink.com]. This is because of the extra https protocol used in line36 of src/components/Card.js

    opened by mehul-srivastava 0
Owner
Aritra Sen
SDE Intern @Techweirdo || FullStack Developer || 3⭐(1653) CodeChef || Google KickStart (3423) || Solved LeetCode 100+ || GCELT'23
Aritra Sen
Github-user-finder - Github User Finder With React.js

Github User Finder Aplicação que permite a busca por nome de usuários do Github

Adriana Lima Shikasho 35 Apr 30, 2022
A tool to search a user from Github using the Github's API.

Github Finder Find github user easily A tool to search a user from Github using the Github's API. It's a mini-project created thanks to bradtraversy's

Lorenzo Carneli 1 Dec 6, 2021
TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

Lucas Azzolini Vieira 7 Apr 13, 2022
A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Mert Çankaya 11 Jul 11, 2022
Algowears, Ecommerce Payment with Crypto An Ecommerce web App built with ❤️ using React & Firebase for the Netlify x Hashnode Hackathon 🔥 !

AlgoWears This is our submission for netlify-hashnode hackathon Samuel-Aspirin????‍?? and Wakeel Kehinde built this web application in line to show ho

farsh 12 Oct 25, 2022
Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account.

Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account. As the mental health of people is becoming a major issue now-a-days therefore this project is created keeping in mind the idea of giving a platform to the people where they can share their worries and thoughts with anyone online and do not need to reveal their identity as well as other personal data.

Anshika Srivastava 4 May 6, 2022
Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.

An application that takes basic information about the user's project as an input and generates a README.md file which the user can upload directly in their project's repository.

Hansal Shah 5 Jun 23, 2022
Zaynab Batool Reza 4 May 14, 2022
Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.

21_MERN_GoogleBookSearchEngine Task Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engin

Dionne Noella 5 Apr 9, 2022
GitHub Desktop is an open source Electron-based GitHub app.

GitHub Desktop is an open source Electron-based GitHub app. It is written in TypeScript and uses React.

GitHub Desktop 16.5k Dec 31, 2022