GitHub Profile Finder

A simple and responsive GitHub Profile Finder built using HTML, CSS, and Vanilla JavaScript. This project allows users to search for any public GitHub profile and displays useful information by fetching data from the GitHub Users API.

---

📖 Overview

GitHub Profile Finder is a beginner-friendly project created to practice working with REST APIs in JavaScript.

The application sends a request to the GitHub Users API, retrieves public profile information, and dynamically updates the user interface with the received data.

---

✨ Features

• 🔍 Search any GitHub user by username
• 👤 Display profile picture
• 📛 Show user's name and username
• 📝 Display bio
• 👥 Show followers and following count
• 📂 Display total public repositories
• 📍 Show location
• 🏢 Display company information
• 🔗 Direct link to GitHub profile
• ⏳ Loading indicator while fetching data
• ❌ Error handling for invalid usernames
• 🚫 Prevent multiple requests by disabling the search button during API calls

---

🛠 Technologies Used

• HTML5
• CSS3
• Vanilla JavaScript (ES6+)
• GitHub REST API
• Fetch API

---

🧠 JavaScript Concepts Practised

This project helped me practice the following JavaScript concepts:

• DOM Manipulation
• Event Handling
• Fetch API
• Async / Await
• Promises
• HTTP Requests
• JSON Parsing
• Error Handling
• try...catch...finally
• Throwing Custom Errors
• Conditional Rendering
• Template Literals
• Input Validation

---

📂 Project Structure

GitHub-Profile-Finder/
│
├── index.html
├── style.css
├── app.js
└── README.md

---

⚙️ How It Works

1. User enters a GitHub username.
2. The application sends a GET request to the GitHub Users API.
3. A loading indicator is displayed while the request is in progress.
4. If the user exists:
   • Profile information is fetched.
   • The UI is updated dynamically.
5. If the username is invalid:
   • An error message is displayed.
6. The loading indicator is removed and the search button becomes active again.

---

🌐 API Used

GitHub Users API

https://api.github.com/users/{username}

Example:

https://api.github.com/users/octocat

---

📸 Information Displayed

The application displays:

• Profile Image
• Name
• Username
• Bio
• Followers
• Following
• Public Repositories
• Location
• Company
• GitHub Profile Link

---

🚀 Getting Started

Clone the Repository

git clone https://github.com/your-username/GitHub-Profile-Finder.git

Navigate to the Project

cd GitHub-Profile-Finder

Run the Project

Simply open the index.html file in your browser.

or

Use the Live Server extension in Visual Studio Code.

---

⚠️ Error Handling

The application handles the following cases:

• Empty username input
• User not found
• Invalid API response
• Loading state management
• Button disable/enable during API request

---

📈 Future Improvements

• Search using the Enter key
• Display user's latest repositories
• Show pinned repositories
• Display account creation date
• Dark / Light mode
• Better responsive design
• Search history
• API rate limit handling

---

📚 What I Learned

While building this project, I learned:

• How to consume REST APIs using Fetch API
• Working with asynchronous JavaScript
• Handling API errors gracefully
• Updating the DOM dynamically
• Managing loading and error states
• Writing cleaner asynchronous code using async/await

---

👨‍💻 Author

Yash Guram

Computer Engineering Graduate

Currently learning React, Node.js, and Full Stack Web Development while building practical projects.

---

⭐ If you like this project

If you found this project useful, consider giving it a ⭐ on GitHub.