D&D Character Build Tools (2024 PHB)

A modern, fast, and modular web application for building and managing D&D 5e (2024 Player's Handbook) characters. Built with React, Vite, Zustand, and Zod.

---

Features

• ⚡ Quick Build Wizard: Create ready-to-play characters in seconds with curated class/species/background pairings, randomized names, and auto-generated stats.
• 🛠️ Interactive Character Sheet:
  • Point Buy calculator with a budget of 27 points (8–15 range).
  • Live calculations for ability modifiers, proficiency bonus (+2 to +6), HP, AC, saving throws, and 18 skills.
  • Subclass unlocking automatically at Level 3+ (D&D 2024 rule).
  • Interactive inventory with carrying capacity (STR × 15 lbs) and currency tracker (CP, SP, EP, GP, PP).
  • Features progression tab with level-filtered traits and subclass abilities.
• 💾 Persistence & File I/O:
  • Auto-saves draft in localStorage (version: 1).
  • Export JSON: Export character builds to .json files.
  • Import JSON: Upload .json files to instantly restore character builds.
• 🌐 GitHub Pages Ready: Powered by HashRouter (/#/builder) to prevent 404 errors on page reload.

---

Tech Stack

• Framework: React 18 (JavaScript / JSX)
• Bundler: Vite
• Routing: react-router-dom (HashRouter)
• State Management: Zustand (with persist middleware and fine-grained selectors)
• Schema Validation: Zod
• Testing: Vitest
• Styling: CSS Modules (*.module.css) + CSS Custom Properties

---

Project Structure

CharacterBuildDnDTools/
├── public/                 # Static assets (images, icons)
│   └── images/quickbuild/  # Character & class artwork
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── common/         # Button, Modal, Badge (CSS Modules)
│   │   └── layout/         # Navbar, PageLayout
│   ├── data/               # Modular Game Data (Extremely easy to extend!)
│   │   ├── schemas/        # Zod runtime schemas (classSchema, speciesSchema, etc.)
│   │   ├── classes/        # barbarian.js, classTemplate.js, index.js
│   │   ├── species/        # human.js, speciesTemplate.js, index.js
│   │   ├── backgrounds/    # soldier.js, acolyte.js, backgroundTemplate.js, index.js
│   │   ├── feats/          # alert.js, savageAttacker.js, magicInitiate.js, index.js
│   │   ├── skills.js       # 18 D&D 2024 skills
│   │   └── index.js        # Master data registry & helpers
│   ├── features/           # Feature pages
│   │   ├── home/           # HomeView & Class Compendium
│   │   ├── quick-build/    # 3-Screen Quick Build wizard
│   │   ├── builder/        # Interactive Character Sheet & Point Buy
│   │   └── compendium/     # Full 1-20 features progression & subclass reader
│   ├── stores/             # Zustand store slices (useCharacterStore, useUIStore)
│   ├── styles/             # Global tokens.css & reset.css
│   ├── utils/              # Pure functions (dndMath.js, pointBuy.js, fileIO.js)
│   ├── App.jsx             # HashRouter routes
│   └── main.jsx            # Application mount point
├── tests/                  # Automated Vitest test suite
│   ├── dndMath.test.js     # Ability modifiers, HP, prof bonus math
│   ├── pointBuy.test.js    # Point buy cost table & budget validation
│   └── dataSchema.test.js  # Automated schema checks for all data files
├── index.html              # SPA entry point
├── package.json            # ESM module configuration
└── vite.config.js          # React plugin, aliases (@/), test config

---

How to Add New Content (Easy Extension Guide)

1. Adding a New Class

1. Go to src/data/classes/.
2. Copy classTemplate.js and rename it (e.g. fighter.js).
3. Fill in the class details (hit die, proficiencies, features, subclasses).
4. In src/data/classes/index.js, import and add it to CLASSES.
5. Run npm test to automatically verify schema compliance!

2. Adding a New Species

1. Go to src/data/species/.
2. Copy speciesTemplate.js and rename it (e.g. elf.js).
3. In src/data/species/index.js, import and add it to SPECIES.
4. Run npm test.

3. Adding a New Background

1. Go to src/data/backgrounds/.
2. Copy backgroundTemplate.js and rename it (e.g. sage.js).
3. In src/data/backgrounds/index.js, import and add it to BACKGROUNDS.
4. Run npm test.

---

Getting Started

Install Dependencies

npm install

Start Development Server

npm run dev
# Open http://localhost:5173/CharacterBuildDnDTools/

Run Automated Tests

npm test

Build for Production

npm run build