ホームページ >ウェブフロントエンド >jsチュートリアル >GitHub の構築
皆さん、こんにちは!今日は、私がほんの数時間で作り上げた楽しい小さなプロジェクトを共有したいと思います。GitHub Airlines は、GitHub プロフィールを適切な豪華な搭乗券に変える Web アプリです。なぜなら、GitHub の統計が航空をテーマにする可能性があるのに、なぜ退屈な統計になるのでしょうか? ?️
GitHub で自分の統計を何百万回も見て先延ばしにしている瞬間をご存知ですか?そうですね、「この数字がもっと搭乗券のように見えたら素晴らしいだろう?」と考えました。こうして、GitHub Airlines が誕生しました!
GitHub Airlines は、次のような React アプリです。
シンプルでありながらモダンなデザインにしました:
まず最初に、Vite React TypeScript プロジェクトを立ち上げて実行しました。 Vite は迅速な開発に優れています - 適切な速度です!
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 };
これは楽しかったです! Tailwind CSS を使用して、適切な航空券の外観を作成しました。
携帯電話に収まらない搭乗券を好む人はいないでしょう?
GitHub プロフィールを搭乗券として表示したいですか?ライブデモをチェックするか、ソースコードを入手してください。
これはわずか 2 時間のビルドですが、さらに追加できることがたくさんあります。
このプロジェクトは完全にオープンソースであり、皆様の貢献をお待ちしております。新機能の追加、バグの修正、あるいは単なるフィードバックの提供など、どんな些細なことでも役に立ちます!
GitHub API を使用して何か楽しいプロジェクトを構築したことがありますか?あるいは、GitHub Airlines をさらに改善するためのアイデアはありますか?以下にコメントを入力してください - ぜひご意見をお聞かせください。
そして、コーディングには限界がないということを覚えておいてください。 ✈️
以上がGitHub の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。