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).
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 the example using Vercel:
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.