How to make Pokemon App in React

How to make Pokemon App in React | with complete source code

Hey guys,

In this tutorial, we will learn How to make Pokemon App in React. I am sure in your childhood you saw the Pokemon Anime. And you are probably a lover of this show. I am also a fan of this show. To refresh our childhood memories, we will make a Pokemon app that shows information about pokemon. This app will show pokemon images, names, types, and moves with a responsive layout.

We will learn many things in this project such as react components, Axios library, react hooks, etc.

So, without any further delay let's start.

Preview GitHub

Technologies and frameworks used in this app

This app doesn't contain a lot of libraries and frameworks. We use some basic things in the project.

Here is the list of frameworks and libraries used in the project:-

Vite JS - Used to create react app. It is a build tool used to make applications faster. You are free to install react app using a regular web pack such as "create-react-app".
Tailwindcss - A CSS framework that reduces your time in designing the application. Used in place of regular CSS.
Axios - A JavaScript library used to make HTTP client requests easily. You can also use a simple fetch API method to call the pokemon data from pokemon api.
Hero icons - A react icon library used to add icons in the pokemon app.

Suggested for you

How to create a react app using Vite js and tailwind CSS

Project Set up

To set up the project, follow the steps given below:-

Create React app using Vite JS.
Install Tailwindcss and connect it to the application correctly.
Now, install the libraries named "Axios" and "Hero icons" used in the project.
After setting up the project, Create a folder named "components" in the "src" folder.
Then make two files named "PokemonMoves.jsx" and "PokemonType.jsx" in the "components" folder.
That's it we did it.

Now let's create our app.

Adding code to the "App.jsx" file

Clear all of the previous code of the App.jsx file. Then copy the react source code given below and paste it into the "App.jsx file.

"App.jsx" source code:-

import React, { useEffect } from "react";
import { useState } from "react";
import PokemonType from "./components/PokemonType";
import PokemonMoves from "./components/PokemonMoves";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
import axios from "axios";

function Axios() {
  const [num, setNum] = useState(1);
  const [pokemonData, setPokemonData] = useState("");

  useEffect(() => {
    async function getData() {
      try {
        const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`);
        await setPokemonData(res);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, [num, ""]);

  return (
    <div className="w-full  flex items-center  flex-col font-sans text-slate-700">
      <h1 className="font-bold text-3xl m-2">Pokemon Info</h1>
      <div className=" w-full h-28 flex items-center justify-center  m-2 bg-slate-700">
        <ChevronLeftIcon
          onClick={() => {
            if (num > 1) {
              setNum(num - 1);
            }
          }}
          className="h-6 w-6 text-white hover:text-green-400 font-bold"
        />
        <div className="w-fit h-6  rounded mx-3 text-3xl font-medium  flex items-center justify-center text-yellow-300">
          {pokemonData ? pokemonData.data.name : "bulbasaur"}
        </div>
        <ChevronRightIcon
          onClick={() => {
            setNum(num + 1);
          }}
          className="h-6 w-6 text-white hover:text-green-400"
        />
      </div>

      <div className=" flex justify-center items-center sm:items-start flex-col sm:flex-row px-2 rounded w-full">
        <div
          className=" border w-full h-72 sm:w-[40%]  mx-2 grid place-items-center bg-no-repeat bg-contain bg-center"
          style={{
            backgroundImage: `url('${
              pokemonData
                ? pokemonData.data.sprites.other.dream_world.front_default
                : "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg"
            } ')`,
          }}
        ></div>

        <div className="flex items-center flex-col w-full sm:w-[60%] border">
          <div className="flex justify-start flex-col  w-full mb-1">
            <div className="text-sm font-medium">Pokemon Type:</div>
            <div className="w-full flex flex-wrap justify-center">
              {pokemonData
                ? pokemonData.data.types.map((currentValue, index) => {
                    //console.log(currentValue);
                    return <PokemonType typeObj={currentValue} key={index} />;
                  })
                : "none"}
            </div>
          </div>
          <div className="w-full h-fit ">
            <div className="text-sm font-medium">Moves:</div>
            <div className="flex justify-center items-center flex-wrap overflow-x-hidden">
              {pokemonData
                ? pokemonData.data.moves.map((currentValue, index) => {
                    // console.log(currentValue);
                    return (
                      <PokemonMoves moveObject={currentValue} key={index} />
                    );
                  })
                : "none"}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Axios;

Understanding the code

When you try it yourself you can understand it easily. But for your completeness, I told you about the code.

Here an API is used to fetch pokemon data. Every pokemon has an index number. We fetch pokemon data by changing the index number in the URL of pokemon API. So, use the useEffect hook which calls a function on the loading window and on changing the index number. This function set pokemon data in the useState variable named "pokemonData". later we display data in all components. Functionality was also added to the code that changes the pokemon index value. So that we can change the pokemon's data.

We also add two components in the main files from the other files which are "PokemonType" and "PokemonMoves".

All set, Now it is time to add the other two files.

Suggested for you:-

Adding code to the "PokemonType.jsx" file

Now we display the types of pokemon. You need to copy the code given below and paste it into the "PokemonType.jsx" file.

"PokemonType.jsx" source code:-

import React from "react";

function PokemonType(props) {
  return (
    <>
      <div className=" w-fit h-fit px-1 text-white font-medium rounded bg-green-400 m-1">
        {props.typeObj.type.name}
      </div>
    </>
  );
}

export default PokemonType;

Understanding the code

There is no hard code here. You can understand it easily. This component can take the pokemon type as props and returns it in a div.

We added pokemon type to the app file. Now let's display pokemon moves.

Adding code to the "PokemonMoves.jsx" file

To display pokemon moves we have to add the code to this. You just need to copy the code given below and paste it into the "PokemonMoves.jsx" file.

"PokemonMoves.jsx" source code:-

import React from "react";

function PokemonMoves(props) {
  return (
    <div className="w-fit h-fit px-1 bg-rose-500 rounded m-1 text-white font-medium">
      {props.moveObject.move.name}
    </div>
  );
}

export default PokemonMoves;

Understanding The code

This component takes the pokemon moves as props and returns every pokemon move in a div styled with tailwindcss.

We completed our project successfully.

Now enjoy the code.

Conclusion

I am sure this project refresh your child memories and gives you a lot of fun. This project also improve your coding skills. If you learned something new in the article "How to make pokemon app in react", make sure to share this article with your friends. Also give us your feedback in the comment section. It means a lot for us.

If you have any query tell us in the comment section. We will definitely try to solve it.

Thank you!

Code Armor

How to make Pokemon App in React