/pokedex

A front-end pokédex application, built in React with APIs, cataloging all 898+ pokémon. This front-end build utilizes React's State and Hook features, and was built using ES6/ES7 syntax.

Primary LanguageJavaScriptMIT LicenseMIT

A GUIDE TO:

POWERED BY:

A Pokédex Built in React Utilizing Hooks!

Powered by PokéAPI.co, this pokédex catalogs all 898+ pokémon using ES6/ES7 Syntax, Styled Components, State and Hooks! As you navigate through increments of pokémon, simply select one to have information populate in another tab. To view the pokédex click here.

Clicking on a specific pokémon gives you access to their:

  • Name
  • Pokédex Number
  • Type
  • Images
  • Description
  • HP (Base)
  • Attack / Defense (Base)
  • Special Attack / Special Defense (Base)
  • Speed (Base)
  • Abilities
  • Approximate Height / Weight
  • Catch Rate
  • Growth Rate
  • Gender Ratio
  • Hatch Steps
  • Effort Values

Table of Contents

Installation

This application was built with React. If initiating build, make sure to do so using npx create-react-app <project-name>

If cloning to personal machine, open repository in terminal and cd client. From there, run npm install to install all modules listed within the package.json file.

Individual modules to be installed:

  • axios
  • bootstrap
  • react-bootstrap-icons
  • react-router-dom
  • styled-components

Technologies

  • React.js: front-end UI/UX JavaScript library
  • jQuery: front-end JavaScript framework
  • NPM: [Node Package Manager] - dependency management
  • Bootstrap: CSS framework

Authors

Jordan Hunter

Roadmap

Future features to be implemented:

  • Search bar navigation
  • Modal functionality when viewing Pokemon.js data
  • Evolutionary data included with applicable pokémon

Contributing

Star it. Clone it. Modify it. Submit a PR.
Fork it to your own repository, even. Keep yourself a copy and go wild.

License

MIT


Questions?

Developer Profile Picture

For any questions, please contact me with the information below:

GitHub: @jordanwhunter
Email: Contact Developer