Skip to content

pktcodes/github-search-users-react-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Github Search Users 🔍

PROD [Live] : https://react-github-search-users-prod.netlify.app

Github Search Users consists of a straightforward user interface where there is a

  • Login page with a Login / Sign up button which on click opens a popup window handled by Auth0.
    • The popup window gives options to log in or signup with email along with social logins i.e. Google, LinkedIn
    • After successful login and authentication, the user is taken to a dashboard.
  • Dashboard is where we have Navbar, Search form, and the static user profile information has been set by default.
    • Navbar will have the info of the user who logged in along with a Logout button which on click the user gets logged out.
    • Search form is used for searching a user profile with the username and will also show how many requests are remaining for the user can query.
    • User profile information consists of information about the user i.e. user info, followers, and information about repositories in the form of charts.
  • Loading GIF has been implemented, the Error component handles unknown route URLs and Auth0 has been used to handle the authentication.
  • To run the project locally, clone the repo, npm install to install the dependencies, and npm start to start up the development server on default port 3000.

Languages

HTML, CSS, JavaScript, ECMAScript, React ~ ContextAPI - Hooks ~ useState, useEffect, useContext, React Router 6

API

https://api.github.com/

Deployment / Hosting

Netlify


Starter Project

  • css provided (global styles, styled components)
  • folders/files already setup
  • all imports included (warnings)
  • index.js for easier imports

Styled Components

Styled-Components - Main Docs

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


Note: I have developed this project as part of React and Projects Course taught by John Smilga.