This is Pokedex Web Application made with ReactJS TypeScript.

Using ReactJS as UI library

TypeScript for JavaScript static typing layer

State Management with Zustand

Using CSS in JS for styling solution (because I love CSS)

Good separation of logical and UI layers

Reusable UI Components

Routing with React Router DOM

Responsive mobile friendly

Much more react hooks are used (include Custom Hook)

Show list of pokemon with Infinite List

Display lists of pokemon and pokemon detail

Search pokemon by name or filter pokemon by their types

"Not Found" Route implemented

How To Clone (Run Locally) ?

1. Clone Repository

  git clone repository_url

2. Install the necessary dependencies (Node Version: 20.10.0)

  npm install

3. Open in your browser

  http://localhost:5173

How To Use ?

1. First of all please visit the website's link: https://pokedex-arya.vercel.app
2. The first page you see is Home Page called
3. This website contains 6 pages, there are: Home Page, Products Page, Product Detail Page, Services Page, Account Page, and Others Page
4. Navigate to list of pokemon by clicking "Products" menu in navbar / sidebar
5. This page contain lists of pokemon with Infinite Scroll
6. Here is you can search any pokemon by name or filter pokemon by their types (without calling API)
7. You can click any pokemon in lists to navigate to Product Detail Page
8. The Detail Page contains a lot more information of that pokemon. Like abilities, stats, and image lists
9. In the image lists section you can choose the image to preview by clicking any image in the image lists
10. You can preview main image in more detail with modal by clicking eye-icon in the "Primary Image"