Bindermap
Solid.js · Go · PostgreSQL · Connect RPC · Docker
full-stack Pokemon TCG binder planner for designing, organizing, sharing, and showcasing card binders digitally
Overview
Bindermap is a production full-stack app for Pokemon TCG collectors who want to plan physical card binders before moving cards around by hand. It turns a binder into an interactive visual workspace where users can build pages, search a large card catalog, experiment with layouts, track missing cards, and share polished public binder pages.
The product is built around a real collector workflow: search cards, place them into realistic binder slots, auto-fill layouts from owned cards, randomize pages, review what is missing, and publish the finished layout with social-ready previews.
My role & scope
I built the product end to end: the Solid.js frontend, Go API, protobuf contract, PostgreSQL schema, card ingestion pipeline, production deployment, monitoring, and internal admin tooling for catalog quality.
- Designed the binder model around pages, slots, layouts, cards, ownership, missing cards, and public sharing.
- Built the visual editor with 3x3, 4x4, 2x2, and 1x1 page grids plus drag-and-drop card swapping.
- Implemented collection tracking, bulk imports, auto-fill tools, randomization, Discover, public profiles, hearts, and share flows.
- Created admin workflows for duplicate review, image overrides, set coverage, Pokemon browsing, SQL tools, and catalog health checks.
Product features
- Binder editor with realistic page layouts, card placement, page randomization, roulette reveal animations, and exportable share images.
- Card catalog search with filters for sets, Pokemon names, rarities, energy types, languages, and typo-tolerant matching for searches like "charizrd".
- Collection tools for tracking owned cards, importing pasted lists, auto-filling binders, building set master binders, and copying/exporting missing card lists.
- Public sharing through Discover, public profiles, hearts, tags, QR codes, cinema mode, generated Open Graph pages, and PNG preview images.
Under the hood
- Solid.js + Vite + TypeScript on the frontend, styled with Tailwind CSS v4 and served by nginx in production.
- Go + Connect RPC for the backend API, using protobuf as the shared contract so Go and TypeScript clients stay in sync.
- PostgreSQL + Redis for application data, sessions, catalog metadata, public binder state, and production rate limiting.
- Dockerized infrastructure with Traefik, Let's Encrypt TLS, GitHub Actions deployment over SSH, Prometheus metrics, Grafana dashboards, and Dozzle logs.
Interesting challenges
Modeling a real binder digitally
A physical binder is simple, but the app needed editable pages, slot coordinates, multiple grid sizes, card references, ownership status, missing-card state, public read-only access, and shareable previews without making the editor feel heavy.
Maintaining a large card catalog
Catalog ingestion pulls and normalizes data from sources like TCGdex, PokemonTCG.io, and TCGCSV. Search quality, duplicate cards, variants, missing images, and set coverage all became real product and admin-tooling problems.
Making shared binders look good everywhere
Bindermap includes crawler-friendly embed routes and generated PNG previews so public binder links render cleanly across social apps, direct messages, and link unfurlers.
Why it's in my portfolio
Bindermap is one of my most complete full-stack projects. It is not just a UI demo: it has a real niche workflow, typed API contracts, authentication, persistence, catalog ingestion, public sharing, deployment automation, observability, and internal operations tooling.