Glimpse Git

• An App that highlights your github stats

Features

• AuthO authentication to show app content.
• fethes data from Github API and shows results
• Displays the stats in the form of various graphs
• you can search a user based on their github user names
• Dark mode and light mode theme

App View

• 
• 
• 
• 

Tech Stack

• Styled-Components
• React.js
• React Router
• Auth0
• Github API
• React Icons
• Fusion Charts - Main Docs

Styled Components

• You can refer this for details Styled-Components - Main Docs
• The following is a basic example of how we will be using a styled component

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

• For icons we will be using React Icons
• This is how we can use it

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

React Router Dom

• we will be using the following
• version used - "react-router-dom": "^6.2.2",
• react-router-dom - Main Docs
• renders the first child that matches
• A always matches

Gihthub 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

• Fusion Charts - Main Docs
• First React Chart
• List Of Charts
• Themes

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