I wanted a static, serverless way to browse the original 151 Pokémon with fast search and filtering. The experience needed to be responsive, easy to scan, and fully usable without a backend.
Interactive Pokédex Case Study
Interactive Pokédex · Static Next.js demo
Next.js static export that builds a Pokédex for the first 151 Pokémon with client-side search and filtering. Hosted on GitHub Pages with build-time data from PokéAPI.User need
What I built
Built a Next.js app that fetches PokéAPI data at build time and exports a static site to GitHub Pages. The list view uses client-side search and filtering, and each Pokémon has a pre-rendered detail page.
User interface
- Search and filtering UI for the 151‑Pokémon list
- Responsive grid layout for cards and detail pages
- Clear card hierarchy with stats and type badges
- Consistent navigation between list and detail views
Technical implementation
- Next.js static export with build-time data fetch
- Pre-rendered detail pages for each Pokémon
- Client-side search and filtering state management
- Tailwind CSS for responsive styling
Responsibilities
- Configured Next.js static export for GitHub Pages deployment
- Implemented build-time data fetching from PokéAPI
- Built client-side search and filtering for the list view
- Designed responsive layouts with Tailwind CSS
- Documented setup and deployment steps in the repo
Measurable results
- GitHub repo: Interactive-Pokedex
- Live demo: Interactive-Pokedex
- Static export: Build-time data fetch and export documented in the repository
- Search and filtering: Client-side list filtering available in the live demo
- Responsive UI: Grid and detail views adapt across screen sizes
Technologies used
Next.jsPokeAPIStatic exportTailwind CSSGitHub Pages