github-user-search

Github User Search ReactJS App

🥗 Like my content? Buy me a salad

Getting Started

1. Install node 14 LTS
2. Install create-react-app npm install -g create-react-app
3. Increase ulimit for testing on sauce

View finished project👇

cd github-user-search/end
npm i && npm start

Practice in Starter Project👇

cd github-user-search/start
npm i && npm start

Starter Project in Start folder

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

createContext()

docs Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

class App extends React.Component {
	render() {
		return <Toolbar theme='dark' />;
	}
}

function Toolbar(props) {
	// The Toolbar component must take an extra "theme" prop
	// and pass it to the ThemedButton. This can become painful
	// if every single button in the app needs to know the theme
	// because it would have to be passed through all components.
	return (
		<div>
			<ThemedButton theme={props.theme} />
		</div>
	);
}

class ThemedButton extends React.Component {
	render() {
		return <Button theme={this.props.theme} />;
	}
}

Styled Components

Styled-Components - Main Docs

import styled from "styled-components";

const ReactComponent = () => {
 // return a styled **component**
 return <Wrapper>
 {some content}
 </Wrapper>
}


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

React Icons

React Icons - Main Docs

// use a named import
// follow the docs on getting certain icons
import { FiUsers, FiUserPlus } from 'react-icons/fi';
// use the icon as a component
<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.

Auth0

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

Testing

** screener visual e2e is having issues testing the app in a multithreaded manner **

1. How do we ensure that all the paths of the Routes are correct in App.js?
2. How do we test Error.js page?

• There are several risks
  • Does the page show up on invalid endpoints?
  • Does the back home button take us to correct page
  • Does the page look as expected

3. How do we test Login.js page?
   1. Does the page look correct?
   2. Is the path correct?
4. How do we test Info.js?
   1. Is it getting the correct data back?
5. How do we test the updated Info.js with the icons?
   1. One thing to notice here is that each icon has the same className. That's because these are used for styling purposes.
6. Testing Search.js
   1. How do we test that it looks correct?
   2. How do we test that a search correctly updates the remaining?
   3. How do we test that having 0 remaining requests will hide the button?
   4. How do we update that our UI correctly displays the return from the API?

Inspiration

Huge thanks to John Smilga for the inspiration

• 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