Eine Dashboard-Anwendung zur Anzeige öffentlicher Repositories der aboutsource GitHub-Organisation.
| # | Anforderung | Status |
|---|---|---|
| 1 | Dashboard zeigt beim Seitenaufruf alle öffentlichen GitHub-Repositories von https://github.com/aboutsource/ an |
✅ |
| 2 | Jedes Repository zeigt nur den letzten Commit mit der Commit-Nachricht | ✅ |
| 3 | Weitere Details (z.B. Commit-Autor) werden erst angezeigt, wenn das Akkordeon-Element aufgeklappt wird | ✅ |
| 4 | Repositories sind nach dem letzten Änderungszeitpunkt sortiert (neueste zuerst) | ✅ |
| # | Anforderung | Status |
|---|---|---|
| 5 | Dashboard bleibt verfügbar, auch wenn GitHub offline/nicht erreichbar ist | ✅ |
| 6 | Zeige möglichst aktuelle zwischengespeicherte Daten während Ausfällen an | ✅ |
| 7 | Änderungen auf GitHub werden bei Seitenaktualisierung sichtbar, sofern GitHub erreichbar ist | ✅ |
Entscheidung: Next.js mit TypeScript
Begründung: Begrenzte Entwicklungszeit + frühere Erfahrung mit Next.js statt Vue
| Technologie | Zweck |
|---|---|
| Next.js | Framework |
| TypeScript | Typsicherheit |
| GitHub REST API | Datenabruf |
| Postman | API-Tests |
Auch wenn ich noch lerne, lege ich stets Wert darauf, meine Anwendungen barrierefrei zu gestalten. Ich habe bereits grundlegende Funktionen implementiert, darunter:
- Semantisches HTML
- ARIA-Attribute für interaktive Komponenten
- Unterstützung der Tastaturnavigation
- Korrekte Überschriftenstruktur
- Ausreichender Farbkontrast
- Anforderungsanalyse — Akzeptanzkriterien lesen und verstehen
- Technologie-Entscheidung — Next.js statt Vue gewählt (Zeitdruck + Vertrautheit)
- Projekt-Einrichtung — Next.js mit TypeScript initialisieren
- UI-Grundgerüst — Saubere Struktur, Logo, Header, Layout-Gerüst
- API-Integration — GitHub REST API-Endpunkte in Postman testen
- Funktions-Implementierung
- Repository-Auflistung
- Anzeige des letzten Commits
- Akkordeon-Komponenten
- Sortierlogik
- Offline-Caching-Strategie
- Testing & Polierung
- Fehlerbehandlung
- Responsives Design
- Barrierefreiheit überprüfen
| Endpunkt | Zweck |
|---|---|
GET /orgs/{org}/repos |
Alle öffentlichen Repositories auflisten |
GET /repos/{owner}/{repo}/commits?per_page=1 |
Letzten Commit pro Repo abrufen |
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.