A sleek, responsive web app that fetches and displays any GitHub user’s profile and repositories using the GitHub API.
🌐 Live Demo | ✨ Features | 🛠️ Tech Stack | 🚀 Getting Started | 📸 Screenshots | 📄 License
The GitHub Profile Finder is a modern and minimal web app that allows users to search for any GitHub profile and get real-time data like avatar, bio, number of followers, public repositories, and the most recently created repos.
This project is ideal for learning how to work with APIs, manage asynchronous requests, and build responsive UI layouts using only HTML, CSS, and JavaScript (no frameworks).
✔️ Search any GitHub user by username
✔️ View profile avatar, name, bio, and stats
✔️ Displays followers, following, and repo count
✔️ Shows 5 most recently created repositories
✔️ Error handling for invalid usernames
✔️ Fully responsive layout for desktop and mobile
✔️ Built with no external UI libraries or frameworks
🔗 Live Demo: Click here to try the app now!
| Technology | Description |
|---|---|
| HTML5 | Markup for the structure |
| CSS3 | Styling and responsive design |
| JavaScript (ES6) | App logic, API calls, and DOM updates |
| Axios | For making HTTP requests to GitHub API |
| GitHub API | Source for profile and repo data |
-
Open the app in your browser: 🔗 https://garimaakashyap.github.io/GitHub-Profiles/
-
Enter any GitHub username in the search field (e.g., torvalds, gaearon, or your own username).
-
Hit Enter or submit the form.
-
The app will:
✔️ Fetch the user's public data from GitHub
✔️ Display their avatar, bio, and key statistics
✔️ List the 5 most recently created public repositories
- If the user does not exist, an elegant error card will be shown.
🔗 API Integration The app uses the GitHub REST API to fetch user data:
GET https://api.github.com/users/{garimaakashyap}
GET https://api.github.com/users/{garimaakashyap}/repos?sort=created
📦 Axios for Requests
Instead of fetch(), this project uses Axios for:
Simpler syntax
Better error handling
Cleaner async/await patterns
🧩 Dynamic HTML Generation
DOM elements like the user card and repository links are dynamically created using template literals and JavaScript DOM methods.
📵 Error Handling
If the user is not found (404), an error card is displayed.
If repository fetching fails, an error message is shown.
Uses media queries for devices below 500px
Input and card components adapt for smaller screen sizes
Layout becomes vertical for better mobile readability
Modern pink color palette (#f7bdd0, #ee9bb7)
Soothing shadows and rounded cards
Custom GitHub-inspired card layout
Use of Poppins font for a clean look
Follow these steps to run the project locally:
git clone https://github.com/garimaakashyap/GitHub-Profiles.git
cd github-profile-finder- GeeksforGeeks Profile: Your gfg
- LinkedIn: Your LinkedIn
- GitHub: Your GitHub