← All projects

Project story / 01 · Collection companion

CatchGrid.

From “what am I missing?”
to a collection with a plan.

A personal Pokémon GO companion that turns a large collection into something easier to browse, track, and act on.

Project
Personal web app
Platform
Desktop & mobile web
Status
Public app · evolving
Focus
Collection → action
A clear starting point
A clear starting pointThe live home screen introduces a four-step loop: browse, mark, review, and use. Screenshots captured September 12, 2026 with an empty browser-local collection.

01 / The goal

Make collecting
feel manageable.

A collector’s question is rarely just “Do I have this Pokémon?” It might be “Do I have the Shiny?”, “Which region needs attention?”, or “What should a friend search for to help me?” A single checklist cannot answer all of those questions well.

CatchGrid’s objective is to connect those decisions in one place: a visual catalog, meaningful collection states, a readable view of the gaps, and searches that can be used in Pokémon GO.

  • Make a large catalog easy to explore and filter.
  • Track different collection goals without losing their meaning.
  • Turn missing entries into useful next steps.
  • Keep personal collection data under the user’s control.

02 / The experience

One collection. A few useful perspectives.

Each screen answers a different question, while keeping the same collection at the center.

A collection that fits in your hand

The same idea, on a smaller screen.

On mobile, the navigation folds away and the catalog becomes a compact grid. The starting point and collection controls stay recognizable.

These are real captures of the mobile web interface. Tap any screenshot to view it at full size.

Mobile · Home
Mobile · HomeA focused introduction and direct route into the Dex.
Mobile · Dex
Mobile · DexCompact filters and a three-column collection grid.

03 / The results

A working path from browsing to action.

8

Collection categories

The live app distinguishes separate collecting goals instead of reducing everything to a single owned flag.

4

Steps in the core loop

Browse the Dex, mark a collection state, review progress, and use a search or missing list.

2

Export formats

CSV supports spreadsheet workflows; JSON carries a fuller collection backup.

The result is a public companion that visitors can open without creating an account. Its collection lives in the browser, while a shared catalog supplies the reference data. Desktop and mobile views expose the same core workflow.

The screenshots show a fresh collection and the core tools available to a new visitor. CatchGrid remains an evolving project, with room to improve the catalog, recovery experience, and everyday usability.

04 / Takeaways from the work

The useful lessons went beyond the interface.

Four principles worth carrying into the next project.

01

Define what a number means.

A completion percentage depends on the right denominator. Species, alternate forms, release availability, and Shiny eligibility are different concepts. Keeping those rules explicit makes progress useful rather than merely impressive.

02

Saving is part of the experience.

Browser storage simplifies access, but it can fail or be cleared. The project’s recovery work covers validation, snapshots, and explicit errors. Backups and import previews belong in the product, not just in troubleshooting notes.

03

Connect information to a next step.

A list of missing Pokémon describes a problem. A copyable search helps someone do something about it. Search Lab gives the collection a practical use beyond recording ownership.

04

Verify the shipped experience.

Development documentation and a live interface can diverge. Checking the public app directly keeps release descriptions honest and makes unfinished work easier to identify. Documentation is most useful when it stays connected to what people can actually use.

Behind the screens

A small interface.
A careful data model.

The project uses React and TypeScript for the interface, Vite for builds, and Cloudflare Workers with D1 for shared catalog services. Personal browser profiles are kept separate from the public catalog.

The development records describe checks around category eligibility, import validation, corrupt-data recovery, catalog provenance, and browser flows. Those concerns explain why a collection tracker is more than a grid of checkboxes.

ReactTypeScriptViteCloudflare WorkersD1Browser storage

05 / What’s next

Keep the foundation useful.

The next priorities are keeping catalog rules current, validating recovery and mobile workflows as the app changes, and making the live feature set and its documentation stay in sync. Additional planning tools remain outside the scope of this live walkthrough.

Collection data is stored per browser and site address. An exported backup matters when moving devices or clearing browser storage.

Explore it for yourself.

Start with the Dex, then see how the rest of the app connects.

Open CatchGrid ↗

Live interface reviewed September 12, 2026. CatchGrid is an unofficial fan project; Pokémon and Pokémon GO belong to their respective owners. Third-party notices ↗