Rumah >hujung hadapan web >tutorial js >Membina GitHub Airlines
G'day kawan-kawan! Hari ini saya ingin berkongsi projek kecil yang menyeronokkan yang saya siapkan dalam beberapa jam sahaja - GitHub Airlines, apl web yang menukar profil GitHub anda menjadi pas masuk mewah yang sesuai. Kerana mengapa statistik GitHub anda perlu membosankan sedangkan ia boleh bertemakan penerbangan? ?️
Anda tahu saat-saat anda berlengah-lengah di GitHub, melihat statistik anda buat kali yang kejuta? Nah, saya fikir, "Bukankah lebih baik jika nombor ini kelihatan lebih seperti pas masuk?" Oleh itu, GitHub Airlines dilahirkan!
GitHub Airlines ialah apl React yang:
Kami mengekalkannya ringkas tetapi moden:
Perkara pertama dahulu, kami menyediakan projek Vite React TypeScript kami dan berjalan. Vite cemerlang untuk pembangunan pantas - ia pantas pantas!
Kami menjadikannya mudah dengan API REST - tidak memerlukan pengesahan, hanya mengambil data awam secara langsung:
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 };
Ini adalah perkara yang menyeronokkan! Kami menggunakan Tailwind CSS untuk mencipta rupa tiket penerbangan yang betul:
Sebab tiada siapa yang suka pas masuk yang tidak muat pada telefon mereka, bukan?
Ingin melihat profil GitHub anda sebagai pas masuk? Lihat demo langsung atau ambil kod sumber.
Ini hanya binaan selama 2 jam, tetapi banyak lagi yang boleh kami tambahkan:
Projek ini adalah sumber terbuka sepenuhnya, dan kami amat menghargai sumbangan anda! Sama ada menambah ciri baharu, membetulkan pepijat atau hanya memberi maklum balas - setiap bit membantu!
Adakah anda membina sebarang projek yang menyeronokkan dengan API GitHub? Atau mendapat sebarang idea untuk menjadikan GitHub Airlines lebih baik? Letakkan ulasan di bawah - Saya ingin mendengar pendapat anda!
Dan ingat, langit bukan had apabila anda mengekod! ✈️
Atas ialah kandungan terperinci Membina GitHub Airlines. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!