john-seredich / pokedex

A Pokémon encyclopedia built using ReactJS, TypeScript, React Query, CSS Modules and PokéAPI

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pokéindex


Live Project

Pokéindex is a pokémon encyclopedia built using ReactJS, Typescript, CSS Modules, and the PokeAPI.

You can find information about every pokemon currently released. This includes pokemon types, stats, forms, and basic information.

Table of Contents

  1. Description and Future Plans
  2. Why I built the project this way
  3. If I had more time I would change this
  4. Technologies

Description and Future Plans


Current Features

  • All pokémon currently released, regional forms, mega, and more.

  • Pokemon base stats, abilites, and basic information.

Future Plans

  • Filters for types, region, forms.
  • Pokémon Evolution, moves, and locations in the modal
  • Type advantages/disadvantage for every pokémon

Why I built the project this way


  • I didn't use the built-in fetch API for this project and instead used React Query. I realized that if this project wanted good performance, I needed fetching, caching, synchronizing, and updating the server state.

  • Typescript was an amazing choice for this project. Typescript helped me prevent bugs and have cleaner code. I will contiune to use Typescript in future projects.

  • SCSS/CSS Modules is an amazing library for styling. It makes it so that styles are scoped to the component. SCSS also comes with an array of features that makes styling cleaner, easier to write, and more efficient.

  • Being familiar with using APIs is an essential part of becoming a developer. That's why I wanted to practice fetching, error handling and using that data in a project.

If I had more time I would change this


  • Use a testing library to set up, create, and execute tests.
  • Refactor certain sections of code, and apply the DRY principle.
  • To add more features like filters, a database for items, and more.

Technologies


  • ReactJS
  • TypeScript
  • React Query
  • Axios

Special Thanks to PokéAPI

About

A Pokémon encyclopedia built using ReactJS, TypeScript, React Query, CSS Modules and PokéAPI

License:MIT License


Languages

Language:TypeScript 56.8%Language:SCSS 31.7%Language:HTML 6.6%Language:CSS 4.9%