DEV Community

Theo Blake
Theo Blake

Posted on

How We Built WikiMasters: A Real-Time Wikipedia Trading Card Game with TanStack Start & Cloudflare Workers

#webdev #typescript #react #cloudflare

Trading card games (TCGs) traditionally rely on static card catalogs manually designed and balanced by game developers. What if instead of pre-rendered static decks, your cards were generated dynamically from the collective human knowledge on Wikipedia?

That was the core idea behind WikiMasters (wikimasters.org). In this deep dive, we explore how we built the game architecture, our edge rendering pipeline, and why we chose TanStack Start, TanStack Router, and Cloudflare Workers.

1. Ingesting Wikipedia as a Real-Time Game Engine

Every card in WikiMasters represents a real Wikipedia article spanning History, Science, Geography, Technology, and Culture. To ensure high speed and fairness, we designed an algorithmic stat generator:

  • Popularity & Attack Power: Ingested from the Wikimedia Analytics REST API (30-day pageview velocity).
  • Defense & Historical Resilience: Derived from revision counts, editor diversity, and talk page consensus.
  • Card Synergy: Calculated from Wikipedia internal link density and category hierarchy. 
// Edge Normalization Example
export function computeCardBattleRating(pageviews: number, internalLinks: number, wordCount: number) {
  const attack = Math.min(999, Math.round(Math.log10(pageviews + 10) * 120));
  const defense = Math.min(999, Math.round(Math.log10(internalLinks + 5) * 110));
  const hp = Math.min(1500, Math.round(Math.sqrt(wordCount) * 8));
  return { attack, defense, hp };
}
Enter fullscreen mode Exit fullscreen mode

2. Full-Stack Edge Architecture with TanStack Start

We chose TanStack Start coupled with Cloudflare Workers for three key reasons:

  1. Sub-30ms Edge Rendering: Card lookups and OpenGraph preview cards render directly at the Cloudflare edge close to the player.
  2. Type-Safe Routing: Game lobbies, deck builder filters, and battle rooms are completely type-safe from server loaders to client components.
  3. Low Latency Dynamic Metadata: Social share cards dynamically pull Wikipedia thumbnail assets and render responsive card previews in real time.

3. Open Source & Getting Involved

The source code and developer documentation for WikiMasters are open source:

We welcome any feedback from the developer community on edge state synchronization, deck building algorithms, and game balancing!

Top comments (0)