Pokedex

Features

• View the first 151 Pokemon from the home page
• Select a Pokemon and view their stats on a new screen
• Search Pokemon by name or number
• When applicable, show and select the Pokemon’s evolution family

Technologies used

• React Native
• Expo
• Pokemon API
• Axios

Pros to this approach

• I used an Expo-managed workflow to quickly get started.

Cons to this approach

• Lots of dependencies
• The Pokemon API does not have images

Challenges to note

1. Getting the list of the first 151 Pokemon

2. Learning how to use the Pokemon API

3. Making assumptions about the user

1. Getting the list of the first 151 Pokemon

This project was originally started in April 2021.

I created a custom hook which makes a request to the Pokemon API. The function showInitialList() is called inside useEffect, then the function is exported from getFullList.js. An array containing the results state, the function, and error message is returned, and these are imported into the Grid component.

In the Grid component I iterate through the results and return a JSX element for each Pokemon using FlatList. This makes each Pokemon a navigation button. Clicking a Pokemon redirects the user to the Stats screen and shows data such as Pokemon type, battle moves, strengths, and weaknesses.

The Grid component is rendered in the Home screen, below the Search bar component.

2. Learning how to use the Pokemon API

The API is built in such a way that for each type of data I want to fetch (ex. Evolutions, species, types…), sometimes the endpoints and the structure returned would be different. I needed to create a custom hook for each data type in order to keep the states separate. In addition, this would make it easier to run unit tests.

Another challenge with the API is that it doesn’t readily serve images. Understandably, this is probably because it would burden their servers with the numerous developers calling their endpoints to request images, given that there are nearly 1000 Pokemon. My workaround was to use another site’s endpoints to serve images.

The problem with using a different endpoint to serve images is that sometimes, especially for newer generations of Pokemon, the image is not yet available.

3. Making assumptions about the user

When the user enters a query into the search bar, the app is currently assuming that the user knows what they’re looking for - correct spelling of the Pokemon name, or using a valid National Pokedex number. In the future I have plans to improve the search function to make suggestions, validate the ID, and improve form input validation overall.

To be continued…