Buff My Class
A World of Warcraft guild site running on live game data.
A dark, armory-inspired home for a 400+ member guild on the Zul’jin (US) realm, built for the Midnight expansion. The roster, gear, raid progression and Mythic+ ladders come from the game itself and refresh on their own.
The Hall: guild crest, hero banner, and live stats across the roster.
400+
guild members on Zul’jin (US)
2
live data sources: the Blizzard API and Raider.IO
0
frameworks: vanilla JavaScript, no build step
Midnight
the World of Warcraft expansion it was built for
Overview
More than a static template, because the data is real
Buff My Class pairs a Warcraft-authentic visual design (stone textures, gilded panels, and Horde-crimson and Sunwell-gold accents) with a fast, vanilla JavaScript front end that presents the guild’s roster, achievements, raid campaign and Mythic+ ladders.
A Node.js backend pulls the guild’s live roster, item levels and equipped gear from the Blizzard API, and character portraits and raid progression from Raider.IO. It refreshes on a schedule and serves the result through a clean REST API. With 400+ members, the site doubles as an internal hub: one place for the guild to track progress, gear and standings.
Key features
Everything the guild tracks, in one place
Roster
A searchable, sortable roster of 400+ members with class distribution and role breakdowns.
Character pages
Item-level rings, full gear lists, and Wowhead item tooltips for every character.
Raids and Mythic+
Live raid progression and Mythic+ ladders pulled from real game data.
Achievements
An achievement gallery with category filters and progress tracking.
Armory-inspired theme
Procedural class art and an animated dark theme built to feel like the game.
No manual upkeep
Data refreshes itself with no rebuild, and there is a recruitment and sign-up flow for new members.
Design
Built to look like it belongs in Azeroth
The visual design borrows from the game’s own armory: stone textures, gilded panels, and Horde-crimson and Sunwell-gold accents, with procedural class art and an animated atmosphere on top.
Guild identity
The share card carries the same crimson and gold palette as the site.
How it works
From the game’s APIs to the guild’s browser
The Blizzard client secret stays on the server. The browser only ever sees normalized guild data.
01
Pull
A Node.js server fetches the live roster and gear from the Blizzard API using Client Credentials.
02
Enrich
Raider.IO supplies real character portraits and boss-by-boss raid progression.
03
Normalize
Bank alts are filtered out, and classes, specs and gear are cleaned into one consistent model.
04
Serve
The browser reads that data through a REST API, and scheduled refreshes keep it current.
Technical implementation
A framework-free front end on a small Node.js backend
Frontend and UI
- Vanilla JavaScript single-page app with a hash router, no framework and no build step
- Hand-authored CSS theme with procedural SVG class art and animated atmosphere
- Item-level rings, class-distribution charts and role donuts rendered in the browser
Backend and data
- A Node.js server pulls live roster and gear from the Blizzard API via Client Credentials
- Raider.IO supplies real character portraits and boss-by-boss raid progression
- Secrets stay server-side; the browser reads normalized guild data through a REST API
Development highlights
Keeping it current, secure and fast
The goal was a rich, game-authentic experience that keeps its data current and its front end fast for a 400+ member guild. The notable challenges:
- Designing a secure data pipeline that keeps the Blizzard client secret server-side, out of the browser
- Scheduling automatic refreshes so the roster and raid standings stay current on their own
- Reconciling Blizzard and Raider.IO data into one consistent model behind a REST API
- Filtering bank alts and normalizing classes, specs and gear into clean, readable data
- Serving 400+ members from a lightweight, framework-free front end that stays quick
Impact
A home for the guild that stays current on its own
Buff My Class gives a 400+ member gaming community a professional home by combining real game data with a hand-crafted design. It provides:
A living tracker
The roster and raid tracker reflect the guild’s real progress.
An internal hub
All 400+ members can find what they need in one place.
Self-updating data
The data layer stays current without manual upkeep.
Recruitment appeal
A polished, game-authentic presentation for players thinking of joining.
Visit the Guild
Explore the live site to browse the 400+ member roster and follow the guild’s raid campaign and Mythic+ standings through the Midnight expansion.