Building GitHub Airlines: A Fun Side Project in 2 Hours ✈️

G'day folks! Today I want to share a fun little project I whipped up in just a couple of hours - GitHub Airlines, a web app that turns your GitHub profile into a proper fancy boarding pass. Because why should your GitHub stats be boring when they could be aviation-themed? 🛩️

The Inspiration ✨

You know those moments when you're procrastinating on GitHub, looking at your stats for the millionth time? Well, I thought, "Wouldn't it be brilliant if these numbers looked more like a boarding pass?" And thus, GitHub Airlines was born!

What We Built 🏗️

GitHub Airlines is a React app that:

• Fetches your GitHub stats using the REST API


• Generates a snazzy boarding pass with your data


• Includes different themes (or "ticket classes" as we're calling them)


• Works on both mobile and desktop


• Includes a proper QR code linking to your profile

The Tech Stack 🛠️

We kept it simple but modern:

• Vite + React (Because ain't nobody got time for slow builds)


• TypeScript (For catching those pesky bugs)


• Tailwind CSS (Making things pretty without the faff)


• GitHub REST API (The source of all our lovely data)


• Lucide React (For those snazzy icons)

The Build Process 🚀

1. Setting Up the Foundation

First things first, we got our Vite + React + TypeScript project up and running. Vite's brilliant for quick development - it's proper fast!

2. GitHub API Integration

We kept it simple with the REST API - no need for authentication, just straight public data fetching:

const fetchGitHubData = async (username: string) => {

  const [userResponse, reposResponse] = await Promise.all([

    fetch(`https://api.github.com/users/${username}`),

    fetch(`https://api.github.com/users/${username}/repos`)

  ]);

  // Transform the data into boarding pass format

};

3. The Boarding Pass Design

This was the fun bit! We used Tailwind CSS to create a proper airline ticket look:

• Moving banner at the top (because why not?)


• QR code linking to your profile


• Different sections for various GitHub stats


• Multiple themes to choose from

4. Making it Responsive

Because nobody likes a boarding pass that doesn't fit on their phone, right?

Lessons Learned 📚

1. 
   Keep It Simple: We could've added loads more features, but sometimes less is more


2. 
   Design First: Having a clear vision of the design made development much smoother


3. 
   Mobile First: Always think about mobile users from the start

Try It Yourself! 🎮

Want to see your GitHub profile as a boarding pass? Check out the .

What's Next? 🤔

This was just a 2-hour build, but there's so much more we could add:

• More ticket classes (themes)


• Animated transitions


• Achievement badges


• Flight history (commit history)

Get Involved! 🤝

The project is completely open source, and we'd love your contributions! Whether it's adding new features, fixing bugs, or just giving feedback - every bit helps!

Have you built any fun projects with the GitHub API? Or got any ideas for making GitHub Airlines even better? Drop a comment below - I'd love to hear your thoughts!

And remember, the sky's not the limit when you're coding! ✈️

webdev #typescript #react #github #opensource