A simple and elegant React application to find and display GitHub user avatars by their username. This project demonstrates the integration of GitHub's API, debouncing with custom hooks, and a user-friendly interface.
- 🔍 User Search: Search for any GitHub user by their username.
- 🖼️ Avatar Display: Display the user's GitHub avatar in a stylish, rounded frame.
- 🛠️ Debouncing: Prevent excessive API calls with a custom debouncing hook.
- ❌ Error Handling: User-friendly error messages for invalid usernames or failed requests.
- 🎨 Responsive Design: Mobile-first design ensures a great experience on any device.
- 🗃️ User Details: Display additional user information like bio, number of repositories, followers, etc.
- 🌐 Dark Mode: Add a toggle to switch between light and dark themes.
- 💾 Favorites: Allow users to save their favorite GitHub profiles.
- 🔄 Autocomplete: Implement username suggestions as the user types.
dist/
├── index.html # Main HTML file, entry point for the app
├── logo192.png # Web app logo (small size)
├── manifest.json # Web app manifest for PWA settings
├── robots.txt # Instructions for search engine bots
├── vite.svg # Vite logo, possibly used in the app
src/
├── components/
│ ├── GitHubCard/ # Components related to GitHub profile cards
│ ├── Home/ # Home page component
│ └── InputBox/ # Components for input handling
├── hooks/
│ └── useDebounce.js # Custom hook to debounce input values
├── routes/
│ └── CustomRoutes.jsx # Custom routing configuration
├── App.js # Main app component
├── App.css # Global CSS for the app
├── index.js # Entry point for React, renders the app
├── main.jsx # Main JavaScript file for the app
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration file
.gitignore # Specifies files and directories to ignore in Git
package.json # Project dependencies and scripts
README.md # Project documentation and instructions
```
## 🚀 Getting Started
### Prerequisites
- Node.js and npm installed on your machine.
- Basic understanding of React.
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/ChinmayKaitade/github-user-avatar-finder.git-
Install dependencies:
npm install
-
Run the application:
npm start
The application should now be running on
http://localhost:3000.
- Enter a GitHub username in the input box.
- The avatar will be displayed below after a short delay.
- If the username doesn't exist, an error message will be shown.
Contributions are welcome! Please fork this repository, make your changes, and submit a pull request. 🙌
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Commit your changes (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature-branch). - Create a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Chinmay Kaitade