Building a Pokemon Card Collection with React and Chakra UI
Tags: javascript, tutorial, react, webdev
Published: 2023-03-09 23:25:27


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.

```javascript
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.


```javascript
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.


```javascript
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.


```javascript
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.

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


```javascript
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/


![pokemon collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpaw0eurjfpxwa2u2b6k.png)