StatsHub Docs

Guides

The recipes for working in the product site — adding a board, adding a filter, putting a route on a phone, and getting a preview deployment.

Add a board

  1. Route. A page.tsx under the group it belongs to — (features)/(props)/my-board/page.tsx. The nested groups add no layout; they exist so the file tree reads like the nav.
  2. Parts. src/composed/my-board/, one directory for the board.
  3. Shape. Render FeatureTemplate rather than assembling the filter bar, panel and body by hand. See Architecture.
  4. Filters. src/components/filters/my-board-filters.tsx, rendering FilterGroups. That file is the complete set.
  5. State. nuqs keys, so the board's state is its URL.
  6. Look at it. bun run dev:web, then open the route — the gates do not catch a board that renders below the fold.

Add a filter

It goes in the panel file above. Put it on the top bar as well only if it is changed between one look at the results and the next, and bind both controls to the same nuqs key.

Conventions has the two bugs this prevents, and why a filter reachable only from the bar is one of them.

Retire a legacy route

LEGACY_ROUTES in next.config.js lists what still belongs to legacy. Build the page here, then delete the entry — in that order. The rewrites match first, so a page added while its entry stands is never reached.

Look at a change

The dev box has no display and no browser, and localhost in a link reaches whoever is reading it. Take the address from the registry:

node packages/statshub-tooling/apps.cjs     # what is serving, and where
bun run phone                               # a QR code for a real device

The preview skill covers driving the browser and reading its console.

Ship a preview

Deploy a preview is the shared procedure — this app is one of the ones it covers.

On this page