React Project – Pokemon App Using PokeAPI
Greetings from the best Pokemon companion app! With the help of this cutting-edge program, you can immerse yourself in the Pokemon universe and have a thorough and immersive experience thanks to the Poke API.
Explore a sizable database that details hundreds of Pokemon species, including types, evolutions, moves, and abilities. You can properly plan and assemble your ideal squad by reviewing each Pokemon’s comprehensive statistics and pictures. Enjoy an easy-to-use layout with simple search options and navigation that makes it simple to find your favorite Pokemon.
Whether you’re a seasoned Trainer or a newcomer to the Pokemon world, this app is your indispensable companion on your journey to becoming a Pokemon Master.
About React Pokemon App
POKEAPI provides a detailed RESTful API that enables us to effortlessly access detailed information about Pokémon. This includes data like names, types, and images, as well as more advanced-level properties like abilities, evolutions, and move sets. By clicking into POKEAPI’s big database, we can unleash the ability to create dynamic applications that bring these captivating creatures to life.
Prerequisite For React Pokemon App
- React library
- API integration from API to frontend
Download React Pokemon App Project
Please download the source code of the React Pokemon App Project Code: React Pokemon App Project Code.
About installation steps
Download the Visual Studio from the provided link.
On the download page, you can choose the appropriate installer for your operating system (Windows, macOS, or Linux). Once installation is done, follow the steps step by step.
For the installation of React, I have explained some of the steps as follows:
1. The first step is to download the node( as it will help to install react) from the below link:
The LTS version is recommendable: Node.js
2. Now, check the version of the node in Windows by following the command on the terminal:
node --version or node -V
Also, check the npm version using the following command as it is a tool to download the react
npm --version
3. Now, create one folder on the desktop as react, open the terminal inside the react app, and go to the react folder using the following command as `cd react` and run the command:
npm init react-app myapp
4. pokemonapp is created, go inside the pokemonapp folder using the command `cd pokemonapp` and then npm start and boom react will run the browser.
Your app react has been successfully installed, so let’s move towards project building.
Steps to Create a React Pokemon App Using PokeAPI
1. Create a dashboard folder inside src in which index.jsx should be created.
Import the libraries
import React, { useEffect, useState } from 'react';
import "../App.css"
Define an asynchronous function ‘fetchPokemons’ to fetch data from the PokeAPI
const fetchPokemons = async () => {
try {
Fetch data from the PokeAPI using ‘fetch’ and store the response in ‘response
const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');
Convert the response to JSON format and store it in the ‘data’ variable
const data = await response.json();
Update the ‘pokemons’ state with the ‘results’ array from the received data
setPokemons(data.results);
} catch (error) {
If an error occurs during the fetch, log the error message to the console
console.error('Failed to fetch Pokemons:', error);
}
};
Use the ‘useEffect’ hook to execute the ‘fetchPokemons’ function once when the component mounts
The empty dependency array ensures that ‘fetchPokemons’ is only called once
useEffect(() => {
fetchPokemons();
}, []);
Return JSX to render the component
return (
<div>
<center><h1>Pokemon App by TechVidvan</h1></center>
Render a container to display the fetched Pokemon data
<div className="pokemon-container">
Map through the ‘pokemons’ array to display each Pokemon
{pokemons.map((pokemon, index) => (
<div key={index} className="pokemon-card">
<div className="pokemon-image">
Display the Pokemon image using its index
<img src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`}
alt={pokemon.name}
/>
</div>
Display the Pokemon name
<div className="pokemon-name">{pokemon.name}</div>
</div>
))}
</div>
</div>
);
};
Export the PokemonList component as the default export
export default PokemonList;
2. App.js(main file to render the page created in first point)
import PokemonList from "./dashboard";
function App() {
return (
<div className="App">
<PokemonList />
</div>
);
}
export default App;
Here is the complete that we have explained above with css for the visually appealing website.
index.jsx
import React, { useEffect, useState } from 'react';
import "../App.css"
const PokemonList = () => {
const [pokemons, setPokemons] = useState([]);
const fetchPokemons = async () => {
try {
const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');
const data = await response.json();
setPokemons(data.results);
} catch (error) {
console.error('Failed to fetch Pokemons:', error);
}
};
useEffect(() => {
fetchPokemons();
}, []);
return (
<div>
<center><h1>Pokemon App by TechVidvan</h1></center>
<div className="pokemon-container">
{pokemons.map((pokemon, index) => (
<div key={index} className="pokemon-card">
<div className="pokemon-image">
<img
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`}
alt={pokemon.name}
/>
</div>
<div className="pokemon-name">{pokemon.name}</div>
</div>
))}
</div>
</div>
);
};
export default PokemonList;
App.js
import PokemonList from "./dashboard";
function App() {
return (
<div className="App">
<PokemonList />
</div>
);
}
export default App;
App.css
.pokemon-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pokemon-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin: 10px;
text-align: center;
width: 150px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.pokemon-image img {
width: 100px;
height: 100px;
margin-bottom: 8px;
}
.pokemon-name {
font-weight: bold;
}
React Pokemon App Output
Conclusion
The PokeAPI’s endpoints return JSON-formatted data, making it easily accessible and easy to integrate into the React project. Developers can fetch details about specific Pokémon, their abilities, stats, sprites, evolution chains, and other relevant information.
By leveraging the PokeAPI, developers can create engaging experiences for Pokémon enthusiasts, such as Pokémon catalogs, battle simulators, etc.