The main inspiration for this site was Serebii and Bulbapedia. I wanted to create something similar to them. When looking through free APIs, I came across the Poke API. After reading its documentation and getting a better idea of how the API worked, I knew this API was perfect for this form of application.

The hardest part of any application is knowing where you want to go. I started figuring this out by taking inspiration from Serebii. I used this to start my design process. I start from the mobile view and building up to desktop. This allows me to add in more content as the screen gets bigger. From the start, I wanted to have light and dark mode for the site. I used TailwindCSS for styling and they make it easy to do this.

In tailwind, you have a configuration file. In the configuration, you can set the property darkMode to"class". What this does is activate dark mode by putting a class of dark on the body. A toggle component is all that was needed to add or take away the dark mode.

The pokedex page is the most complex of the pages on the site. It uses two types of filtering to display the data you want. You can filter by a Pokemon's name or by its type. Each type of filtering can work alone or be used in conjunction with the other.When you find the pokemon you want to know more about, just click on its row and you'll be taken to its page.

Every Pokemon page is dynamically generated. This was done by using React Router. When the rows on the pokedex page are created, the link points to a page associated with their id. React Router provides a hook called useParams(). We are able to pull this id from the URL and make a request to the API.

Challenges

There were a lot of challenges that went into getting the data I needed.

• Follow up requests to get information about evolutions were needed.
• Some evolutions had branching paths that needed accounted for.
• Sometimes flavor text (descriptions) of pokemon wouldn't be in English, despite basically every other entry being English at the same index.

Once having the data, I wasn't out of the woods yet. The data that was extracted needed to be formatted properly. Some of the data that need formatted was:

• Dex numbers could go up to triple digits. So, one or two digit numbers needed zeros pre-pended to them. A hash # also needed to be pre-pended after the zeros were added.
• Weight and height needed to be divided by 10 and rounded to one decimal place to accurately reflect the stats.
• A pokemon's stats like special defense would be received AS special-defense. This needed to be converted to SP. DEF.
• Some data would have a hyphen - between words. The hyphens needed to be replaced with spaces.

• Additional Information and interconnected pages
• Replace Create React App with Next.js
• Update UI
• Update state management