Pokémon Catcher Game

Overview

This was a school assignment where we had 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 developed both the frontend and backend.

Approach

We started by designing and building a static frontend to get a clear picture of the desired look-and-feel and functionality. Then, over several months, we made the backend (Express.js, MongoDB) and frontend (React, TypeScript, Tailwind) dynamic, integrating the PokeAPI for all Pokémon-related data.

pokemonService.ts

// Example of how we fetched Pokémon data from the API
export async function getPokemonDetails(nameOrId: string | number): Promise<Pokemon> {
  try {
    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();
    
    // Transform the API response to our own model
    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
      }))
    };
  } catch (error) {
    console.error('Error fetching Pokémon:', error);
    throw error;
  }
}

Features

The "PokéCatcher" web app offers the following features:

User Registration & Login

With the option to choose a starter Pokémon at first login

Pokémon Management

Give nicknames to caught Pokémon and organize your collection

Catching & Battling

Walk around (simulation) and encounter wild Pokémon to battle. Upon winning, the Pokémon is automatically caught

"Who's That Pokémon?" Minigame

Guess the Pokémon to improve your active Pokémon's stats

Challenges

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

Key challenges included:

Dynamically generating Pokémon encounters and managing user-specific data (such as nicknames and caught Pokémon) in the MongoDB database
Effectively querying and processing data from the sometimes complex PokeAPI, including creating the appropriate backend endpoints
Managing state in the React frontend

This project was an excellent learning experience in full-stack development with the MERN stack and working with external APIs.