info-github-user

A app with detailed information of a github user with fusion-charts, Auth0, styled-components, react-router-dom. Main purpose of this app is to try & get very good at using fusion-chart, Auth0, css-grid. Read below the preview to know about the technology i used in this app.

Technologies

React

react-docs

Styled-Components

Styled-Components-docs

// component.js - for styled-component
import styled from "styled-components/macro"
export const Wrapper = styled.htmlElement`
write your styles here
`

// component-folder index.js
import React from 'react';
import { Wrapper } from './component.js';

const ReactComponent = () => {
 // logic here
 return <Wrapper>
 {some content}
 </Wrapper>
}
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",

• 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

Third party tool which provides authentication & authorization services to applications. It has extremely straight forward api & well documented.

• 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 (where auth0 will redirect after the user authentication).
  • Allowed Logout URLs (where auth0 can return to after the user logged-out).
  • Allowed Web Origins (we have to register application URL sothat the app can silently refresh the authentication tokens)
  • SAVE CHANGES!!!!!!!!!!!!!!!

• Connections database (email, password)

• 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

Idea & inspiration

John Smilga