Planning the react pokedex

Having had no prior react experience this project was proving quite a challenge as I wasn't able to fall back on past knowledge. From such I found this project the hardest as it was learning something completely new and applying that learning.

Like with all problems though the best way to start is to plan an action of attack.

What should it do?

As previously stated I had acquired the json file of all competitive pokemon movesets and wanted users to be able to view them save them for later.

Spoiler alert we didn't manage to do that as it was taking me far too long to do the basics.

So the functionality I settled on was that it would be a card like list that featured the full 1010 entries that would load on a 24 card basis.

If a user clicks on a pokemon a modal will appear with its name, stats and the option to add to favourites. If the pokemon is already in favourites the button will change to remove and users can delete its entry. There will be a favourites page where users can view their favourited pokemon.

Getting started

With the functionality plan sorted it was time to start. First step creating a new react app in my console and installing the relevant node modules such as router for the navigation.

Initially I started building everything out in the App.jsx component which I came soon to realise would be a headache to transfer everything.

I shortly changed to the page approach and had a Pokedex and Favourites page. With the structure sorted it was time to plan the components.

Components

The components I created for this app were the:

Header
Footer
Individual pokemon cards
Load more button
Pokemon modal
Modal background overlay
Favourited pokemon modal

I know looking at the list you can see a double up on the modal and then a modal overlay sitting there as well but how I had set up the initial modal made it much harder for that functionality to work for the favourited section.