Aufbau von GitHub Airlines

Aufbau von GitHub Airlines: Ein unterhaltsames Nebenprojekt in 2 Stunden ✈️

Guten Tag Leute! Heute möchte ich ein lustiges kleines Projekt vorstellen, das ich in nur wenigen Stunden auf die Beine gestellt habe – GitHub Airlines, eine Web-App, die Ihr GitHub-Profil in eine richtig schicke Bordkarte verwandelt. Denn warum sollten Ihre GitHub-Statistiken langweilig sein, wenn sie auch ein Luftfahrtthema haben könnten? ?️

Die Inspiration ✨

Sie kennen diese Momente, in denen Sie auf GitHub zögern und zum millionsten Mal auf Ihre Statistiken schauen? Nun, ich dachte: „Wäre es nicht großartig, wenn diese Nummern eher wie eine Bordkarte aussehen würden?“ Und so wurde GitHub Airlines geboren!

Was wir gebaut haben?️

GitHub Airlines ist eine React-App, die:

• Ruft Ihre GitHub-Statistiken mithilfe der REST-API ab
• Erstellt mit Ihren Daten eine schicke Bordkarte
• Beinhaltet verschiedene Themen (oder „Ticketklassen“, wie wir sie nennen)
• Funktioniert sowohl auf Mobilgeräten als auch auf dem Desktop
• Enthält einen richtigen QR-Code, der mit Ihrem Profil verknüpft ist

Der Tech Stack ?️

Wir haben es einfach, aber modern gehalten:

• Vite React (Weil niemand Zeit für langsame Builds hat)
• TypeScript (Um diese lästigen Fehler zu erkennen)
• Tailwind CSS (Dinge hübsch machen, ohne viel Aufwand)
• GitHub REST API (Die Quelle all unserer schönen Daten)
• Lucide React (Für diese schicken Symbole)

Der Build-Prozess?

1. Gründung der Stiftung

Das Wichtigste zuerst: Wir haben unser Vite React TypeScript-Projekt zum Laufen gebracht. Vite eignet sich hervorragend für eine schnelle Entwicklung – es ist richtig schnell!

2. GitHub-API-Integration

Wir haben es mit der REST-API einfach gehalten – keine Authentifizierung erforderlich, nur direktes Abrufen öffentlicher Daten:

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. Das Design der Bordkarte

Das war der lustige Teil! Wir haben Tailwind CSS verwendet, um ein passendes Erscheinungsbild für Flugtickets zu erstellen:

• Bewegliches Banner oben (warum nicht?)
• QR-Code, der mit Ihrem Profil verknüpft ist
• Verschiedene Abschnitte für verschiedene GitHub-Statistiken
• Mehrere Themen zur Auswahl

4. Es reaktionsfähig machen

Denn niemand mag eine Bordkarte, die nicht auf sein Handy passt, oder?

Gelernte Lektionen?

1. Keep It Simple: Wir hätten jede Menge mehr Funktionen hinzufügen können, aber manchmal ist weniger mehr
2. Design First: Eine klare Vorstellung vom Design machte die Entwicklung viel reibungsloser
3. Mobile First: Denken Sie immer von Anfang an an mobile Nutzer

Probieren Sie es selbst aus! ?

Möchten Sie Ihr GitHub-Profil als Bordkarte sehen? Schauen Sie sich die Live-Demo an oder holen Sie sich den Quellcode.

Was kommt als nächstes? ?

Dies war nur ein zweistündiger Build, aber wir könnten noch so viel mehr hinzufügen:

• Weitere Ticketklassen (Themen)
• Animierte Übergänge
• Leistungsabzeichen
• Flugverlauf (Commit-Verlauf)

Machen Sie mit! ?

Das Projekt ist vollständig Open Source und wir würden uns über Ihre Beiträge freuen! Ob es darum geht, neue Funktionen hinzuzufügen, Fehler zu beheben oder einfach nur Feedback zu geben – jedes bisschen hilft!

---

Haben Sie lustige Projekte mit der GitHub-API erstellt? Oder haben Sie Ideen, wie Sie GitHub Airlines noch besser machen können? Schreiben Sie unten einen Kommentar – ich würde gerne Ihre Meinung hören!

Und denken Sie daran: Beim Programmieren sind keine Grenzen gesetzt! ✈️

webdev #typescript #react #github #opensource

Das obige ist der detaillierte Inhalt vonAufbau von GitHub Airlines. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!