Royalty Processing System

A music royalty processing UI built as a take-home assignment. Allows users to track song royalty progress and issue invoices, with a full invoice history.

---

Architecture

Workspace Monorepo powered by pnpm workspaces.

royalty-processing/
├── apps/
│   ├── client/       # TanStack Start frontend
│   └── server/       # Hono REST API
└── packages/
    └── types/        # Shared TypeScript types (@royalty/types)

---

Tech Stack

Framework

• TanStack Start — full-stack React framework with server functions and file-based routing

Data Fetching

• TanStack Query — server state management with useSuspenseQuery and route-level prefetching via loaders

UI

• Base UI — unstyled, accessible primitives (Tooltip, Toast, Meter)
• TanStack Table — headless table with reusable DataTable component
• Vanilla Extract — zero-runtime CSS-in-TypeScript with design token system

State Management

• Redux Toolkit — invoice records stored as Record<number, InvoiceRecord> for O(1) lookups

Backend

• Hono — lightweight API server serving song data

---

Features

Songs Table

Displays all songs with royalty progress. Each row includes:

• Song ID, name, author
• Progress bar (via Base UI Meter) with tooltip showing exact percentage
• Issue Invoice button — issues once per song, disabled after issuance with visual feedback
• Last Issued cell — shows issuance timestamp and progress snapshot in monospace code format, with ASCII placeholder when not yet issued

Invoice History Table

Displays all issued invoices sourced directly from Redux state.

Each row contains:

• Date of issuance
• Author
• Song name
• Progress at the moment of issuance (ASCII bar)

Empty History State

---

Getting Started

pnpm install

# Start both client and server
pnpm dev

• Client: http://localhost:3001
• Server: http://localhost:3000