Pokédex
Všetkých 1025 Pokémonov s vyhľadávaním, typovými výhodami, skladačom tímu a kvízom, v deviatich jazykoch.
O projekte
Osobný projekt z roku 2024, ktorý začal ako jednoduchý zoznam v Vue CLI. Neskôr som ho prerobil na rýchly Pokédex všetkých 1025 Pokémonov bez reklám, s dátami z PokéAPI.
Čo si môžete vyskúšať
- Vyhľadávanie podľa mena alebo čísla z ktorejkoľvek stránky; diakritika ani interpunkcia nevadí
- Filter až podľa dvoch typov a regiónu, triedenie a zdieľanie výsledku cez URL
- Stránky Pokémonov s ilustráciami, shiny verziami, štatistikami, typovými výhodami, evolúciami s podmienkami, útokmi, formami a zvukmi
- Skladač tímu, ktorý ukáže spoločné slabiny a pokrytie útokmi
- Zoznamy útokov, schopností a predmetov s vyhľadávaním; stránka každého útoku a schopnosti ukáže Pokémonov, ktorí ho poznajú alebo ju majú
- Porovnanie až troch Pokémonov, hra „Who's that Pokémon?“ a Pokémon dňa
- Mená v deviatich jazykoch, obľúbené s exportom a importom, tmavý režim, klávesové skratky a rýchle hľadanie (Ctrl+K)
Ako to funguje
- Dáta sa pribalia pri zostavení, takže vyhľadávanie a filtre nepotrebujú sieťové požiadavky
- Každá stránka je predgenerovaná s vlastnými meta tagmi, spolu asi 2 000 stránok vrátane sitemap
- Inštalovateľný a použiteľný offline (PWA s Workbox); obrázky sa načítavajú ako WebP z CDN, asi 10 kB každý
- Unit testy vo Vitest, end-to-end testy v Playwright s kontrolou prístupnosti, Lighthouse v CI, nasadenie na GitHub Pages
- Detaily Pokémona sa načítajú z REST API PokéAPI až pri otvorení stránky a service worker ich spolu s ilustráciami uchová 30 dní
- Skript obnoví dátové snímky z PokéAPI cez GraphQL, keď vyjdú nové hry
Zoznam zmien
- Vue CLI nahradil Vite
- Vue 3.2 na 3.5, Vue Router 4 na 5 a TypeScript 4.5 na 6
- Odstránené Axios a knižnica na stránkovanie
- Docker nahradili GitHub Pages
- Kedy
- 2024 – 2026
- Typ
- Osobný
- Verzie
- Vue 3.5
- Vue Router 5
- Vite 8
- TypeScript 6
- Technológie
- Vue
- TypeScript
- Vite
- PWA
- Vitest
Playwright- ESLint
- GitHub Pages
Galéria
