top of page

Pokémon Data Explorer

Created by Tristan O'Donnell

Role: Full-Stack Developer

Overview

Pokémon Data Explorer is a full-stack web application that allows users to search any Pokémon and instantly view its image, types, and basic information. The project integrates a custom Python backend with a lightweight React frontend, using the public PokéAPI as the data source.

​

This was my first full-stack web project, where I built both sides of the application—API, data processing, UI, and deployment—while learning how frontend and backend systems communicate.

​

​​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

​

Retrospective

This project taught me the fundamentals of full-stack development: building APIs, modeling data, connecting frontend and backend systems, and managing deployment pipelines.

​

I gained practical experience with FastAPI, Pydantic modeling, React components, HTTP requests, environment configuration, and debugging cross-origin communication.

​

In the future, I’d like to expand this project with additional UI components, stats, abilities, and more advanced features like team builders or filtering options.

 

Links

GitHub Backend Repository:
Repository:

https://github.com/TristanODonnell/pokemon-backend

​

Live Page:

https://pokemon-frontend-aud0.onrender.com/

​

System Highlights

Below are the core technical systems that make up the project:

​

BattleSystemAnchor

Backend System (FastAPI)

Overview

  • The backend is a Python service built with FastAPI, responsible for handling Pokémon search requests, logging errors, retrieving external data, and returning a clean, formatted response for the frontend.

​​Highlights

  • Built REST API endpoints for Pokémon lookups.

  • Fetched raw data from PokéAPI using the requests library.

  • Normalized and cleaned incoming data before sending it to the frontend.

  • Structured the output using Pydantic models for consistency.

  • Selected the correct English flavor text (PokéAPI includes multiple languages).

  • Implemented error handling for invalid Pokémon names.

  • Configured CORS so the frontend can make requests safely.

  • Added environment-based API URL switching for local vs production environments.

API Integration & Data Modeling System

Highlights

  • Extracted and standardized Pokémon name, types, and sprite URLs.

  • Collected official artwork and clean image sources from multiple fields.

  • Removed hundreds of unnecessary fields to reduce payload size.

  • Pulled correct English “flavor text” from multiple version entries.

  • Designed a PokemonCard Pydantic model to define the exact output shape.

  • Made the system flexible so the backend can easily add more details later (stats, abilities, evolution chains, etc.).

Overview

PokéAPI returns highly nested JSON with many unused values. I created a dedicated data-cleaning pipeline to extract only the essential information and convert it into a simple format suitable for the frontend.

Frontend System (React + Vite)

Overview

The frontend is a simple React application built with Vite, designed to allow users to search for Pokémon and view the results in a clean and easy-to-read layout.

Highlights

  • Search bar that triggers fetch requests to the backend.

  • Clean result panel that displays image, name, and types retrieved from the API.

  • Rendered backend data dynamically using React components.

  • Included UI error handling for invalid Pokémon requests.

  • Connected frontend → backend using environment variables for production builds.

  • Built using Vite for fast development and optimized static deployment.

Deployment & Infrastructure System

Highlights

  • FastAPI backend deployed as a Python service on Render.

  • React + Vite frontend deployed as a static site.

  • Environment variables configured for production API routing.

  • CORS and routing setup for cross-service communication.

  • GitHub integration for version control and future updates.

Overview

The project is deployed on Render, with the backend and frontend hosted separately. The systems communicate over HTTP using the production API URL.

MoveCalculatorAnchor
bottom of page