Pokedex (App)

An interactive web app for exploring and managing Pokémon. Users can browse Pokémon with images and stats, sort and filter by type or number, paginate through results, mark captured Pokémon, and switch between light and dark themes.

Frontend Built with React, TypeScript, Chakra UI, Legend-State App, Axios.
Backend Built with Python, Flask
Project using Pnpm and Vite, Deploy to Vercel (Frontend) and Render (Backend).

Link to the app: App

Mobile (Dark + Light Mode)

Desktop (Dark + Light Mode)

Running the App

Frontend

1. If you don't have pnpm installed on your machine: see more details of pnpm installation here: install pnpm

npm install -g pnpm

2. Run these commands to run the app:

cd /frontend
pnpm i
pnpm run dev

Backend

cd /backend
bash dev.sh

API Services

Frontend PokedexService

1. fetches paginated pokemons data with filters, sorting.

pokedexService.query({
  page,
  perPage,
  filterBy,
  sortBy,
})

2. fetches pokemons data by names.

pokedexService.getByNames( pokemonNames: ["pichacu"])

Backend

1. Returns a paginated, sortable, and filterable list of Pokémon from the database. This is the main endpoint for querying the Pokédex data. POST /
   Request Body (JSON):
   

{
  "page": 1,
  "perPage": 25,
  "filterBy": {
    "name": "Bulbasaur",
    "type": "Grass",
    "attackMin": 50,
    "defenseMin": 40
  },
  "sortBy": {
    "field": "number",
    "order": "asc"
  }
}

Response:

{
  "items": [
    {
      "number": 1,
      "name": "Bulbasaur",
      "type": ["Grass", "Poison"],
      "attack": 49,
      "defense": 49,
      "imageUrl": "https://..."
    }
  ],
  "page": 1,
  "perPage": 10,
  "total": 151,
  "totalPages": 16
}

2. Retrieves Pokémon data by their names. POST /by-name
   Request Body (JSON):

{
  "names": ["Bulbasaur", "Charmander", "Squirtle"]
}

Response Example:

{
  "items": [
    {
      "number": 1,
      "name": "Bulbasaur",
      "type": ["Grass", "Poison"],
      "imageUrl": "https://..."
    },
    {
      "number": 4,
      "name": "Charmander",
      "type": ["Fire"],
      "imageUrl": "https://..."
    }
  ],
  "count": 2
}

Data Entities

The Pokemon API Entity

 type IPokemon = {
  number: number;
  name: string;
  imageUrl: string;
  type_one: IPokemonType;
  type_two: IPokemonType;
  total: number;
  hit_points: number;
  attack: number;
  defense: number;
  special_attack: number;
  special_defense: number;
  speed: number;
  generation: number;
  legendary: boolean;
};

Pokemon Types

type IPokemonType =
  | "Grass"
  | "Poison"
  | "Fire"
  | "Flying"
  | "Dragon"
  | "Water"
  | "Bug"
  | "Normal"
  | "Electric"
  | "Ground"
  | "Fairy"
  | "Psychic"
  | "Ice"
  | "Rock"
  | "Fighting"
  | "Ghost"
  | "Dark"
  | "Steel";