WLH Challenge: Building with Bolt Submission

This is a submission for theWorld'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.tsimport { 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: