WOTLK Armoury

A full-stack World of Warcraft armory page built with Next.js and PostgreSQL, displaying character gear with an interactive 3D character model rendered in the browser.

The original plan was to fetch live character data directly from the Warmane API on each page load. During development, Warmane restricted API access behind a Cloudflare Turnstile challenge, blocking programmatic requests. I attempted to bypass this using Puppeteer via Cloudflare Workers to automate the challenge, but Cloudflare's bot detection flagged and blocked this approach too. I've since raised this with the Warmane community and am pursuing access to an official public API — for now the app works from a manually seeded dataset.

The character and gear data is stored in a PostgreSQL database designed with a relational schema — a Character table, an Item table, and a CharacterItem join table — modelling the many-to-many relationship between characters and equipped gear without duplicating item data.

Item display IDs (needed to render 3D gear models) aren't returned by the game API directly, so I built a seeding pipeline that fetches each item's XML from Wowhead, extracts the relevant fields via regex, and writes them to the database. This means item metadata is fetched once and cached — subsequent page loads read from the database rather than hitting an external API each time.

Rendering the 3D character model in the browser required integrating the wow-model-viewer npm library and working around CORS restrictions on the asset CDN using a local Docker proxy. The frontend is built in Next.js with dynamic routing, React hooks for client-side rendering, and Tailwind CSS for layout.