Pokémon Catcher Game

Overview

A school assignment to develop a web application using the public PokeAPI.

The requirement was to implement at least 4–5 different pages or sections that fetched and presented data from the API. Together with a fellow student, I formed the core team that built both the frontend and backend.

Approach

We started by designing and building a static frontend to align on look-and-feel and functionality. Over several months, we made the backend (Express.js, MongoDB) and frontend (React, TypeScript) dynamic, integrating the PokeAPI for all Pokémon data.

export async function getPokemonDetails(
  nameOrId: string | number
): Promise<Pokemon> {
  const response = await fetch(
    `https://pokeapi.co/api/v2/pokemon/${nameOrId}`
  );
  if (!response.ok) {
    throw new Error(`Failed to fetch Pokémon: ${response.status}`);
  }

  const data = await response.json();
  return {
    id: data.id,
    name: data.name,
    sprites: {
      front: data.sprites.front_default,
      back: data.sprites.back_default,
    },
    types: data.types.map((t) => t.type.name),
    stats: data.stats.map((s) => ({
      name: s.stat.name,
      value: s.base_stat,
    })),
  };
}

Features

• Registration & login

  Choose a starter Pokémon at first sign-in.

• Pokémon management

  Nickname caught Pokémon and organise your collection.

• Catching & battling

  Walk around to encounter wild Pokémon. Win the battle, catch them automatically.

• Who's That Pokémon?

  A guessing minigame that buffs your active Pokémon's stats.

Challenges

The biggest challenges were dynamically generating Pokémon encounters and managing user-specific data in MongoDB.

• ·Dynamically generating encounters and storing user-specific data (nicknames, caught Pokémon) in MongoDB
• ·Querying and processing data from the (sometimes complex) PokeAPI, including the right backend endpoints
• ·Managing state in the React frontend

A great learning experience in full-stack development with the MERN stack and external APIs.