ARC Raiders is an extraction shooter where every loadout decision determines life or death in the Topside. The ARC Raiders Loadout Planner is a complete single-page web application that gives players a dedicated tool to theory-craft, tune, and share builds — now delivered with a AAA+ 2026 masterclass visual design that immerses you in the game’s dark industrial atmosphere before you even touch a stat bar.

ARC Raiders Loadout Planner — Main planner interface with Kettle weapon, Compensator attachment, Medium Shield, and real-time stat breakdown

Features

2026 Visual Design System

A ground-up visual overhaul delivers a masterclass web design experience. The full-viewport hero section features a canvas-based particle system with 80 floating amber particles, a slowly rotating perspective grid, subtle noise overlay, and a sweeping scan-line effect — all composited over a dark radial gradient. The custom SVG logo (hexagonal frame with upward chevron) evokes the game’s extraction theme while remaining legally distinct. Every interface element was upgraded: rounded corners (4–12px) replace harsh rectangles, framer-motion animations power tab transitions, stat bar fills, and scroll-triggered reveals, glassmorphism modals use backdrop-blur, and custom shadow/glow tokens add depth to cards and buttons. The typography pairs Barlow Condensed (logo, headings) with Inter (body) and JetBrains Mono (data) — all variable fonts loaded from Google Fonts.

Weapon Planner

Browse all 24 weapons across 9 classes — Assault Rifles, SMGs, Shotguns, Battle Rifles, Sniper Rifles, LMGs, Pistols, Hand Cannons, and Special. Each weapon has 4 upgrade tiers (I–IV) with progressive stats for damage, fire rate, range, magazine size, and handling characteristics. All stats come from the MetaForge API with class-based handling estimates for recoil, ADS speed, reload speed, bullet velocity, and dispersion.

Dual-Wield Loadouts

Equip both a primary and secondary weapon with independent tier selectors, attachment configurations, and stat calculations.

Attachment Tuning

17 attachment types across 8 slot categories (Muzzle, Shotgun Muzzle, Underbarrel, Light Magazine, Medium Magazine, Shotgun Magazine, Stock, Tech Mod). Each attachment has exact stat effects and penalties — every change updates the stat bars in real-time.

Augments & Shields

Select from 14 augments (Combat, Looting, Tactical, Free) each with Mk.1–Mk.3 tier progression. Choose between 3 shields (Light, Medium, Heavy) with real API-sourced values for charge, damage mitigation, and movement penalty trade-offs.

Quick-Use Loadout

Configure 44 quick-use items across Medical, Shield, Stamina, Grenade, Utility, and Trap categories.

Skill Tree Builder

The full 44-node skill tree across 3 branches (Conditioning, Mobility, Survival) with prerequisite validation, point allocation, and S/A/B/F tier recommendations. Switch between list view and interactive node graph (ReactFlow) with animated prerequisite edges, minimap, and drag-to-pan controls.

Crafting Calculator

Select attachments to craft and instantly see total material requirements, grouped by crafting station with level requirements.

Meta Build Library

15 seeded community builds covering every role — PvP Aggressor, PvE Farmer, Stealth Sniper, Budget Zero-to-Hero, Boss Killer, CQB Rush, Support Medic, and more.

Shareable Build URLs

Every loadout generates a compact, copyable URL that encodes the full build — including both weapons, attachments, augment, shield, and quick-use items.

Weapon Comparison

Compare any two weapons side-by-side with color-coded stat deltas — damage, fire rate, range, mag size, recoil, ADS speed, and reload speed.

SEO Guide Pages

Static HTML weapon guides at /guides/{weapon}/ — per-weapon meta builds with JSON-LD structured data, OG tags, pre-computed “Open in Planner” build URLs, and skill priorities. Indexable without JavaScript. Five guides live (Kettle, Rattler, Tempest, Osprey, Venator), with more to follow.

Data Quality & Versioning

A rewritten fetch script (scripts/fetch-weapons.mjs) extracts all 9 core stats from the MetaForge API for 23/24 weapons. Class-based handling estimates fill remaining attributes for every weapon. Data version tracking at src/data/version.ts with npm run verify:weapons validation.

Testing & CI

47 unit tests across 4 files (stats, build URL encode/decode, skills, filters) running in ~400ms via Vitest. GitHub Actions CI runs lint → test → build on every push and PR to master.

Error Monitoring

Sentry integrated via @sentry/react, gated behind VITE_SENTRY_DSN — production-ready at env var set.

Monetisation

Non-intrusive ad slots (Carbon Ads / EthicalAds), gaming gear affiliate links, and a Ko-fi donation button — all configurable via environment variables without blocking core functionality.

Screenshots

Skill Tree — 44 nodes across Conditioning, Mobility, Survival branches — Skill Tree — 44 nodes, 3 branches, 91 max points

Crafting Calculator — select recipes, see material summary by station — Crafting Calculator — material requirements per station

Weapons Database — complete table with stats for all 24 weapons — Weapon Database — all 24 weapons with Tier I stats

Meta Builds Library — 15 community builds with filter and sort — Meta Builds Library — 15 seeded builds, filterable by role

Attachments Database — 17 attachments across 8 slots with effects and penalties — Attachments Database — 17 attachments, 8 slot categories

Tech Stack

Built with Vite 8 + React 19 + TypeScript for a fast, client-side SPA. Styled with Tailwind CSS 3 using a custom Arc Raiders-inspired dark industrial palette. Framer Motion powers all animations. Vitest runs 47 unit tests. Sentry handles error monitoring. GitHub Actions enforces CI. Deployed on Vercel with auto-deploy from GitHub.

Weapon images sourced from the MetaForge CDN with automatic updates and graceful fallback chain. Game data compiled from the public MetaForge JSON API at build time and cached in the repo.

Status

All 8 phases are live at arc-raiders-loadout-planner-seven.vercel.app, with a 10-phase master plan guiding development:

✅ Patch Notes Tracker — version history with weapon change highlights
✅ Weapon Comparison — side-by-side stat deltas with tier selectors
✅ Community Builds — voting, submission, 15 official builds, localStorage fallback
✅ Live API Integration — MetaForge API data cached at build time, real per-tier stats for 23/24 weapons
✅ Interactive Skill Tree Graph — ReactFlow node graph with animated edges
✅ Monetisation — Ads + affiliate links + Ko-fi, all env-var-configurable
✅ AAA 2026 Visual Redesign — immersive hero, custom logo, framer-motion, glassmorphism, design system
✅ Data Quality & Testing — 47 unit tests, CI pipeline, Sentry monitoring, data version tracking, npm run verify:weapons
✅ SEO Guide Pages — 5 static weapon guides with JSON-LD, OG tags, sitemap integration
🔄 Monetisation & Community — affiliate enrollment, EthicalAds, Supabase build sharing, custom domain

The app builds across 7 JS chunks (309 KB main, 79.6 KB gzipped) with 25 KB CSS, code-split for optimal loading. The data foundation covers 24 weapons (real API core stats + class-based handling estimates), 17 attachments, 14 augments, 3 shields, 44 quick-use items, 44 skill nodes, 26 crafting recipes, and 15 meta builds.