Building a Pokemon Card Collection with React and Chakra UI

In this tutorial we will learn how to use the PokeAPI to fetch data about different Pokemon, create a visually appealing user interface with Chakra UI, and manage state using React hooks.

Step 1: Start with Basic UI Layout

In this step, we'll start by creating the basic UI layout using the components from the Chakra UI library.

import { Button, Box, Heading, Flex } from "@chakra-ui/react";

function App() {
  return (
    <Box p="6">
      <Heading mb="6" textAlign="center">
        My Pokemon Collection
      </Heading>
      <Flex justifyContent="center">
        <Button>Show Pokemon</Button>
      </Flex>
      <Flex mt="6" flexWrap="wrap" justifyContent="center">
        <Box color="white" backgroundColor="black">
          Card
        </Box>
      </Flex>
    </Box>
  );
}

export default App;

Step 2: Make a card show and hide when click button

Now, let's add some functionality to our button. When the button is clicked, it should toggle the visibility of the card. We will use the useState hook to manage the state of our Pokemon cards.

import { Button, Box, Heading, Flex } from "@chakra-ui/react";
import { useState } from "react";

function App() {
  const [showData, setShowData] = useState(false);

  const handleButtonClick = () => {
    setShowData(!showData);
  };

  return (
    <Box p="6">
      <Heading mb="6" textAlign="center">
        My Pokemon List
      </Heading>
      <Flex justifyContent="center">
        <Button colorScheme="teal" onClick={handleButtonClick}>
          {showData ? "Hide Pokemon" : "Show Pokemon"}
        </Button>
      </Flex>
      {showData && <Box>Card</Box>}
    </Box>
  );
}

export default App;

Step 3: Fetch data and show on cards

Now that we have set up our layout and added the button functionality, let's move on to fetching data from the PokeAPI and showing it on the Pokemon cards.

First, we will use the useState hook to create a state variable to store the data that we fetch from the API.

import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);
  const [showData, setShowData] = useState(false);

  // ...
}

Next, we will use the useEffect hook to fetch data from the PokeAPI. We will make a GET request to the endpoint https://pokeapi.co/api/v2/pokemon and convert the response to JSON format using the json() method. Then, we will use the setData method to set the data state variable to an array of Pokemon objects.

useEffect(() => {
  fetch("https://pokeapi.co/api/v2/pokemon")
    .then((res) => res.json())
    .then((data) =>
      setData(
        data.results.map((result) => ({
          id: result.url.match(/\/([0-9]*)\/$/)[1],
          name: result.name,
          image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
            result.url.match(/\/([0-9]*)\/$/)[1]
          }.png`
        }))
      )
    );
}, []);

In this code, we use the map method to transform the results from the API into objects that contain the Pokemon's id, name, and image URL. The id is extracted from the Pokemon's URL using a regular expression. The image URL is constructed using the Pokemon's ID.

Finally, we will update our JSX to display the Pokemon cards. We will use the data state variable to render a Box component for each Pokemon. We will use the Image component to display the Pokemon's image and the Heading component to display the Pokemon's name. We will also add some styles to make the cards look more visually appealing.

import { Button, Box, Image, Heading, Flex } from "@chakra-ui/react";

return (
  <Box p="6" backgroundColor="#03001C">
    <Heading mb="6" textAlign="center" color="white">
      My Pokemon Collection
    </Heading>
    <Flex justifyContent="center">
      <Button colorScheme="teal" onClick={handleButtonClick}>
        {showData ? "Hide Pokemon" : "Show Pokemon"}
      </Button>
    </Flex>
    <Flex mt="6" flexWrap="wrap" justifyContent="center">
      {showData &&
        data.map((result) => (
          <Box
            key={result.id}
            boxShadow="0 0 10px 3px rgba(0, 128, 128, 0.5)" // add a teal shadow
            rounded="md"
            overflow="hidden"
            mx="4"
            my="2"
            _hover={{ boxShadow: "lg" }}
            transition="box-shadow 0.2s"
          >
            <Image src={result.image} alt={result.name} />
            <Box p="4">
              <Heading
                as="h3"
                size="md"
                textAlign="center"
                color="whiteAlpha.800"
              >
                {result.name}
              </Heading>
            </Box>
          </Box>
        ))}
    </Flex>
  </Box>
);

The final result should be a web page that displays a list of Pokemon cards, which can be toggled using a button.

See live https://knth2i.csb.app/