Membina GitHub Airlines

Membina GitHub Airlines: Projek Sampingan yang Seronok dalam 2 Jam ✈️

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? ?️

Inspirasi ✨

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!

Apa yang Kami Bina ?️

GitHub Airlines ialah apl React yang:

• Mengambil statistik GitHub anda menggunakan REST API
• Menghasilkan pas masuk yang menarik dengan data anda
• Termasuk tema yang berbeza (atau "kelas tiket" seperti yang kami panggil)
• Berfungsi pada kedua-dua mudah alih dan desktop
• Termasuk kod QR yang betul yang memaut ke profil anda

The Tech Stack ?️

Kami mengekalkannya ringkas tetapi moden:

• Vite React (Kerana tiada siapa yang mempunyai masa untuk binaan perlahan)
• TypeScript (Untuk menangkap pepijat yang menjengkelkan itu)
• Tailwind CSS (Menjadikan sesuatu yang cantik tanpa faff)
• GitHub REST API (Sumber semua data kami yang menarik)
• Lucide React (Untuk ikon yang menarik itu)

Proses Pembinaan?

1. Menubuhkan Yayasan

Perkara pertama dahulu, kami menyediakan projek Vite React TypeScript kami dan berjalan. Vite cemerlang untuk pembangunan pantas - ia pantas pantas!

2. Penyepaduan API GitHub

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
};

3. Reka Bentuk Pas Masuk

Ini adalah perkara yang menyeronokkan! Kami menggunakan Tailwind CSS untuk mencipta rupa tiket penerbangan yang betul:

• Menggerakkan sepanduk di bahagian atas (sebab kenapa tidak?)
• Kod QR memaut ke profil anda
• Bahagian berbeza untuk pelbagai statistik GitHub
• Berbilang tema untuk dipilih

4. Menjadikannya Responsif

Sebab tiada siapa yang suka pas masuk yang tidak muat pada telefon mereka, bukan?

Pelajaran yang dipelajari?

1. Kekalkan Mudah: Kami boleh menambahkan lebih banyak ciri, tetapi kadangkala kurang lebih banyak
2. Reka Bentuk Didahulukan: Mempunyai visi reka bentuk yang jelas menjadikan pembangunan lebih lancar
3. Mudah Alih Didahulukan: Sentiasa fikirkan tentang pengguna mudah alih dari awal

Cubalah Sendiri! ?

Ingin melihat profil GitHub anda sebagai pas masuk? Lihat demo langsung atau ambil kod sumber.

Apa Seterusnya? ?

Ini hanya binaan selama 2 jam, tetapi banyak lagi yang boleh kami tambahkan:

• Lagi kelas tiket (tema)
• Peralihan animasi
• Lencana pencapaian
• Sejarah penerbangan (komit sejarah)

Terlibat! ?

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! ✈️

webdev #typescript #react #github #opensource

Atas ialah kandungan terperinci Membina GitHub Airlines. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!