Charlie Say

Posted on Nov 27

Building GitHub Airlines

#webdev #javascript #programming #tutorial

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 📚

Keep It Simple: We could've added loads more features, but sometimes less is more
Design First: Having a clear vision of the design made development much smoother
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 live demo or grab the source code.

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

DEV Community