https://github.com/aadhar41/github-users
A comprehensive React application designed to search for GitHub users, visualize profile statistics, and explore repository data via the GitHub API.
https://github.com/aadhar41/github-users
css3 git github html5 nodejs npm reactjs
Last synced: 12 days ago
JSON representation
A comprehensive React application designed to search for GitHub users, visualize profile statistics, and explore repository data via the GitHub API.
- Host: GitHub
- URL: https://github.com/aadhar41/github-users
- Owner: aadhar41
- Created: 2026-02-23T08:48:32.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2026-03-07T11:47:12.000Z (4 months ago)
- Last Synced: 2026-03-07T18:03:16.093Z (4 months ago)
- Topics: css3, git, github, html5, nodejs, npm, reactjs
- Language: JavaScript
- Homepage:
- Size: 626 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GitHub User Search
A comprehensive React application designed to search for GitHub users, visualize profile statistics, and explore repository data via the GitHub API.
## 🚀 Features
* **User Search**: Real-time search to retrieve comprehensive GitHub profile information.
* **Dynamic Charts**: Data visualization for Top Languages, Most Popular Repos, and Most Forked Repos using FusionCharts.
* **Detailed Profiles**: Displays user bio, company, location, blog, and more.
* **Followers List**: Browse and navigate to user followers with quick links.
* **Secure Authentication**: Session management powered by Auth0.
* **Responsive Design**: Mobile-friendly layout using Styled Components.
* **Rate Limit Tracking**: Real-time monitoring of remaining GitHub API requests.
## 🛠️ Tech Stack
* **Frontend**: [React](https://reactjs.org/)
* **Styling**: [Styled Components](https://styled-components.com/)
* **Charts**: [FusionCharts](https://www.fusioncharts.com/)
* **Routing**: [React Router Dom (v5)](https://reactrouter.com/web/guides/quick-start)
* **API Requests**: [Axios](https://axios-http.com/)
* **Authentication**: [Auth0](https://auth0.com/)
* **Icons**: [React Icons](https://react-icons.github.io/react-icons/)
---
## 🏁 Getting Started
### Prerequisites
* Node.js and npm installed.
* A GitHub account.
* An Auth0 account.
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/aadhar41/github-users.git
cd github-users
```
2. **Install dependencies**
```bash
npm install
```
3. **Environment Variables**
Create a `.env` file in the root directory:
```env
REACT_APP_AUTH0_DOMAIN=your_auth0_domain
REACT_APP_AUTH0_CLIENT_ID=your_auth0_client_id
```
4. **Run the application**
```bash
npm start
```
The app will run at `http://localhost:3000`.
---
## 🏗️ Technical Guide
### Styled Components
For styling, use the `styled-components` library.
```jsx
import styled from "styled-components";
const Component = () => {
return Content;
}
const Wrapper = styled.article`
/* Add your CSS here */
`;
```
### Routing
This project uses `react-router-dom` v5.2.0.
* `` renders the first matching child ``.
* A `` serves as a catch-all for undefined paths.
### GitHub API Endpoints
* **Root**: `https://api.github.com`
* **User**: `https://api.github.com/users/{username}`
* **Repos**: `https://api.github.com/users/{username}/repos?per_page=100`
* **Followers**: `https://api.github.com/users/{username}/followers`
* **Rate Limit**: `https://api.github.com/rate_limit`
> **Note**: Unauthenticated requests are limited to 60 requests per hour based on the originating IP address.
---
## 🔐 Auth0 Configuration
1. Create a **Single Page Web Application** in your Auth0 Dashboard.
2. In **Settings**, configure the following for `http://localhost:3000`:
* Allowed Callback URLs
* Allowed Logout URLs
* Allowed Web Origins
3. Activate desired **Connections** (Email/Social).
4. Copy your **Domain** and **Client ID** to your `.env` file.
---
## 🤝 Community & Contributions
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
* **Code of Conduct**: Please read our [Code of Conduct](CODE_OF_CONDUCT.md) to understand the standards of behavior we expect in our community.
* **Contributing**: Check out the [Contributing Guidelines](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
* **Security**: If you find a security vulnerability, please follow our [Security Policy](SECURITY.md).
* **Issue Templates**: When opening an issue, please use the provided [Bug Report](.github/ISSUE_TEMPLATE/bug_report.md) or [Feature Request](.github/ISSUE_TEMPLATE/feature_request.md) templates.
---
## 🚀 Deployment
### Netlify Setup
This project is optimized for [Netlify](https://www.netlify.com/).
**1. Fix Build Warnings**
Update your `package.json` to prevent build failures due to warnings:
```json
"build": "CI= react-scripts build",
```
**2. Handling Client-Side Routing**
To ensure React Router works correctly on Netlify, create a `_redirects` file in the `public` folder:
```text
/* /index.html 200
```
## ⚓ API Reference
- [GitHub API Documentation](https://docs.github.com/en/rest)
- [Rate Limit Info](https://api.github.com/rate_limit)
---
## 📜 License
Distributed under the MIT License. See `LICENSE` for more information.