Dimension47

TTRPG Campaign Management Platform for Pathfinder 2e.

Tech Stack

Frontend

• Vite - Build tool
• React 19 + TypeScript - UI Framework
• Tailwind CSS v4 - Styling
• TanStack Query - Server state management
• Zustand - Client state management
• React Router - Routing
• Framer Motion - Animations
• Lucide Icons - Icon library

Backend

• NestJS - API Framework
• Prisma ORM - Database access
• PostgreSQL - Database
• JWT - Authentication
• Swagger - API Documentation
• Socket.io - WebSocket for real-time features

Getting Started

Prerequisites

• Node.js 20+
• PostgreSQL 16+ (or Docker)
• npm

1. Start Database

Using Docker:

docker-compose up -d postgres

Or install PostgreSQL locally and create a database named dimension47.

2. Setup Backend

cd server

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Edit .env with your database credentials

# Generate Prisma client
npx prisma generate

# Run migrations
npx prisma db push

# Start development server
npm run start:dev

The API will be available at http://localhost:5000 API Documentation at http://localhost:5000/api/docs

3. Setup Frontend

cd client

# Install dependencies
npm install

# Start development server
npm run dev

The frontend will be available at http://localhost:5173

Project Structure

dimension47/
├── client/                     # Frontend (Vite + React)
│   ├── src/
│   │   ├── app/               # App-wide config
│   │   ├── features/          # Feature modules
│   │   │   ├── auth/          # Authentication
│   │   │   ├── campaigns/     # Campaign management
│   │   │   ├── characters/    # Character management
│   │   │   ├── battle/        # Battle screen
│   │   │   └── documents/     # Document viewer
│   │   └── shared/            # Shared components & utils
│   │       ├── components/ui/ # UI Components
│   │       ├── hooks/         # Custom hooks
│   │       ├── lib/           # Utilities
│   │       └── types/         # TypeScript types
│   └── package.json
│
├── server/                     # Backend (NestJS)
│   ├── src/
│   │   ├── modules/           # Feature modules
│   │   │   ├── auth/          # Authentication
│   │   │   ├── campaigns/     # Campaigns API
│   │   │   ├── characters/    # Characters API
│   │   │   ├── battle/        # Battle WebSocket
│   │   │   └── documents/     # Documents API
│   │   ├── prisma/            # Prisma service
│   │   └── common/            # Shared decorators, guards
│   ├── prisma/
│   │   └── schema.prisma      # Database schema
│   └── package.json
│
├── docker-compose.yml         # Docker services
└── README.md

Features

Implemented

• User authentication (JWT)
• User registration
• Campaign management (CRUD)
• Campaign member management
• Dark mode design system
• Responsive UI

Planned

• Character management
• Pathbuilder 2e import
• Battle screen with WebSocket
• Document viewer with highlights
• Mobile app (Flutter)

Design System

The design uses a dark theme with Dimension47's signature magenta as the primary color:

• Primary: #c26dbc (Magenta)
• Secondary: #542e52 (Dark Purple)
• Background: #0f0f12 (Near Black)
• Text: #f5f5f7 (White)

API Documentation

When the backend is running, visit http://localhost:5000/api/docs for the Swagger documentation.

License

Private project - All rights reserved.

---

Powered by Zeasy Software