The Pokemon App is an Angular application that uses the Poke API to load and filter through Pokemon Cards. This is Challenge #4 from NUWE's IT Academy - Lliga de Programació.
In this project I used Angular and Boostrap5 to develop a web app that initially loads 24 Pokemon Cards with Angular's Http Client and upon clicking any of the cards the user is presented with basic stats, specie's information, and evolution chain of the chosen Pokemon. The front page allows users to search by name of the loaded Pokemon and to filter Pokemons by types with different tag toggles. The background color of the cards as well as the border colors of the tags correspond to the 20 different pokemon types with Angular's NG class directive and conditional styling. The site is fully-responsive through the use of Bootstrap5 breakpoints.
In this project I learned how to handle multiple API calls asynchronously, and how to implement filtering processes through string search and toggling tags. These filtering processes were developed in separate components with data shared through Angular services. Also due to the breadth of the Pokemon APIs with a large hierarchy of nested objects, I learned how to break down the accessing of information, and to logically create intermittent API calls once an earlier API call finished.
-
Load additional Pokemon card through bottom "Load More Pokemons" button or implementing infinite scrolling.
-
Global search function that allows user to search all possible Pokemons rather than just the loaded Pokemons.
-
Implement unit tests to ensure filtering function works exactly as intended.
-
Additional styling to cards.
-
Refactor the code.
This project was generated with Angular CLI version 14.0.1.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Clone or fork the Repo, and ensure that you have the Angular CLI installed.
In the project directory.
npm installIn the project directory.
ng serve --openUpon starting live server, 24 Pokemon cards will load. type in the name of the Pokemon you want to find in the search field, and the page will change accordingly to find your match. Click on any of the tags below to filter the pokemon by its type. Click on any of the cards to view that Pokemon's stats.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.