enKontakt

Pokedex

Interaktywny Pokedex na ponad 1000 pokemonów w czystym JavaScript (OOP), oparty o PokéAPI – z przemyślaną kolejnością ładowania danych i lokalną bazą w przeglądarce.

  • JavaScript (ES6+)
  • OOP
  • PokéAPI
  • LocalStorage
  • bez frameworków
Zobacz na żywo Kod na GitHubie
Pokedex – lista pokemonów z paginacją
  • 2024rok realizacji
  • Soloprojekt własny – od pomysłu po wdrożenie
  • 1000+pokemonów z PokéAPI, ok. 60–70 zapytań zamiast ponad 1000
  • Vanilla JSbez Vue, Reacta i innych frameworków – własne klasy w czystym JavaScript

O projekcie

Co zbudowałem

Interaktywna encyklopedia pokemonów obsługująca ponad 1000 stworzeń – napisana w czystym JavaScript (ES6+, wzorce OOP), bez frameworków, w oparciu o publiczne PokéAPI.

Najważniejsze cechy

  • Przemyślana kolejność ładowania danych z PokéAPI – równoległe zapytania przez Promise.all
  • Lokalna baza w przeglądarce (LocalStorage + SessionStorage) – raz pobrane dane nie idą drugi raz do API
  • Modułowa architektura klas (DataManager, DataBuilder, StorageManager, PokemonDialog) przygotowana pod migrację do Vue 3
  • Responsywna, dwukierunkowo synchronizowana paginacja z odwzorowaniem stanu w URL
  • Jasny i ciemny motyw (też automatyczny, według ustawień systemu)

Jak to wygląda

Zrzuty z działającego projektu – kliknij zrzut, żeby go powiększyć.

  • Lista – ponad 1000 pokemonów, numer strony zapisany w adresie (?p=)
  • Telefon – karta pokemona otwarta nad listą w dwóch kolumnach
  • Karta pokemona – nazwa, typy i generacja od razu z pamięci, statystyki dociągane z API
  • Ustawienia – motyw, import i eksport złapanych pokemonów, czyszczenie danych

1 / 4

Lista pokemonów z paginacją

Lista – ponad 1000 pokemonów, numer strony zapisany w adresie (?p=)

← Wszystkie projekty