Pokédex is a web app to get a list of all Pokémon from an external API. It allows the user to search for a particular Pokémon and view their details and stats. It also allows the user to add their favourite Pokémon to a favourites list and gain access to that list immediately. The app also allows the user to view and search a particular generation of Pokémon. It is intended to be a companion app to the handheld games.
For a Final Year assignment, I had to use an external API to retrieve information and develop a Front-end web app using the API data. I came across the Pokémon API (PokéAPI) and I decided to create a Pokémon list app, otherwise known as a Pokédex.
Using the HTML5 Fetch API, I was able to retrieve data from the API and using JS loop through the data and dynamically add them to the DOM. There is over 1000 Pokémon, so I implemented a pagination, which internally it loads all the Pokémon, but then only displays an arbitrarily set maximum of Pokémon. The next page is then calculated for the load more button.
I have used the HTML5 Web Storage to store the retrieved API data, so that the API server isn’t being accessed multiple times in the app and will use the data in web storage if it exists. It is also used to for the favourites. Favouriting a Pokémon will add that Pokémon to the storage array, and likewise unfavouriting will remove the Pokémon from the array. Because the local storage is used, the favourite list can be dynamically populated from it, and likewise on page reload the favourite icon will change accordingly to show it’s already been favourited.
I’ve used Sass via NPM to flexibly create the CSS in a clean and organised way, with the BEM methodology to make the CSS easier to read and maintain.
I implemented a flexible fuzzy search so that as soon as a character is typed, the app will search for any Pokémon that contains that character. The search is quite advanced in that inputting a letter will search the Pokémon names, but inputting a number will search the Pokémon numbers.
I am really pleased with how the app is come together. Both the design and the functionality is satisfying, and I enjoyed developing it.
—