Pokédex
All 1025 Pokémon with search, type matchups, a team builder and a quiz, in nine languages.
About the project
A personal project from 2024 that started as a simple paged list in Vue CLI. Later I rebuilt it as a fast Pokédex for all 1025 Pokémon, without ads, using data from PokéAPI.
What you can try
- Search by name or number from any page; accents and punctuation do not matter
- Filter by up to two types and a region, sort, and share the result by URL
- Pokémon pages with artwork, shiny versions, stats, type matchups, evolutions with conditions, moves, forms and cries
- A team builder that shows shared weaknesses and attack coverage
- Searchable lists of moves, abilities and items; each move and ability page lists the Pokémon that learn or have it
- Compare up to three Pokémon, play "Who's that Pokémon?" and see the Pokémon of the day
- Names in nine languages, favourites with export and import, dark mode, keyboard shortcuts and a quick find (Ctrl+K)
Under the hood
- Data snapshots are bundled at build time, so search and filters need no network requests
- Every page is prerendered with its own meta tags, about 2,000 pages including a sitemap
- Installable and usable offline (PWA with Workbox); images come as WebP from an image CDN, about 10 kB each
- Unit tests in Vitest, end-to-end tests in Playwright with accessibility checks, Lighthouse in CI, deployed to GitHub Pages
- Pokémon details load from the PokéAPI REST endpoints when a page is opened, and the service worker caches them with the artwork for 30 days
- A script refreshes the data snapshots from PokéAPI through GraphQL when new games come out
Changelog
- Vue CLI replaced by Vite
- Vue 3.2 to 3.5, Vue Router 4 to 5 and TypeScript 4.5 to 6
- Axios and the pagination library removed
- Docker replaced by GitHub Pages
- When
- 2024 – 2026
- Type
- Personal
- Versions
- Vue 3.5
- Vue Router 5
- Vite 8
- TypeScript 6
- Stack
- Vue
- TypeScript
- Vite
- PWA
- Vitest
Playwright- ESLint
- GitHub Pages
Gallery
