建设 GitHub 航空公司

构建 GitHub Airlines：2 小时内的一个有趣的业余项目 ✈️

大家好！今天，我想分享一个我在短短几个小时内完成的有趣的小项目 - GitHub Airlines，这是一个网络应用程序，可以将你的 GitHub 个人资料变成一张精美的登机牌。因为当你的 GitHub 统计数据可以是航空主题时，为什么要无聊呢？ ?️

灵感✨

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

我们建造了什么？️

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

• 使用 REST API 获取您的 GitHub 统计信息
• 使用您的数据生成漂亮的登机牌
• 包括不同的主题（或我们所说的“门票类别”）
• 适用于移动设备和桌面
• 包含链接到您的个人资料的正确二维码

技术堆栈？️

我们保持简单但现代：

• Vite React（因为没有人有时间进行缓慢的构建）
• TypeScript（用于捕获那些讨厌的错误）
• Tailwind CSS（让事情变得漂亮而不费力）
• GitHub REST API（我们所有可爱数据的来源）
• Lucide 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 创建了正确的机票外观：

• 在顶部移动横幅（因为为什么不呢？）
• 链接到您的个人资料的二维码
• 各种 GitHub 统计数据的不同部分
• 多种主题可供选择

4. 使其具有响应能力

因为没有人喜欢不适合手机的登机牌，对吧？

吸取的教训？

1. 保持简单：我们可以添加更多功能，但有时少即是多
2. 设计第一：拥有清晰的设计愿景使开发更加顺利
3. 移动优先：从一开始就始终考虑移动用户

自己尝试一下！ ？

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

接下来是什么？ ？

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

• 更多门票类别（主题）
• 动画过渡
• 成就徽章
• 飞行历史（提交历史）

介入！ ？

该项目是完全开源的，我们非常高兴您的贡献！无论是添加新功能、修复错误还是只是提供反馈 - 每一点都有帮助！

您使用 GitHub API 构建过任何有趣的项目吗？或者有任何让 GitHub Airlines 变得更好的想法吗？请在下面发表评论 - 我很想听听您的想法！

请记住，编码时天空不是极限！ ✈️

webdev #typescript #react #github #opensource

以上是建设 GitHub 航空公司的详细内容。更多信息请关注PHP中文网其他相关文章！