Skip to content

Small web application that loads data from an external API and allows visualization of data points in detail. Created with HTML, Sass, Bootstrap, JavaScript and jQuery.

License

Notifications You must be signed in to change notification settings

gregoriodelasheras/pokedex-js

Repository files navigation

Logo

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
  1. About The Project
  2. Built With
  3. Design
  4. Final Reflections
  5. License
  6. Contact
  7. Acknowledgements

About The Project

App Screenshot

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.

Built With


Design

Color Palette

Color Palette

Pokémon images

The Pokémon images displayed in the app belong to the official artwork of Game Freak.

Example: Pokémon #104 Cubone


Pokémon #104 Cubone


Final Reflections

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.


License

Distributed under the MIT License. See LICENSE for more information.


Contact

Francisco Gregorio de las Heras: LinkedIn

Project Link: https://gregoriodelasheras.github.io/pokedex-js/


Acknowledgements

This project was done as part of CareerFoundry's Full-Stack Web Development Program (Project 1 - JavaScript App).

About

Small web application that loads data from an external API and allows visualization of data points in detail. Created with HTML, Sass, Bootstrap, JavaScript and jQuery.

Topics

Resources

License

Stars

Watchers

Forks