Scribd
Upload
32 views13 pages

React Pokatamon - HackMD

The document describes building a React application for searching Pokémon data. Users can enter a Pokémon name to fetch its data via GraphQL or REST APIs. When loading, a message is shown. On success, the Pokémon data is displayed. On error, the error is shown with a try again button to clear the search and message. The UI includes a search bar, loading indicator, Pokémon display, and error message.

Uploaded by

Santiago Llanos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views13 pages

React Pokatamon - HackMD

The document describes building a React application for searching Pokémon data. Users can enter a Pokémon name to fetch its data via GraphQL or REST APIs. When loading, a message is shown. On success, the Pokémon data is displayed. On error, the error is shown with a try again button to clear the search and message. The UI includes a search bar, loading indicator, Pokémon display, and error message.

Uploaded by

Santiago Llanos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like