DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Build Pokemon Finder using React and Pokeapi
Fidal Mathew
Fidal Mathew

Posted on • Updated on

Build Pokemon Finder using React and Pokeapi

Hi folks, hope you are doing good. In this post, we are going to build a Pokedex (app to give information about pokemon for it's name) using React.js.

Pokedex Project

Node Packages Required -
β€œAxios”: npm i axios

API endpoint :- https://pokeapi.co/api/v2/pokemon/${Find}

Example:- https://pokeapi.co/api/v2/pokemon/pikachu

Get Started :

Let’s create our react app with create-react-app pokedex-app
Run npm start to check if your app is up and running.

After setup, clean App.css

Index.js -

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("root")
);


Enter fullscreen mode Exit fullscreen mode

Create a new Component named PokeAPI.jsx or PokeAPI.js
(using β€œjsx” notifies the editor that you are working with react, and provides better suggestions)

Include the component in the App.js file,

import PokeAPI from './PokeAPI';
import './App.css';

function App() {
  return (
    <>
      <PokeAPI/>
    </>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

API Info :

Let’s look at the information we are going to need via API.

We need the name, picture, and pokemon type.
Eg: https://pokeapi.co/api/v2/pokemon/pikachu

There is a ton of information available for each pokemon -

If you take a look, you can find
Image at ->sprites.front_default
Type at ->types[0].type.name

Main Program -

PokeAPI.jsx

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function PokeAPI() {
  const [name, setname] = useState("");
  const [Find, setFind] = useState("pikachu");
  const [Img, setImg] = useState("");
  const [Type, setType] = useState("");

  useEffect(() => {
    async function getData() {
      let res = await axios.get(`https://pokeapi.co/api/v2/pokemon/${Find}`);
      console.log(res);
      setImg(res.data.sprites.front_default);
      setType(res.data.types[0].type.name);
    }

    getData();
  }, [Find]);

  const Typename = (event) => {
    setname(event.target.value);
  };

  const Search = () => {
    if (name !== "") setFind(name);
    setname("");
  };

  return (
    <>
      <div className="back">
        <div className="card">
          <img src={`${Img}`} alt="" />
          <div className="name">{Find.toUpperCase()}</div>

          <div className="type">{Type}</div>

          <input type="text" onChange={Typename} value={name} />

          <button onClick={Search}>Search</button>
        </div>
      </div>
    </>
  );
}



Enter fullscreen mode Exit fullscreen mode

UseState variables:

We need 4 useState variables -

  • name - Update user input
  • Img - Update image
  • Type -Update pokemon type
  • Find - Update the API url

Program Explanation :

  1. On user input, will call a function β€œTypename()” to keep the name updated.
  2. On submit, Search() is called, and "Find" value is updated if it’s not null.
  3. We have used a useEffect Hook to change β€œimg” and β€œtype” when the β€œFind” value is updated. By default on reload, the Find is set to β€œpikachu”.
  4. Inside useEffect, we are fetching the data from API, via axios.get(β€œapi-endpoint-url”) and store it in res, and later update images and the pokemon-type.

I hope you liked this small project.
Thank you for reading!

Source Code - https://github.com/FidalMathew/Poke-Dex

Top comments (8)

Collapse
 
suyashvash profile image
Suyash Vashishtha

That's a Nice app idea for React js beginners to get Started with Rest API's and hooks. Great work mate.

Collapse
 
fidalmathew profile image
Fidal Mathew

Thanks a ton!! :)

Collapse
 
mfurmaniuk profile image
Michael • Edited on

Wonder if I can get my kids into this, though they'd just ask where they can find them in Go

Collapse
 
fidalmathew profile image
Fidal Mathew

Sure!πŸ˜‚
All the best! I feel nostalgic when I think about pokemon :)

Collapse
 
kidxs profile image
Angelo Geant Gaviola

Awesome small project! Thanks for sharing this with us Mathew!

In my opinion, this is a great small project to learn how to consume data from APIs.

Collapse
 
fidalmathew profile image
Fidal Mathew

Glad you liked it! πŸ˜„

Collapse
 
kasiriveni profile image
Srinivas Kasiriveni

Nice app

Collapse
 
fidalmathew profile image
Fidal Mathew

Thank you! I'm glad you liked it :)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!