Pokedex – API-basierte Next.js Applikation

Die Pokedex-App ist eine dynamische Webanwendung, die auf Basis von Next.js 13+ entwickelt wurde und Daten aus der öffentlichen PokeAPI konsumiert. Die Anwendung stellt eine Sammlung von Pokémon in einer performanten und responsiven Oberfläche dar. Sie nutzt moderne Webtechnologien wie Server-Side Rendering (SSR), dynamisches Routing und Incremental Static Regeneration (ISR), um eine optimale Nutzererfahrung zu gewährleisten.

Technologiestack

• Next.js: App Router-Architektur mit React Server Components (RSC).
• React: Komponentenbasierte Entwicklung der Benutzeroberfläche.
• Tailwind CSS: Dient der Erstellung eines modernen, konsistenten und responsiven Designs.
• PokeAPI: Wird als externe REST-Schnittstelle zur Datenbeschaffung genutzt.
• Vercel: Plattform für das Deployment mit Edge-Optimierungen.

Kernfunktionen

• Listenansicht: Darstellung der Pokémon mit Lazy Loading und Paginierung.
• Detailansicht: Dynamisches Routing zu individuellen Pokémon-Seiten basierend auf deren Namen oder ID.
• Performance-Optimierung: Einsatz von SSR und ISR für schnelle Ladezeiten und verbesserte SEO.
• Responsives Design: Eine für alle Bildschirmgrößen optimierte Benutzeroberfläche.
• Modulare Architektur: Eine durchdachte Komponentenstruktur sorgt für gute Wartbarkeit und Wiederverwendbarkeit des Codes.

Technische Herausforderungen und Erkenntnisse

• Implementierung von asynchronem Datenabruf in serverseitigen Komponenten (Server Components).
• Optimierung der Ladeperformance durch die statische Generierung von häufig aufgerufenen Seiten.
• Entwicklung robuster Fehlerbehandlungsstrategien für API-Anfragen und Implementierung von UI-Fallbacks.
• Verwaltung des Anwendungszustands ausschließlich mit React Hooks, ohne den Einsatz externer Bibliotheken.

Live Demo | GitHub Repository