🔍 GitHub Profile Finder – Built with Bolt

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

💡 Prompt
The challenge was simple:

Create a landing page on GitHub where I can fill in the GitHub username, and click on search; the profile of the particular user should appear.

What followed was an exciting and seamless experience of building this project with the Bolt template.

🚀 Project Overview
I built a GitHub Profile Finder—a sleek, responsive, and fully functional web app that allows users to search for any GitHub username and instantly view their public profile details including:

• Name
• Bio
• Avatar
• Followers & Following count
• Repositories
• Location
• Company
• And more!

All of this is powered by the GitHub REST API.

🛠️ Tech Stack
Framework: Vite + React

Styling: Tailwind CSS

Language: TypeScript

Linting: ESLint

API: GitHub REST API

Bolt template: Provided a clean foundation for development 🚀

📁 Project Structure
Here’s a peek at the file structure that kept things modular and scalable:

├── public/
│   └── vite.svg                    # Vite logo
├── src/
│   ├── components/                 # React components
│   │   ├── ErrorMessage.tsx        # Error display component
│   │   ├── LoadingSpinner.tsx      # Loading animation component
│   │   ├── SearchForm.tsx          # User search form
│   │   └── UserProfile.tsx         # User profile display
│   ├── services/                   # API services
│   │   └── githubApi.ts            # GitHub API integration
│   ├── types/                      # TypeScript type definitions
│   │   └── github.ts               # GitHub user interface
│   ├── App.tsx                     # Main application component
│   ├── index.css                   # Global styles (Tailwind imports)
│   ├── main.tsx                    # Application entry point
│   └── vite-env.d.ts               # Vite type definitions
├── index.html                      # HTML template
├── package.json                    # Dependencies and scripts
├── tailwind.config.js              # Tailwind CSS configuration
├── tsconfig.json                   # TypeScript configuration
├── vite.config.ts                  # Vite configuration
└── README.md                       # Project documentation

✨ Features
✅ Live search for any GitHub username
✅ Error handling for invalid users
✅ Clean, responsive UI with Tailwind CSS
✅ Loading spinner during API fetch
✅ Modular file structure

🧠 Challenges & Breakthroughs
While using Bolt, the AI model itself worked smoothly, but I did face a few friction points on the platform side:

🛑 Google Sign-In Issues: I tried signing up with Google twice, but both attempts failed. Eventually, I had to use my GitHub account to get started.

👻 Browser Extension Glitches:While AI was generating my project, my Phantom and MetaMask Chrome extensions kept popping up repeatedly—even though I wasn’t interacting with them at all. It disrupted the experience a bit. It might be that this error was due to my browser. Don't know.

These small bugs aside, once I was inside the workspace, everything worked as expected, and I was able to build and deploy my app with ease using github and netlify.

🧩 Favorite Bolt Features
Bolt made it effortless to get started:

🔥 Vite + React + TS combo out of the box

🎨 Tailwind pre-configured

✅ ESLint and TypeScript ready

🧹 Clean file organization

It saved hours of setup time and let me focus purely on building.

💻 Code Highlight: GitHub API Integration

// src/services/githubApi.ts
import { GitHubUser } from '../types/github';

export const fetchGitHubUser = async (username: string): Promise<GitHubUser> => {
  const response = await fetch(`https://api.github.com/users/${username}`);

  if (!response.ok) {
    if (response.status === 404) {
      throw new Error('User not found. Please check the username and try again.');
    } else if (response.status === 403) {
      throw new Error('API rate limit exceeded. Please try again later.');
    } else {
      throw new Error('Failed to fetch user data. Please try again.');
    }
  }

  return response.json();
};

👥 Team
This was an individual submission, but shoutout to the DEV and Bolt teams for making this possible! 🙌

📸 Preview
Here’s what the final product looks like:

🔗 Try It Yourself
👉 GitHub Repo: https://github.com/thecreativecoder07/github-profile-finder
👉 Live Demo: https://github-profile-finderapp.netlify.app/

❤️ Final Thoughts
Building with Bolt was overall an exciting and smooth experience. I was able to go from idea to deployment in just a few hours—exactly what a hackathon platform should offer.

Thanks for reading and happy building! ⚡

☕ If you liked this content, you can support me by buying a coffee: