Building ARC Raiders Loadout Planner — From MVP to AAA

Every project has a turning point. For ARC Raiders Loadout Planner, it was the moment I decided to stop treating it like a weekend toy and start shipping it like a real product.

The result? A 10-phase master plan, 47 unit tests, a CI pipeline, static SEO guide pages, Sentry error monitoring — and a UI that doesn’t look like it belongs in 2018.

Here’s the full story.

The Problem

ARC Raiders is an upcoming extraction shooter from Embark Studios. Like Tarkov or Hunt: Showdown, loadout optimisation matters — but the game is still in development, and third-party tools are scarce.

Players were building loadouts from memory, guessing at stats, and losing gear to bad decisions.

The original MVP was a React SPA with hardcoded weapon data — enough to prove the concept, but not enough to trust.

Phase 0: Data Quality

The first major investment was data integrity. The MetaForge API exposes real weapon stats, but the old fetch script only extracted a handful of fields. I rewrote it to pull everything — damage, fire rate, range, magazine size, weight, agility, stability, stealth — all 9 core stats for every weapon.

For handling attributes (recoil, ADS speed, reload speed, bullet velocity, dispersion), the API doesn’t expose base values. I implemented class-based estimates: SMGs get fast ADS and low recoil, Snipers get slow ADS and high recoil, with tier-based scaling. Every weapon gets a profile.

The result: 23 of 24 weapons have real core stats. One weapon (the Dolabra) has all-zero base values in the API — noted, tracked, and ready for when Embark fills it in.

Data version tracking lives in src/data/version.ts. Running npm run verify:weapons validates every weapon has non-zero stats. Running npm run fetch:weapons pulls fresh data from MetaForge.

Phase 1: Quality Foundation

The app needed tests, and it needed them before it got too big to retrofit.

47 tests across 4 files:

• Stats (stats.test.ts): 12 tests for stat calculations, labels, normalisation — covers every edge case in the stat system
• Build URL (buildUrl.test.ts): 5 tests for encode/decode round-trip fidelity, version checking, and malformed input rejection
• Skills (skills.test.ts): 18 tests for point allocation, deallocation, prerequisite enforcement, and skill recommendations
• Filters (filters.test.ts): 12 tests for role filtering, search, rating sorting, patch filters, and unique extraction

Vitest integrates natively with the Vite config, runs the full suite in ~400ms, and the CI pipeline (GitHub Actions) runs lint → test → build on every push and PR to master.

Sentry is wired in via @sentry/react, gated behind a VITE_SENTRY_DSN env var — it’s production-ready the moment the env var is set in Vercel.

The AAA Redesign

Before the quality push, the UI got a full overhaul:

• Custom SVG logo — hexagonal frame with an upward chevron, unique wordmark that doesn’t borrow from any game font
• Particle canvas hero — interactive background that responds to cursor movement
• Framer-motion stat bars — animated fill transitions with staggered delays per stat block
• AnimatePresence tab transitions — smooth slide/fade between the four main views (Builder, Database, Skills, Comparison)
• Barlow Condensed headings — industrial typography that matches the game’s aesthetic
• Glassmorphism cards — translucent surfaces with backdrop blur and subtle borders
• Noise/grid/scan-line textures — layered CSS pseudo-elements for visual depth

Weapon icons moved from local PNGs to the MetaForge CDN — 22 old files deleted, 24 weapons served from https://cdn.metaforge.app/arc-raiders/icons/.

The shields tab got real API values — Light (40 charge, 40% mitigation, 5 weight), Medium (70 charge, 42.5%, 7 weight), Heavy (80 charge, 52.5%, 9 weight).

Phase 3: SEO Guides

The SPA is great for users who already know what they want, but Google needs content to index. I built a static HTML guide generator (scripts/generate-guides.mjs) that produces weapon-specific pages:

• Per-weapon meta builds with ratings, roles, and tier recommendations
• Recommended attachments, augments, shields, and quick-use items
• “Open in Planner” buttons with pre-computed encoded build URLs
• JSON-LD structured data for rich search results
• OG tags, Twitter cards, canonical URLs
• Pro tips and skill priority lists

Each guide is a standalone HTML file at /guides/{weapon}/index.html — no JavaScript required to render, immediately indexable. Five guides ship today (Kettle, Rattler, Tempest, Osprey, Venator), and the generator can produce dozens more with expanded data.

The sitemap now includes all guide URLs, and the robots.txt points crawlers to the full sitemap.

The Architecture

The 10-Phase Plan

The project isn’t done — it’s sequenced. Here’s what’s shipping next:

1. Phase 4: Monetisation — affiliate links for gear, Ko-fi donations, ad network integration (Carbon, EthicalAds)
2. Phase 5: Community — Supabase-connected build sharing, voting, and commenting
3. Phase 6: Data Freshness — automated weekly data pulls, changelog, version diffs
4. Phase 7: Polish — PWA, keyboard shortcuts, dark/light mode persistence, accessibility audit
5. Phase 8: Community Growth — Discord bot, Reddit integration, competitive leaderboards
6. Phase 9: Monitoring & Analytics — custom dashboards, build popularity trends, weapon usage stats

What I’d Do Differently

Write tests earlier. The MVP had zero tests. Retrofitting them after the fact was tedious — every test uncovered an edge case the code wasn’t handling.

Plan SEO from day one. The SPA-first approach meant guides had to be built as a parallel static site. An SSG or hybrid approach would have been cleaner.

Version the API data format. The build URL encoding uses a version field now (v: 2), but v1 builds are still in the wild. Migration logic had to be added retroactively.

Try It

The planner is live at arc-raiders-loadout-planner-seven.vercel.app. Open any weapon, build a loadout, copy the share URL, and send it to your squad.

The full source and MASTER_PLAN.md are on GitHub.