React Next Pokedex

Context

A Pokédex is a tool/device that allows Pokémon trainers to learn more about Pokémon, where they live, how they behave and interact with trainers, their environment and other Pokémon.

A Pokédex is particularly useful in the context of catching and learning from Pokémon. To a lesser extent, Pokémon trainers use it to devise their battle strategy (i.e. types, evolutions and other species-level characteristics: it can’t provide much insight to an individual Pokémon’s details).

App

This App display a list of pokemons and their individual detail using PokeAPI

The App allows you to:

Main View: Search by name, including fuzzy matching
Main View: Filter by type, including combinations
Main View: Filter by favourites
Main View: Filter by game/version
Main View: Add to favourites
Main View: Remove from favourites
Main View: Paginate with 20 entries per page
Detail View: Display a detail of each Pokémon, the following fields are part of the entry view:
- Abilities
- Stats
- Types
- Versions (games) where it appears
- Held items
- Exp.
- Height
- Weight
Detail View: Add to favourites
Detail View: Remove from favourites

This app integrates Next.js with Typescript, Redux Toolkit and Material-UI.

*The Redux Toolkit is a standardized way to write Redux logic (create actions and reducers, setup the store with some default middlewares like redux devtools extension).

Deploy your own

Deploy the example using Vercel:

Development

Clone the repository:

git clone https://github.com/luisignaciocc/react-next-pokedex.git
cd react-next-pokedex

Install the dependencies:

npm install
#or
yarn

Start the development server:

npm run dev
#or
yarn dev

Deploy it to the cloud with Vercel.