Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ribtas007/github-users
An App that highlights your github stats
https://github.com/ribtas007/github-users
auth0 fusion-charts react react-icons reactrouter reactrouterdom styled-components
Last synced: 15 days ago
JSON representation
An App that highlights your github stats
- Host: GitHub
- URL: https://github.com/ribtas007/github-users
- Owner: RIBTAS007
- Created: 2024-02-16T11:36:57.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-02-19T13:53:13.000Z (12 months ago)
- Last Synced: 2024-11-24T11:12:29.300Z (3 months ago)
- Topics: auth0, fusion-charts, react, react-icons, reactrouter, reactrouterdom, styled-components
- Language: JavaScript
- Homepage: https://glimpsegit.netlify.app/
- Size: 896 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](https://styled-components.com/)
- [React.js](https://react.dev/)
- [React Router](https://reactrouter.com/en/main)
- [Auth0](https://auth0.com/)
- [Github API](https://api.github.com)
- [React Icons ](https://react-icons.github.io/react-icons/)
- [Fusion Charts - Main Docs](https://www.fusioncharts.com/)
## Styled Components
- You can refer this for details [Styled-Components - Main Docs](https://styled-components.com/)
- The following is a basic example of how we will be using a styled component
```jsx
import styled from "styled-components";
const ReactComponent = () => {
// logic here
return
{some content}
}
const Wrapper = styled.htmlElement`
write your styles here
`
export default ReactComponent
```
## React Icons
- For icons we will be using [React Icons ](https://react-icons.github.io/react-icons/)
- This is how we can use it
```jsx
import { FiUsers, FiUserPlus } from "react-icons/fi";
;
```
## React Router Dom
- we will be using the following
- version used - "react-router-dom": "^6.2.2",
- [react-router-dom - Main Docs](https://reactrouter.com/web/guides/quick-start)
- renders the first child that matches
- A always matches
## Gihthub API
- [Root Endpoint](https://api.github.com)
- [Get User](https://api.github.com/users/ribtas007)
- [Repos](https://api.github.com/users/ribtas007/repos?per_page=100)
- [Followers](https://api.github.com/users/ribtas007/followers)
- [Rate Limit](https://api.github.com/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](https://www.fusioncharts.com/)
- [First React Chart](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react)
- [List Of Charts](https://www.fusioncharts.com/dev/chart-guide/list-of-charts)
- [Themes](https://www.fusioncharts.com/dev/themes/introduction-to-themes)
## Auth0
- [Auth0 - Main Docs](https://auth0.com/)
- 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](https://auth0.com/docs/libraries/auth0-react)
- [REACT SDK API Docs](https://auth0.github.io/auth0-react/)
## Deployment
[Netlify](https://www.netlify.com/)
## 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](https://dev.to/dance2die/page-not-found-on-netlify-with-react-router-58mc)
#### Warnings and create-react-app
package.json
```js
"build": "CI= react-scripts build",
```
[create-react-app Warning Fix Blog Post](https://community.netlify.com/t/how-to-fix-build-failures-with-create-react-app-in-production/17752)