GitHub の構築

GitHub Airlines の構築: 2 時間でできる楽しいサイド プロジェクト ✈️

皆さん、こんにちは！今日は、私がほんの数時間で作り上げた楽しい小さなプロジェクトを共有したいと思います。GitHub Airlines は、GitHub プロフィールを適切な豪華な搭乗券に変える Web アプリです。なぜなら、GitHub の統計が航空をテーマにする可能性があるのに、なぜ退屈な統計になるのでしょうか? ?️

インスピレーション✨

GitHub で自分の統計を何百万回も見て先延ばしにしている瞬間をご存知ですか?そうですね、「この数字がもっと搭乗券のように見えたら素晴らしいだろう?」と考えました。こうして、GitHub Airlines が誕生しました!

私たちが作ったもの ⁉️

GitHub Airlines は、次のような React アプリです。

• REST API を使用して GitHub 統計を取得します
• データを使用しておしゃれな搭乗券を生成します
• さまざまなテーマ (または「チケットクラス」と呼んでいます) が含まれます
• モバイルとデスクトップの両方で動作します
• あなたのプロフィールにリンクする適切な QR コードが含まれています

技術スタック ?️

シンプルでありながらモダンなデザインにしました:

• 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 を使用して、適切な航空券の外観を作成しました。

• 上部のバナーを移動します (なぜそうしないのでしょうか?)
• プロフィールにリンクする QR コード
• さまざまな GitHub 統計の異なるセクション
• 複数のテーマから選択可能

4. レスポンシブにする

携帯電話に収まらない搭乗券を好む人はいないでしょう?

教訓?

1. シンプルを保つ: もっと多くの機能を追加することもできましたが、少ないほうが良い場合もあります
2. デザインファースト: デザインの明確なビジョンがあることで、開発がよりスムーズになりました
3. モバイル ファースト: 常に最初からモバイル ユーザーのことを考えます

自分で試してみてください! ?

GitHub プロフィールを搭乗券として表示したいですか?ライブデモをチェックするか、ソースコードを入手してください。

次は何ですか？ ?

これはわずか 2 時間のビルドですが、さらに追加できることがたくさんあります。

• その他のチケット クラス (テーマ)
• アニメーショントランジション
• 実績バッジ
• フライト履歴 (コミット履歴)

参加しましょう！ ?

このプロジェクトは完全にオープンソースであり、皆様の貢献をお待ちしております。新機能の追加、バグの修正、あるいは単なるフィードバックの提供など、どんな些細なことでも役に立ちます!

GitHub API を使用して何か楽しいプロジェクトを構築したことがありますか?あるいは、GitHub Airlines をさらに改善するためのアイデアはありますか?以下にコメントを入力してください - ぜひご意見をお聞かせください。

そして、コーディングには限界がないということを覚えておいてください。 ✈️

webdev #typescript #react #github #opensource

以上がGitHub の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。