Hey there, fellow developers and Pokémon enthusiasts! Today, I'm super excited to share with you my Pokedex project: a fully functional Pokedex built using NextJS and Tailwind CSS. This journey has been both challenging and incredibly rewarding, marking my first dive into these technologies and further expanding my development skills. Let me walk you through my adventure of bringing the original 151 Pokémon to life on the web.
Starting Off with an Idea
The idea sparked from my love for Pokémon and a desire to create something unique for the community. I aimed to build a Pokedex that not only listed the original 151 Pokémon but also provided detailed information about each, including their names, heights, weights, and types. To achieve this, I turned to PokeAPI, an extensive source of Pokémon data that became the cornerstone of my project.
Choosing the Right Tools
NextJS: A New Challenge
I decided to use NextJS for this project, intrigued by its capabilities and the seamless experience it offers for both developers and users. NextJS taught me the importance of breaking down code into smaller, manageable components, which significantly improved the readability and maintainability of my project. Its efficient fetch method allowed me to easily access and retrieve data from PokeAPI, making the process smooth and hassle-free.
Tailwind CSS: Designing with Speed
Tailwind CSS was another new territory for me, but it quickly became an essential part of my workflow. It allowed me to design the Pokedex's layout, including the homepage and each Pokémon's info page, with ease and flexibility. The utility-first approach of Tailwind CSS made styling a breeze, enabling me to focus more on functionality rather than getting bogged down with complex CSS files.
The Development Process
Fetching the Data
The first step was to retrieve the necessary data from PokeAPI. By looping through requests, I managed to gather all the required information for each Pokémon. This process taught me a lot about handling API requests and managing state in a React application.
export async function getStaticProps(context) {
try {
const res = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
const { results } = await res.json();
const pokemon = results.map((pokeman, index) => {
const paddedIndex = ("00" + (index + 1)).slice(-3);
const image = `https://assets.pokemon.com/assets/cms2/img/pokedex/full/${paddedIndex}.png`;
return { ...pokeman, image };
});
return {
props: { pokemon },
};
} catch (err) {
console.error(err);
}
}Interpreting the Data
After fetching the necessary Pokémon data from PokeAPI, the next crucial step was to interpret and structure this data in a way that would be most useful for our application. Each Pokémon's data came in a JSON format, containing a wealth of information such as statistics, abilities, evolutions, and more. The challenge was to extract and organize this information efficiently.
To handle this, I created a series of functions within NextJS that parsed the JSON data. These functions focused on:
-
Formatting the data into a more readable and accessible format, such as having a conversion function for metric and imperial units for the Pokemons weight.
-
Implementing a dynamic approach to change the text color based on the Pokémon's type, enhancing the user interface by visually categorizing Pokémon. This step was crucial for setting up a solid foundation for the Pokedex, ensuring that the data displayed to the users was both accurate and user-friendly.
//
// Metric to imperial conversion
function weight(num) {
if (system === "imperial") {
num = num / 10 * 2.205
return parseInt(num) + " Ibs"
}
if (system === "metric") {
return num / 10 + " Kg"
}
}
function height(num) {
if (system === "imperial") {
num = num / 10 * 39.37
let feet = Math.floor(num / 12)
let inches = parseInt(num % 12)
return feet + "'" + inches + '"'
}
if (system === "metric") {
if (num / 10 < 1) {
return num * 10 + " cm"
}
return num / 10 + " m"
}
}
// Changing the text color based on type
function typeColor(req) {
console.log(pokeman);
switch (req) {
case "ground":
color = "text-yellow-600 capitalize text-center";
break;
case "bug":
color = "text-green-500 capitalize text-center";
break;
case "poison":
color = "text-purple-500 capitalize text-center";
break;
case "fire":
color = "text-orange-500 capitalize text-center";
break;
...
}
}Displaying the Data
With the data now interpreted and structured, the next step was to display it on the Pokedex. Utilizing NextJS and Tailwind CSS, I focused on creating a dynamic and responsive interface that would adapt to various devices and screen sizes.
-
Homepage Layout: The homepage features a grid layout of Pokémon cards created with Tailwind CSS, each displaying a Pokémon's image, name, and whether or not they have been captured. This layout is responsive, adjusting to the screen size to ensure a seamless user experience.
-
Pokémon Detail Page: Clicking on a Pokémon card navigates the user to a detailed page for that Pokémon. This page includes comprehensive information such as the Pokémon's type(s), weight, and height. The design was carefully crafted to present the data in an engaging and easy-to-read manner, enhancing the user's exploration experience.
-
Interactive Features: Interactive elements such as a "caught" checkbox allow users to track their progress. This state is saved to the browser's localStorage, enabling users to keep track of their Pokémon catching journey over time.
This step involved a lot of trial and error, especially in making the UI/UX intuitive and engaging. By leveraging Tailwind's utility classes and NextJS's dynamic routing, the Pokedex became a powerful tool for Pokémon enthusiasts to explore and enjoy the vast world of Pokémon.
Wrapping Up and Looking Forward
This project was a significant milestone for me. It allowed me to improve my API integration skills, enhance my design capabilities with Tailwind CSS, and dive deep into the world of NextJS. Building this Pokedex from the ground up has been an exhilarating experience, and it has left me excited to continue exploring new technologies and building innovative applications.
I hope this post inspires you to start your own projects and explore the endless possibilities that web development offers. If you're a Pokémon fan or a
