Hero Loop

Hero Loop is a full-stack life RPG web app built with React + Node.js/Express + SQLite.

Stack

• Frontend: React + Vite + TypeScript + Tailwind CSS + dnd-kit + Recharts
• Backend: Node.js + Express + TypeScript
• Database: SQLite via better-sqlite3
• Shared types: /shared package

Project Structure

• /client: React app
• /server: Express API
• /server/db: SQLite setup, schema, seed, and migrations
• /shared: TypeScript types used by both client and server

Feature Coverage

• Kanban quest board (TO DO, IN PROGRESS, REVIEW, DONE) with drag-and-drop
• XP and level curve: level N requires N * 120 XP
• Level title progression: Novice Adventurer -> Seasoned Quester -> Epic Hero
• Achievement unlock and gallery
• Skill tree with Mind, Body, Social SVG branches
• AI missions panel backed by static mock generator
• Stats page with weekly XP and category charts
• Quest log with category/date filters
• Bottom navigation tabs: HOME, QUEST LOG, STATS, SKILLS, SHOP

Run

1. Install dependencies

   npm install

2. Seed database

   npm run seed

3. Start client + server

   npm run dev

• Client: http://localhost:5173
• API: http://localhost:4000

Extensibility Notes

• generateAIQuests(profile) is at /client/src/lib/aiQuests.ts and currently returns mock missions. Replace it with Anthropic/OpenAI/other API call.
• narrativeEngine.ts stub is at /client/src/lib/narrativeEngine.ts for future storyline generation.
• Achievement triggers are in /server/services/achievementService.ts and designed for easy rule expansion.
• Skill tree node definitions are in /server/db/skillTreeConfig.json and not hardcoded in UI.

API Summary

• GET /api/dashboard
• GET /api/tasks
• POST /api/tasks
• PATCH /api/tasks/:id
• DELETE /api/tasks/:id
• GET /api/achievements
• GET /api/skills
• POST /api/skills/:id/unlock
• GET /api/stats
• GET /api/quest-log