Skip to content

Latest commit

 

History

History
32 lines (23 loc) · 2.58 KB

README.md

File metadata and controls

32 lines (23 loc) · 2.58 KB
Raw

08 Assignment 2 - A Pokédex

In this assignment, you must create a Pokédex using React! A Pokédex is a catalog of Pokémon, that a trainer can browse to get detailed information about any Pokémon.

Pokédex

Requirements:

  • Pokémon information must be retrieved from PokéAPI, which you should already be familiar with.
  • The Pokédex must display a list of Pokémon and support simple pagination (e.g. “next” and “previous” buttons to get the next/previous page of Pokémon), such that not all Pokémon are displayed at the same time.
  • When a user clicks on a specific Pokémon, additional information about that Pokémon must be displayed. E.g. type(s), stats, abiltities, height and weight.
  • The application must contain multiple pages (e.g. "pokedex" and "about") and utilize React Router to route between them.
  • The application must be developed using the Create React App toolchain.

Feel free to expand on the requirements.

Handin instructions:

  • Your Pokédex must be hosted on Github Pages. Follow this guide for instructions on how to deploy your React App.
  • On itslearning, hand in a link.txt file containing the link to your Pokedex hosted on GitHub Pages.

The assignment can be developed alone or in groups of 2-4 and is evaluated on an approved/not approved basis. It must be approved in order to attend the course exam.

Display hints...

Before writing any code, consider making a sketch of your UI and split it into React components using the approach described in the article "Thinking in React".

This previous exercise should give you a good idea of how to fetch data from the PokeAPI.

For pagination, you can apply "limit" and "offset" query parameters to the endpoint, e.g: "https://pokeapi.co/api/v2/pokemon/?limit=20&offset=0". This specific query will return the 20 first pokemon. To get a specific page, change the offset to limit * pageNumber.

For routing to work on Github Pages, make sure you are using createHashRouter instead of createBrowserRouter [more info].