Pokédex web app built with React, Redux Toolkit, Material UI and PokeAPI

Project website

---

Table of Contents

• The Problem
• The Solution
• Getting started
• Additional scripts
• Built With
• Attribution

The problem

You wanted to have a way to check all the available Pokémons in order to be well-prepared for your quest to catch them all.

This solution

The web app has the following features:

• Pokédex directory where the user can search for a Pokémon with name or id. The search field provides also an autocomplete functionality.
• See detailed information for any Pokémon like description, abilities, stats etc.
• Save your favorite Pokémons in your bag to have them always with you.

Getting Started

1. Clone the repo

git clone https://github.com/andreaskarantzas/pokedex.git

2. Install the necessary packages

yarn install

3. Start the app in development mode

yarn start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Additional scripts

1. Deploy app to staging environment with Netlify CLI (runs the included tests first) Note: The publish directory should be ./build

yarn deploy:staging

2. Deploy app to production with Netlify CLI (runs the included tests first) Note: The publish directory should be ./build

yarn deploy:prod

3. Runs the included jest tests

yarn test

4. Runs the cypress testing suite

yarn start

In a new terminal tab:

yarn cypress:open

Built from these awesome projects

• React
• Redux Toolkit
• TypeScript
• PokéAPI
• MaterialUI
• Apisauce
• Prettier
• Cypress

Attribution

• Icons made by Freepik from www.flaticon.com