Github User Search App

Dies ist eine Lösung für die GitHub User Search App Challenge auf Frontend Mentor.

Anforderungen

Die Herausforderung besteht darin, diese GitHub-User-Suchanwendung mit der GitHub Users API zu erstellen und sie so nah wie möglich am Design umzusetzen.

Benutzer*innen sollten in der Lage sein:

• Das optimale Layout der App je nach Bildschirmgröße ihres Geräts zu sehen
• Hover-Zustände für alle interaktiven Elemente auf der Seite zu sehen
• Nach GitHub-Usern über ihren Benutzernamen zu suchen
• Relevante Benutzerinformationen basierend auf ihrer Suche zu sehen
• Zwischen Light- und Dark-Theme zu wechseln
• Bonus: Das richtige Farbschema basierend auf den Computereinstellungen automatisch auswählen zu lassen (Tipp: Informiere dich über prefers-color-scheme in CSS)

Die API-Endpunkt-Adresse lautet:
https://api.github.com/users/:username
Beispiel: Um nach dem Profil von Octocat zu suchen, kannst du eine Anfrage an https://api.github.com/users/octocat senden.

Erwartetes Verhalten

• Beim ersten Laden werden die Profildaten von Octocat angezeigt.
• Wenn bei einer neuen Suche kein Benutzer gefunden wird, wird eine Fehlermeldung (wie im Design) angezeigt.
• Falls ein GitHub-Nutzer keinen Namen angegeben hat, wird sein Benutzername dort angezeigt, wo normalerweise der Name steht (ohne @-Symbol) und erneut darunter mit dem @-Symbol.
• Ist die Bio eines Nutzers leer, wird der Text „This profile has no bio“ mit Transparenz angezeigt (wie im Design vorgesehen). Beispieltexte im Design zeigen, wie die Bio aussieht, wenn sie vorhanden ist.
• Falls Standort, Website, Twitter oder Firma leer sind, wird der Text „Not Available“ mit Transparenz angezeigt (wie im Design vorgesehen).
• Website-, Twitter- und Firmeninformationen sollen anklickbare Links zu den jeweiligen Ressourcen sein. Beim Unternehmenslink soll das @-Symbol entfernt werden, damit auf die Unternehmensseite bei GitHub verlinkt wird. Bei Octocat wird @github also zu https://github.com/github.

Gebaut mit

Code-Qualität mit

Implementierungszeit

Diese Challenge wurde innerhalb von 7 Stunden abgeschlossen.

Projekt-Highlights

Dieses Projekt zeigt eine moderne Webanwendung, die mit Next.js gebaut wurde, und integriert mehrere fortschrittliche Funktionen sowie Best Practices der Webentwicklung. Hier sind die wichtigsten Highlights und eingesetzten Technologien:

Theming mit next-themes

• Dynamisches Theming: Implementiert mit next-themes, sodass Nutzer*innen nahtlos zwischen Light- und Dark-Mode wechseln können. Unterstützt auch die automatische Erkennung der Systemeinstellungen.

Sichere API-Aufrufe mit Server Actions

• Serverseitige Authentifizierung: API-Anfragen erfolgen serverseitig über Next.js Server Actions, wobei Tokens sicher in Umgebungsvariablen gespeichert werden.
• Verbesserte Sicherheit und Performance: Durch serverseitiges Rendering werden API-Calls sicherer und performanter ausgeführt.

Datenmanagement mit React Query

• State-Management beim Fetching: React Query verwaltet das Laden, Caching und Aktualisieren von Server-Daten:
  • Ladezustände: Informieren die Nutzer*innen über Ladeprozesse.
  • Fehlerbehandlung: Zeigt strukturierte Fehlermeldungen bei fehlgeschlagenen API-Aufrufen.
  • Effiziente Datenverwaltung: Synchronisiert UI und Server-Daten ohne viel Boilerplate.

Formularmanagement mit React Hook Form

• Effizientes Formularhandling: Spart Re-Renders und bietet integrierte Validierungen für Nutzer-Eingaben.
• Validierung: Validiert Felder vor dem Absenden.

UI-Komponentenbibliothek

• Wiederverwendbare Komponenten: Verwendet Shadcn’s UI-Komponentenbibliothek auf Basis von Radix UI für zugängliche und flexible UI-Elemente.
• Skeleton Screens: Implementiert Skeletons während Ladezeiten für eine bessere Nutzererfahrung.

Barrierefreiheit und Nutzererlebnis

• Radix UI Foundation: Barrierefreiheit ist durch WAI-ARIA-konforme Komponenten gewährleistet.
• Responsives und interaktives Design: Die App ist responsiv und reagiert auf Nutzerinteraktionen für eine intuitive Bedienung.