susannaopal / react-interview-challenge-pokemon

Technical Interview Challenge React

This codebase is designed to provide technical challenges for interview practice.

The app should work (at minimum) like shown in the provided GIF after the bugs are fixed.

Pro-tip:

• To better emulate the experience of a technical interview, feel free to record yourself! You can see how long it takes you, you can review the spots that tripped you up, you can review how you are going about talking out loud about what you're doing.

Resources:

This app needs pokemon info and images when utilizing the form. Feel free to use:

• Name: Shaymin, Level: 30, image: https://assets.pokemon.com/assets/cms2/img/pokedex/full/492.png
• Name: Pikachu, Level: 80, image: https://static.wikia.nocookie.net/pokemon/images/6/6c/Char-pikachu.png
• Name: Pumpkaboo, Level: 10, image: https://assets.pokemon.com/assets/cms2/img/pokedex/detail/710.png

Challenge 1: the developer must fix the 3 bugs within the application.

Bug 1

• When the user clicks 'submit' on the form, the data does not update.

Bug 2

• A user should not be able to submit a pokemon without a name, level, or image

Bug 3

• When the user clicks the 'Home' button on the pokemon details page, they are not taken home. They should be taken to the home page and still see all caught pokemon.

Once you have completed this challenge, write up a reflection. What was the issue in each case? How did you identify the problem? How did you fix the problem? Is there another way you could have fixed the problem?

Challenge 2: the developer must add a new feature

Feature 1

• A user should not be able to add 2 pokemon with the same name.

Feature 2

• When a user clicks the delete button on an individual pokemon, they can delete a pokemon. (The developer may choose how to implement this and how to design it - but it must be functional and it must use the CSS structure that is already in place. Use the Tailwind CSS docs to figure it out!)

Feature 3

• When a user opens the application, the list of pokemon is pulled from their local storage (if it is there)

Feature 4

• When a user adds a new pokemon, that pokemon is added to their local storage. (the page should show the new pokemon based on local storage)

Once you have completed this challenge, write up a reflection. How did you decide to implement each feature? What information would you have asked an interviewer? Is there another way to do it?

To run the project:

• fork, clone, and cd into the repo.
• run npm install
• run npm start