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
  • SCSS
  • 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 – kilkadziesiąt zapytań zamiast ponad 1000
  • Vanilla JSbez Vue, Reacta i innych frameworków – własne klasy w czystym JavaScript

Co zbudowałem

Pokedex to mój pierwszy większy projekt w JavaScripcie. Pisałem go równolegle z kursem i chciałem zrobić coś trudniejszego niż kolejną listę zadań. Wyszła interaktywna encyklopedia ponad 1000 pokemonów – w czystym JavaScripcie (ES6+, wzorce OOP), bez frameworków, na publicznym PokéAPI. W trakcie co chwilę wpadałem na nowe pomysły – złapane pokemony, eksport między przeglądarkami, motywy – i nie zawsze kończyłem jeden, zanim zacząłem następny. Dlatego zrobiłem listę i zacząłem wdrażać zmiany etapami – każdy nowy pomysł trafiał na listę „do zrobienia”, zamiast odciągać mnie od tego, co akurat robiłem.

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)
  • Złapane pokemony – zaznaczanie w karcie pokemona, import i eksport listy w ustawieniach

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=)

Case study i wpisy

Jak to powstało, co poszło nie tak i czego się nauczyłem.

javascript

Pokedex – kilkadziesiąt zapytań zamiast ponad tysiąca

Jak w czystym JavaScripcie zbudowałem Pokedex na ponad 1000 pokemonów – z kolejnością pobierania danych z PokéAPI i małą bazą w przeglądarce.

← Wszystkie projekty

Masz projekt do zrobienia?

Albo szukasz kogoś do zespołu? Napisz kilka zdań – odpowiem w ciągu 72 godzin.

Imię, e-mail i treść wiadomości wykorzystam tylko po to, żeby odpowiedzieć. Szczegóły w polityce prywatności.