paper-playground

Read this when you explore or change the Paper application study in frontend/apps/paper-playground.

What it is

paper-playground is a Vite and React Router app that composes paper-ui into full Tadoku screens: home, guide, leaderboards, contests, logs and the log editor, profiles, settings, sign-in and admin. Forms use TanStack Form through Paper’s usePaperForm composition API.

All data is sample fixtures (src/data.ts), and every action changes only browser-local state (src/state.tsx, persisted in localStorage). There is no API connection, deployment image or publishing workflow. Do not connect its sample sign-in or administrative flows to live services.

Page headers, section headings, status tags, empty states, figures, facts and applied-filter summaries come from the paper-ui page structure controls described in Paper composition. Pages lay themselves out with token utilities, as Paper styling describes; the app's only stylesheet is its Tailwind entry.

The screens illustrate composition; they are not a shared implementation. A production screen still owns its data, routing and permissions, as described in Paper composition.

The footer's Playground controls switch between pages, sample scenarios, the sample account, theme and density. Reset sample changes restores the fixtures. The sample date is fixed at 5 September 2026.

Development

From frontend/:

pnpm paper-playground        # builds paper-ui, then serves Vite on port 5174 (respects HOST and PORT)
pnpm --filter paper-playground lint
pnpm --filter paper-playground typecheck
pnpm --filter paper-playground test
pnpm --filter paper-playground build