Skip to content
All projects

Project

Pokemon Team Builder

Angular application for building competitive Pokémon teams, with live stat calculation, type-coverage analysis and a full Pokédex.

  • Angular 21
  • TypeScript
  • Signals
  • Tailwind CSS 4
  • PrimeNG

Context

Building a competitive Pokémon team means cross-referencing a lot of data: base stats, natures, items, moves and the type coverage of the whole set. I wanted a tool that did that calculation instantly, without leaving the page, and that let you save teams to an account.

Architecture

An Angular 21 SPA with standalone components and Signals for the team builder's state: every change of nature, EVs or item recalculates the stats as derived values, with no manual subscriptions.

The interface combines Tailwind CSS 4 for layout with PrimeNG for complex components such as tables and selectors. It consumes my own API with a JWT session and protected routes.

Decisions

Type-coverage analysis is computed on the client from the cached catalogue instead of asking the server: the response is instant and the API stays simple.

What I'd do differently

I'd cut the scope. I tried to cover the API's whole surface on my own and on a deadline: a full Pokédex, the team builder, public and private teams, an admin panel and a profile. It shipped, but at the cost of building the teams module twice and shelving features for a later implementation.

I'd generate the HTTP client from the API's OpenAPI specification instead of maintaining the endpoints and types by hand: every backend change meant rewriting them on the frontend.