I built a web application where you can type any GitHub username and instantly see their profile details all in one place. You do not need to jump between multiple GitHub tabs anymore to find the information you are looking for.
You enter a GitHub username in the search bar, and the application pulls data from the GitHub API. It shows their profile picture, their name, their bio, how many followers they have, how many people they are following, how many public repositories they have created, their location, their company, and their website if they have added one. It also lists their top repositories sorted by stars so you can quickly see which projects are most popular.
I wanted to practice working with APIs and React while making something that developers might actually use in their daily workflow. Whenever I look at someone's GitHub profile, I end up checking the same things every time — their repositories, their follower count, their bio. I thought it would be useful to bring all of that information into one simple page that loads fast and is easy to use without any extra clicks.
I used React with Vite as the build tool. The useState hook handles everything from the search input to the profile data, the repository list, the loading state, and the error messages. All the data comes from the GitHub REST API using async and await for asynchronous requests.
To make the application faster, I used Promise.all() to fetch the profile information and the repository data at the same time instead of waiting for one request to finish before starting the other.
Conditional rendering is used throughout the application to switch between the loading spinner, the error messages, and the actual profile content depending on what is happening at that moment.
The most difficult part was not the API calls themselves but handling all the different states properly. Making sure the spinner shows up while data is loading, the error messages are clear and helpful, and the layout does not jump around while content appears on the screen took more time than I initially expected.
I also spent time making sure the repository cards and the profile layout looked clean and remained consistent across different screen sizes without breaking.
- Search for any GitHub username
- View profile picture, name, and bio
- See follower count and following count
- View public repository count
- Show location, company, and website links
- Display top repositories sorted by stars
- Loading spinner while data is being fetched
- Clear and helpful error messages
- Works on mobile devices and desktop screens
- Smooth hover effects and fade-in animations
- React 18
- Vite
- GitHub REST API
- JavaScript (ES6+)
- HTML5
- CSS3
github-profile-explorer/
├── index.html
├── package.json
├── vite.config.js
├── .gitignore
├── README.md
└── src/
├── main.jsx
├── App.jsx
├── App.css
└── index.css