Matera Digital

Interactive Pokédex Project Write-up

Project Write-up

Interactive Pokédex · Static Next.js 16 app for GitHub Pages

Next.js 16 static export that builds a Pokédex for the first 151 Pokémon with client-side search and filtering. Build-time data fetch from PokéAPI, prerendered detail pages, Tailwind CSS v4 + NextUI. Hosted on GitHub Pages.
Problem

User need

I wanted to learn how to combine Next.js App Router with static export (output: "export") for GitHub Pages. A Pokédex was a good fit — fixed dataset (151 Pokémon), public API, and enough complexity to exercise build-time data fetching, prerendered detail pages, and client-side search.

Solution

What I built

A Next.js 16 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 via PokemonProvider and ItemProvider context. Each Pokémon has a prerendered detail page with sprites, stats, moves (first 10), evolution chains, and item interactions — no runtime API calls needed on navigation.

User interface

  • Home page lists 151 Pokémon with search and pagination
  • Search page filters the in-memory list
  • Item Dex lists items with search and pagination
  • Detail pages show sprites, stats, moves, evolutions
  • Light/dark theme toggle
  • Tailwind CSS v4 + NextUI components

Technical implementation

  • Next.js 16 App Router with output: "export"
  • generateStaticParams enumerates 151 names at build time
  • fetchPokemonDetails runs per name — sprites, species, evolutions, moves
  • Trailing slashes for GitHub Pages static layout
  • Image optimization disabled (unoptimized: true) for static export
  • GitHub Actions workflow publishes out/ to Pages on push to main
Interactive Pokédex project visual
My Role

What I did

  • Solo developer — built the entire application
  • Configured Next.js 16 static export for GitHub Pages deployment
  • Implemented build-time data fetching from PokéAPI with generateStaticParams
  • Built client-side search and filtering with React context providers
  • Designed responsive layouts with Tailwind CSS v4 and NextUI
  • Set up GitHub Actions workflow for automatic deployment
  • Documented architecture, deployment model, and known limitations in README
What's in the Repo

Real artifacts you can verify

  • GitHub repo: github.com/BradleyMatera/Interactive-Pokedex
  • Live demo: bradleymatera.github.io/Interactive-Pokedex
  • Created: June 2024, last updated July 2026
  • Languages: TypeScript (193KB), CSS (47KB), JavaScript
  • Topic tag: "completed" on GitHub
  • Static export: Build-time data fetch documented in README section 3 and 4
  • Deployment: GitHub Actions workflow publishes out/ to Pages on push to main
  • Known issues documented: README section 6 lists limitations honestly
  • Honest limitations: This is a fan-made educational project, not affiliated with Nintendo. No backend, no user accounts, no analytics. Image optimization is disabled for static export compatibility.
Tech Stack

Technologies used

Next.js 16TypeScriptPokeAPITailwind CSS v4NextUIStatic exportGitHub Pages