建設 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中文網其他相關文章！