A restaurant POS with no backend: Sofreh's cross-tab sync, a seed in a Web Worker and seven traps

What it is

Sofreh is a complete restaurant system as a Next.js 16 and shadcn/ui template: a POS, a kitchen display with an order board and a customer display, a floor plan, reservations, the menu and recipes, stock, guests and loyalty, invoices and cash shifts, reports, the team with a timeclock, and a guest QR menu with ordering and pay at the table. English and Persian (right to left, with the Persian calendar), light and dark. There is no backend: a whole restaurant, "Golnar", with 46 dishes, 24 tables, 16 staff and 120 days of history, is generated in the browser, and its evening service plays out live. The demo opens at 20:12, mid-service. Try it at sofreh.upfork.dev.

This article is for anyone, person or AI, building a rich demo or a frontend-first app without a server: how the POS in one window and the kitchen screen in another stay identical, how the data is generated without blocking the first paint, and seven traps we hit, each with its fix.

One store per tab, kept identical by patches

Every tab holds one immutable copy of the restaurant, and the only way to change it is commit(), an Immer recipe. Immer hands back the change as patches, and those patches are what the other tabs receive:

/** Changes the db through an Immer recipe, broadcasts the patches and schedules a save. */
export function commit(recipe: (d: Draft<Db>) => void, meta: CommitMeta = {}): CommitResult {
  const { db, rev } = dbStore.getState();
  const [next, patches, inverse] = produceWithPatches(db, recipe);
  if (!patches.length) return { patches, inverse };
  dbStore.setState({ db: next, rev: rev + 1 });
  dirty.add(patches);
  if (!meta.local) channel?.post({ kind: "patches", patches, label: meta.label });
  schedulePersist();
  return { patches, inverse };
}

The inverse patches are kept too: the mock API adds latency and can fail on purpose, and a failed write is rolled back by applying them, in every tab. Patches travel on a BroadcastChannel, with localStorage events as a fallback. One tab is the leader, chosen with Web Locks: it runs the live simulation of the evening and saves the demo's state. When it closes, the browser hands the lock to the next tab waiting.

export function electLeader(onLeader: () => void): () => void {
  let released = false;
  let release: (() => void) | undefined;
  if (typeof navigator !== "undefined" && navigator.locks?.request) {
    navigator.locks
      .request("sofreh-leader", () => {
        if (released) return undefined;
        onLeader();
        return new Promise<void>((resolve) => (release = resolve));
      })
      .catch(() => undefined);
  } else onLeader();
  return () => {
    released = true;
    release?.();
  };
}

Because the seed rebuilds the same restaurant every time, the leader saves only the entities a change touched; anything created at runtime gets an id containing "_", so it can't be mistaken for a seed record. Money is integer minor units everywhere.

Today first, history later

Tabs build their history at different times, so a patch from another tab can touch history this tab doesn't have yet. Those patches are skipped, since the leader's save already has them.

Themes without a library

A page that fails on purpose

Sofreh has a gallery of system pages: 404, 403, maintenance, offline, and a demo of the error boundary catching a page that crashes.

Tools and tests

Checked

The pricing engine has 26 unit tests at 100% coverage, and the seed has its own consistency tests (src/mock/seed/tests/invariants.test.ts). All 261 text and background pairs of the five colour presets pass WCAG contrast in light and dark. A review pass screenshots 55 routes in English, Persian, dark and phone width. The end-to-end checks pass against the production build and against the live demo.

Make it yours

Sofreh comes as a release ZIP of the whole Next.js project. docs/BACKEND.md explains how to replace the mock layer with your own API: reads are store subscriptions and writes go through one mutate(), so the screens don't change. site.demo.startTime sets when the demo evening starts (null uses the real time of day), and the store currency re-creates the sample data in that currency.