A React web application that enables users to input a GitHub username and displays the corresponding user avatar fetched from the GitHub API. The application incorporates debouncing to enhance the user experience by preventing excessive API calls.
- React
- Vite
- GitHub Avatar Display: Input a GitHub username and see the user's avatar instantly.
- Debouncing for Improved Performance: Utilizes a custom hook (
useDebounce
) to implement debouncing, reducing API calls during rapid input changes.
To explore the projects locally, follow these steps:
- Clone the repository:
git clone https://github.com/MohdShoaib530/github-avatar-viewer.git
- Navigate to the specific project directory:
cd project1
(replaceproject1
with the desired project folder). - Install project dependencies:
npm install
`. - Start the development server:
npm run dev
. - Open the project in your preferred web browser at
http://localhost:3000
. - Enter a GitHub username in the input field, and the app will display the corresponding avatar.
The application employs a custom hook called useDebounce to delay API calls and ensure optimal performance, especially during rapid input changes.
Each project has its own set of instructions for running. Please refer to the project's README or documentation for specific details.
Contributions to this collection of React projects are welcome! If you have a new project, improvement, or bug fix, follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-new-project
. - Add your project or make your changes.
- Commit your changes:
git commit -m 'Add new project'
. - Push to the branch:
git push origin feature-new-project
. - Submit a pull request.
Please follow the contribution guidelines for more details.
Happy coding and exploring React projects!