How I Built an RPG Battle System for a CompTIA Exam Prep App

How I Built an RPG Battle System for a CompTIA Exam Prep App What if studying for your CompTIA Security+ exam felt like playing an RPG? That's the question that led me to build SecuSpark — a gamified certification prep platform where answering questions correctly deals damage to cybersecurity enemies. In this post, I'll walk through the battle system architecture, the damage formula, and the PvP arena I just shipped. The Stack Frontend: Next.js 16 (App Router), React 19, Tailwind CSS 4 Animations: Framer Motion 12 for battle sequences Data: Dexie.js (IndexedDB) for offline-first question storage Backend: Supabase for auth, profiles, and PvP matchmaking AI: GPT-4o-mini via Edge Functions for answer explanations Sprites: PixelLab.ai for 30 levels of character evolution The Damage Formula Every correct answer triggers damage calculation: baseDamage = 1.0 + weaponATK hitType = 1.0 (normal) | 1.5 (heavy) | 2.0 (critical) speedMult = 0.75 to 1.0 (based on answer speed) totalDamage = baseDama