Overview
Pokédex is a front-end JavaScript application that uses PokéAPI data to display information on the original 151 Pokemon from the famous video game series. Users can then search for specific and filter specific pokemon.
Process & Context
Objective
Build a front-end JavaScript application from consumes third-party API data
Solutions:
- Build the front-end of the application using React.js that uses the database information to enable user interactivity.
- Use version control via GitHub to track changes to the project and host the original code.
Tools and Technologies
- HTML
- CSS/SCSS
- JavaScript
- Bootstrap
Front-End Process
- Using HTML, built the app's front-end to enable user interactivity.
- Using the Fetch API and PokéAPI , use a GET request to retrieve a JSON object containing Pokemon information.
- Using SCSS, style the API data using the CSS grid format
- Using GitHub Pages, deploy and manage the app's client-side server.
Reflection
Pokedex is a perfect and fun way to interact with API data and use said data in a way to add user functionality to an app. This is an integral skill that all software developers will use at some point in their career, if not on a daily basis.
Overcoming Challenges
The main challenge that I encountered when first developing this application was properly filtering the API data in conjunction with user search terms. Often times, searching for a specific Pokemon name would either not return the correct Pokemon or the performance of the filtering was not in line with good UX design.
After researching the MDN documentation, I fixed this issue by implementing the modern ES6 version of array filtering to update the Pokemon list in real time. This also fixed the issue where app performance was slow during this operation.
Duration
This project took about one week from start to finish. Most of the development time was spent on implementing the API data and how to display that information to the user.
Credits
- Role: Lead Developer
- Tutor: Jason Early
- Mentor: Tony Dominguez