How To

<!-- generated by iii-skill-render. DO NOT EDIT (changes here are overwritten on the next render). Edit docs/next/how-to/build-a-realtime-todo-app.mdx. -->

# Build a real-time todo app


A full-stack reactive todo app over a single browser-to-engine WebSocket. Function calls and live
stream change events flow over the same connection.

## Engine configuration

The `config.yaml` workers needed to support a browser-driven reactive app.

## Backend

The worker, auth, stream wrapper, and CRUD functions that power the app server-side.

### Worker setup

Connect a worker, register the functions the app needs, and bind triggers.

### Auth function (RBAC)

An auth function runs on each new browser WebSocket connection, issues a session ID, and namespaces
the session's registered functions to prevent collisions.

### Stream wrapper

A typed wrapper class over `stream::get` / `stream::set` / `stream::list` / `stream::delete` for one
named stream.

### Functions

The CRUD functions the browser calls (create, toggle, delete, list) wired to write through the
stream wrapper.

## Frontend

The browser-side WebSocket connection and reactive hook that render live updates.

### Connection

Connect the browser to the engine over a single WebSocket using `iii-browser-sdk`.

### Real-time hook

A hook that subscribes to the stream and re-renders the UI on each change event the engine pushes.

## Key concepts

The reactive primitives this app relies on: single-WebSocket transport, per-session RBAC
namespacing, and stream-driven UI updates.