Live Dashboard

This track builds one thing end to end: a real-time operations dashboard for an order queue. By the last chapter you will have a table that updates live in the browser — no manual refresh, no hand-rolled WebSocket — fed by the full NetScript data spine, from a typed contract on the backend to a durable change-stream on the frontend.

What you will build

A my-dashboard/ Fresh workspace whose home screen is a live order table. The reader scaffolds a fresh NetScript project, exposes an orders read-model through a typed oRPC service, wires a cache-first SDK query layer, renders the table with NetScript's definePage page builder and a hydrated TanStack Query island, then upgrades it to push real-time updates over a durable StreamDB. The final chapter runs the whole graph locally under Aspire. This is a learning track: the same project grows chapter by chapter, so do them in order.

Before you begin

You need a working local toolchain — the same one every NetScript tutorial assumes. Confirm Deno, the Aspire CLI, and Docker are on your PATH:

deno --version && aspire --version && docker info

You should see a Deno 2.x version, an Aspire CLI version, and Docker engine details (not a connection error). If any are missing, the quickstart walks through installing them. Install the NetScript CLI once:

deno install --global --allow-all --name netscript jsr:@netscript/cli@0.0.1-alpha.12

The arc: contract → client → query → island → stream

NetScript's signature spine carries one shape of data from the database all the way to a live cell in the browser, type-checked at every hop. Each chapter adds exactly one link:

1 · Scaffold the workspace

Create my-dashboard/ with netscript init, tour the Fresh app, and boot it under Aspire. You end with a running frontend on the app port and the Aspire dashboard on :18888.

2 · A typed read-model service

Define an orders oRPC contract with .route().input().output() and serve it with defineService. This is the data your dashboard reads.

3 · SDK client + cache-first query

Build a typed createServiceClient and a createQueryFactories query layer with KV-backed stale-while-revalidate. Service discovery resolves the URL for you.

4 · definePage + QueryIsland

Render the table with NetScript's definePage builder — the layer / partial / island triad — and hydrate a TanStack Query island for client-side reads and optimistic mutations.

5 · Go live with StreamDB

Replace polling with a durable change-stream: createSagasStreamDB feeds useLiveQuery so rows update the instant state changes on the server.

6 · Run it all under Aspire

Bring the whole graph up locally — service, Fresh app, streams runtime, Postgres (the default; swap --db for mysql / mssql / sqlite at scaffold time), Redis — with one aspire start. Clear about what local orchestration is and is not.

What you built

By the end of this track you will own a working live operations dashboard and — more importantly — the full NetScript read spine that powers it, from contract to durable stream.