On Book Pro — Developer Documentation

Technical reference for developers contributing to On Book Pro.

---

Architecture Overview

On Book Pro is a Progressive Web Application (PWA) built for theatrical production management with real-time collaboration and offline-first design.

Tech Stack

Layer	Technology	Version
Frontend Framework	React	19.2
Language	TypeScript	5.9
Build Tool	Vite	8.0
Styling	Tailwind CSS	3.4
State Management	Zustand + Immer + Zundo	5.0 / 11.1 / 2.3
Rich Text Editor	TipTap + Y.js (CRDT)	3.15 / 13.6
Graphics/Canvas	Konva.js + react-konva	10.0 / 19.2
Drag & Drop	@dnd-kit	6.3
Audio	Howler.js	2.2
Backend	Firebase (Auth, Firestore, Functions, Hosting, Storage)	12.7
AI Integration	Google ADK + Vertex AI (Gemini)	0.5
Animation	motion (Framer Motion)	12.34
Form Validation	React Hook Form + Zod	7.71 / 4.3.6
Unit Testing	Vitest + React Testing Library	4.0
E2E Testing	Playwright	1.58

---

Project Structure

src/
├── components/           # Reusable UI primitives
│   └── common/           # Design system components
├── features/             # Feature modules (domain-specific)
│   ├── admin/            # Admin Portal (members, roles, permissions)
│   ├── attendance/       # Attendance tracking, QR sign-in, Cloud Function, real-time sync
│   ├── audio/            # Audio playback utilities
│   ├── auth/             # Authentication & RBAC
│   ├── barry/            # Barry AI production assistant (ADK v2)
│   ├── blocking/         # Blocking Tracker (canvas)
│   ├── budget/           # Budget Dashboard & alerts
│   ├── calendar/         # Cast calendar (read-only schedule view)
│   ├── cast/             # Personnel management
│   ├── costumes/         # Costume management (measurements, pieces, fittings)
│   ├── dashboard/        # Personalized dashboard with role-based widgets
│   ├── email/            # Email system (Postmark templates & composers)
│   ├── feed/             # Production feed and updates
│   ├── files/            # File repository with cloud storage
│   ├── fly/              # Fly cue management for rigging
│   ├── layout/           # App shell & workspace navigation
│   ├── lighting/         # Lighting cues, follow spots, LX reports
│   ├── notes/            # Rich text notes (TipTap)
│   ├── notifications/    # In-app notification system
│   ├── onboarding/       # First-run onboarding (SM wizard, welcome card)
│   ├── performance/      # Live show-calling interface (Performance & Show Calling)
│   ├── print/            # Print views (Costume Bible, Quick Change Plot)
│   ├── production/       # Production management & deadlines
│   ├── projections/      # Projections & media management
│   ├── prompt-book/      # Prompt book (script + blocking composite view)
│   ├── props/            # Props inventory
│   ├── run-sheet/        # Core run sheet
│   ├── scheduler/        # Rehearsal calendar & AEA compliance
│   ├── sets/             # Set Builder (canvas)
│   ├── settings/         # Settings tool tab
│   ├── show-structure/   # Acts/Scenes/Characters
│   ├── sound/            # Sound cues & soundboard
│   ├── sync/             # Cloud sync & presence
│   └── video/            # Video conferencing (Daily.co)
├── store/                # Zustand global state (useAppStore.ts)
├── types/                # TypeScript definitions
└── utils/                # Shared utilities

---

Getting Started

• Setup Guide — Installation and environment configuration
• Contributing Guide — PR workflow, testing, and standards
• Style Guide — Code standards and conventions

---

Core Subsystems

Explore the architecture of key systems:

• map Workspace Navigation — Role-based workspaces and tool routing
• cloud_sync Cloud Sync & Presence — Real-time Firestore sync with granular sharding
• memory State Management — Zustand with Immer, Zundo, and persistence
• security Authentication & RBAC — Permission system and security rules
• folder_shared File Repository — Versioned storage and offline caching
• print Print System — Portal-based PDF generation
• psychology AI Integration — Script analysis, SVG asset generation, and Barry AI chat

---

Technical Guides

In-depth guides for specific patterns:

• Branded Types — Type-safe ID handling
• Permission System — Access control and data patterns

---

API Reference

• Firebase Functions — Cloud Function endpoints and authentication
• AI Generation API — Script analysis, SVG generation, and Barry chat
• Personnel Linking API — User-to-personnel association

---

For user-facing documentation, see the User Guide.