10/06/2022, 12:02 React Pokatamon - HackMD

React Pokatamon
Write a form where users can enter the pokemon name
and your app fetches and displays that pokemon’s data
Fetch pokemons with GraphQL (https://graphql-pokemon2.vercel.app/) or
Rest API (https://pokeapi.co/)
When a request hasn’t been made yet, show “no
pokemon yet, please submit a pokemon!”
While fetching the pokemon data, show a loading screen
Display the pokemon data as soon as it arrives
When something goes wrong (like a network error, or a
pokemon not existing in the database), the error should
be displayed at the bottom of the search bar.
There should be a button to try again after an error. Upon
clicking this, the “no pokemon yet, please submit a
pokemon”! will be shown and the current string on the
search bar would be removed.
After an error, the user should be able to use the search
bar to search for a new pokemon without having to click
the try again button.
Hints
Codesandbox (https://codesandbox.io/s/youthful-cerf-nel1jy)
Graphql query show (https://hackmd.io/c7MZxXEzQW-TgpblbofoLA)
REST API link (https://pokeapi.co/)
Example UI

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 1/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 2/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 3/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 4/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 5/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 6/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 7/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 8/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 9/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 10/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 11/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 12/13
10/06/2022, 12:02 React Pokatamon - HackMD

https://hackmd.io/4J8k0z6-SJyI0FgFF_rnVA 13/13