Just another Pokédex App built with HTML, CSS and JavaScript, which uses an external RESTful API. Minimalist and lightweight, this Pokédex is a new alternative to find information about each Pokémon quickly, accurately and reliably.
Table of Contents
Objective:
- Build a small web application with HTML, CSS, and JavaScript that loads data from an external API and enables the viewing of data points in detail.
User Stories:
- As a user, I want to view a Pokédex and see more data for a particular Pokémon on request.
- As a user, I want to be able to choose which generation of Pokémon I want to see.
- As a user, I want to see a Pokédex that displays the most important data, with a minimalist and simple interface.
Key Features:
- Load data from an external source (PokéAPI).
- View a list of items.
- On user action, view details for that item.
The Pokémon images displayed in the app belong to the official artwork of Game Freak.
Example: Pokémon #104 Cubone
For this project I took the role of developer. I was in charge of coding the application and optimizing its performance.
This is the first project I did for CareerFoundry's Full-Stack Web Development Program. The process was rewarding, as I was able to deepen the skills I already had before starting the course (HTML, CSS, JavaScript and manipulating data from an API), and apply them in the development of a web application that I thought was very interesting from the beginning: a Pokédex. As a fan of the Pokémon video game saga and programming, this project was a perfect place to start.
During the development process I learned to use the jQuery library, which although it is not so widely used nowadays, it is still in use in several projects. In addition, I was able to deepen in the use of Bootstrap and update myself to use its most recent version at the time the app was programmed (v5.x).
The most interesting and challenging part was, without a doubt, using an external API and all the process involved. Diving for a couple of hours into the documentation to understand how it works, testing how to get the data from it, and then analyzing the best way to display it to the user was an enriching experience. Also, from a UI/UX perspective, I had to consider the best way to display all that huge amount of information so that the app would be pleasant, minimalist and easy to use for the users.
To finish, I can conclude that this project was a great way to take my first steps as a web developer. Not only for making use of the mentioned technologies, but also for allowing me to go deeper into the GitHub workflow, the best practices to maintain a clean, readable and scalable code, and generate proper documentation.
Distributed under the MIT License. See LICENSE for more information.
Francisco Gregorio de las Heras: LinkedIn
Project Link: https://gregoriodelasheras.github.io/pokedex-js/
This project was done as part of CareerFoundry's Full-Stack Web Development Program (Project 1 - JavaScript App).
- Project tutor: Itua Akhator
- Project mentor: Vinh-Tuong Mai