SDI Blended Weekly Workshop: React Hooks

For this activity, you will fulfill the following requirements:

FIRST STEP:

Fork & clone this repository

Repo Directions

• Navigate into the front-end directory and run the command npm install to install the necessary dependencies.
• Run the command npm start to start the React server on port 3000.

Project Specs

You will create a pokedex single page application using React Hooks and create-react-app. Please use the PokeAPI we have seen throughout the previous units.

Use the following user stories to guide your development:

1. As a user, I should be able to navigate to the home page and see a list of the first 151 Pokemon, including their pictures, so that I can review the pokemon.
2. As a user, I should be able to click on a pokemon’s picture that directs me to a view that provides additional information about that pokemon, so that I can learn more about an individual pokemon.
   • This detailed view page should contain basic information about the Pokemon, such as flavor text, height and weight, types, base stats, and moves that the Pokemon is able to learn.
3. As a user, I should be able to click a button from the detailed view of a Pokemon to go back to the original list of Pokemon.
4. As a user, I should see a loading spinner when waiting for the page to load instead of seeing the pictures load piecemeal.

Your application should:

• Utilize the following React hooks in functional React components:
  • useState
  • useEffect
  • useContext
  • Custom hooks
• Be styled to look similar to the images below

Stretch Goals

1. Implement a filter menu on the main Pokedex page that allows users to filter Pokemon by their types.
2. Implement a search feature that allows users to search for specific Pokemon and gracefully handles any errors. This feature should implement the useReducer hook
3. Write unit and integration tests for your application

this is a silly line