构建 GitHub Airlines：2 小时内完成的一个有趣的副项目✈️

大家好！今天我想分享一个我花了几个小时完成的有趣小项目 - GitHub Airlines，这是一款可以将您的 GitHub 个人资料变成正式精美登机牌的 Web 应用程序。因为为什么您的 GitHub 统计数据会很无聊，而它们可以以航空为主题呢？🛩️

灵感✨

你知道在 GitHub 上拖延时间、第 100 万次查看统计数据的那些时刻吗？好吧，我想，“如果这些数字看起来更像登机牌，那不是很棒吗？”于是，GitHub Airlines 诞生了！

我们建造了什么🏗️

GitHub Airlines 是一款 React 应用程序，它：

技术栈

我们保持其简单但又现代：

构建过程

1. 建立基础

首先，我们启动并运行了 Vite + React + TypeScript 项目。Vite 非常适合快速开发 - 速度非常快！

2. GitHub API 集成

我们通过 REST API 使其变得简单 - 无需身份验证，只需直接获取公共数据：

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.登机牌设计

这很有趣！我们使用 Tailwind CSS 创建了合适的机票外观：

4. 使其具有响应性

因为没有人喜欢手机上放不下的登机牌，对吧？

经验教训

自己尝试一下！🎮

想要将您的 GitHub 个人资料视为登机牌吗？查看现场演示或获取源代码。

下一步是什么？🤔

这只是一个 2 小时的构建，但我们还可以添加更多内容：