/Pokedex-React-Modern

recreating my react pokedex app, this time using routes and hooks

Primary LanguageJavaScript

ReactJS Pokedex

header

Netlify Status

Table of Contents

General Info

This is my full featured ReactJS Pokedex web app. This pokedex shows all current Pokemon as of Generation 8 and includes all forms and variations (such as mega evolutions, alolan, galar, and G-Max). This app has an eavy to use navbar and a searchbar to look for a specific Pokemon. The goal of this project was to learn more about the tool and feautres of ReactJS and to learn more about Web Development. I definetely had a lot of fun and frustration creating this app but I am quite happy with the result.

Screenshot

ScreenShot

Usage

Simply click on the demo link provided. If you wish to download the code and use it, you must first download or clone the repo and run:

npm install

Then type;

npm start 

Features

  • All 898 Pokemon displayed in a beautiful UI
  • An autocomplete searchbar that allows you to search for any Pokemon
  • Pokemon display cards have a dynamic background color based on type
  • Useful Pokemon info such as height, weight, stats, Pokedex description, and evolutionary forms
  • The ability to choose between different Pokemon forms (such as Charizard, Mega-Charizard-Y, G-Max Charizard, etc.)
  • Pokedex is fully responsive and looks great on multiple screens

Technologies

The app was created with the following technologies

  • ReactJS
  • React Router
  • CSS

What I Learned

This is my second version of creating a ReactJS Pokedex. The first version was functional but had a less appealing UI and had some minor bugs. For this version I used better images for the Pokedex and display the Pokemon types using custom icons and making the background color dynamic. I also used some of the more modern features of ReactJS such as hooks and react-router to really make this app more user friendly and deliver a nicer User Experience. It was defintely challenging learning how to use ReactJS, but it was very rewarding and I'm quite proud of how this version of the Pokedex turned out.