建造 GitHub Airlines：2 小時內(nèi)的一個有趣的業(yè)餘專案 ??

大家好！今天，我想分享一個我在短短幾個小時內(nèi)完成的有趣的小項目 - GitHub Airlines，這是一個網(wǎng)絡(luò)應(yīng)用程序，可以將你的 GitHub 個人資料變成一張精美的登機證。因為當(dāng)你的 GitHub 統(tǒng)計數(shù)據(jù)可以是航空主題時，為什麼要無聊呢？ ??

靈感?

你知道你在 GitHub 上拖延、第一百萬次查看你的統(tǒng)計數(shù)據(jù)的那些時刻嗎？好吧，我想，「如果這些數(shù)字看起來更像登機證，那不是很棒嗎？」於是，GitHub Airlines 誕生了！

我們建造了什麼？ ?

GitHub Airlines 是一款 React 應(yīng)用程序，它：

• 使用 REST API 取得您的 GitHub 統(tǒng)計資料
• 使用您的資料產(chǎn)生漂亮的登機證
• 包括不同的主題（或我們所說的「門票類別」）
• 適用於行動裝置和桌面
• 包含連結(jié)到您的個人資料的正確二維碼

技術(shù)堆疊？ ?

我們保持簡單但現(xiàn)代：

• Vite React（因為沒有人有時間進行緩慢的建造）
• TypeScript（用於捕捉那些討厭的錯誤）
• Tailwind CSS（讓事情變得漂亮又不費力）
• GitHub REST API（我們所有可愛資料的來源）
• Lucide React（對於那些時髦的圖示）

建置過程？

1. 設(shè)立基金會

首先，我們啟動並執(zhí)行了 Vite React TypeScript 專案。 Vite 非常適合快速開發(fā) - 太快了！

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. 登機證設(shè)計

這很有趣！我們使用 Tailwind CSS 創(chuàng)建了正確的機票外觀：

• 在頂部移動橫幅（因為為什麼不呢？）
• 連結(jié)到您的個人資料的二維碼
• 各種 GitHub 統(tǒng)計數(shù)據(jù)的不同部分
• 多種主題可供選擇

4. 使其具有響應(yīng)能力

因為沒有人喜歡不適合手機的登機證，對吧？

吸取的教訓(xùn)？

1. 保持簡單：我們可以增加更多功能，但有時少即是多
2. 設(shè)計第一：擁有清晰的設(shè)計願景讓開發(fā)更順利
3. 行動優(yōu)先：從一開始就始終考慮行動用戶

自己嘗試！ ？

想要查看您的 GitHub 個人資料作為登機證嗎？查看現(xiàn)場演示或取得原始碼。

接下來是什麼？ ？

這只是一個 2 小時的構(gòu)建，但我們還可以添加更多內(nèi)容：

• 更多門票類別（主題）
• 動畫轉(zhuǎn)場
• 成就徽章
• 飛行歷史（提交歷史）

介入！ ？

這個專案是完全開源的，我們非常高興您的貢獻！無論是添加新功能、修復(fù)錯誤還是只是提供反饋 - 每一點都有幫助！

您使用 GitHub API 建置過任何有趣的專案嗎？或者有任何讓 GitHub Airlines 變得更好的想法嗎？請在下面發(fā)表評論 - 我很想聽聽您的想法！

請記住，編碼時天空不是極限！ ??

webdev #typescript #react #github #opensource

以上是建設(shè) GitHub 航空公司的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！