← All Projects

Archtrave

A Pokémon Trading Card Game price tracker with per-card history and buy links.

Python Jinja2 SQLite Tailwind CSS TCGdex API
Archtrave screenshot

Tracking prices across a card catalog this large usually means a pile of tabs or a spreadsheet. Archtrave keeps the whole Pokémon TCG catalog in one fast, searchable site: every card's price history in one place, with buy links out to TCGplayer and eBay when you're ready to act on it. It follows the same pattern as ManaBleed, its Magic: The Gathering sibling: statically generated, no accounts, nothing to install.

A harvester script pulls the full card catalog and current pricing into a local SQLite database. A separate generator script then renders every page from that database with Jinja2 templates: a homepage, per-set hub pages, and one page per card with its price-history chart and schema.org Product markup. The output is plain static HTML, styled with Tailwind CSS and served directly, with a small client-side search index for instant results without a server round trip. The card data itself comes from TCGdex, chosen because it already embeds live TCGplayer and Cardmarket pricing directly on each card record with matching product IDs, rather than needing a separate pricing source joined against a separate catalog.

The site was originally built against a different card API that was later folded into a paid product with no free tier, which meant migrating the entire data source under real time pressure. The new API models cards under a different ID scheme, and a plain "insert or update" harvest left thousands of old rows from the previous source sitting untouched in the database, indistinguishable from fresh data. The fix was a pruning step that removes any card the current run didn't touch, gated behind a full (not partial) run so an interrupted harvest can never wipe good data, verified against a backup before ever running it for real. A layout bug turned into a good lesson about CSS: a header element with a "show on wide screens" utility class was rendering as a block on every screen size. The utility class was compiling correctly; the real cause was that being a flex child overrides how a block-level display is computed, regardless of what the utility says. The actual fix was giving the header row enough space at that breakpoint, not fighting the display property.

Visit Site