Sponge Demo

A clickable prototype, customizable per prospect, used by a Sponge presenter on sales calls to make Sponge's value land in 1–3 concrete moments grounded in the prospect's own business. Sponge itself is the operating layer for companies running many stateful entities in parallel. The demo displaces generic walkthrough decks and Figma prototypes; it positions Sponge against Slack / CRMs / project trackers / Notion AI / Glean.

Architecture

• Repo shape: single-package, pnpm (no monorepo)
• Backend: none (frontend-only prototype — explicit non-goal in v1)
• Database: none — static JSON config + data files per customer (demos/<slug>/), validated by Zod
• Frontend: Vite + React 19 + TypeScript (strict) + Tailwind 4 + shadcn/ui + React Router (client-only)
• Shared contracts: Zod (src/modules/data-schema/)
• Deploy: Vercel, token-gated (Edge Middleware gate + per-link tokens)

Quick Start

cp .env.example .env.local        # demo runtime needs no secrets to run locally
pnpm install
pnpm run demo -- --customer=<slug>   # boots Vite with that customer's config

Customer configs live in demos/<slug>/ (a config.json plus data files). _default is the generic config; _template is the authoring skeleton.

Commands

Command	Description
pnpm run dev	Vite dev server (default / no customer)
pnpm run demo -- --customer=<slug>	Boot demo for a specific customer config
pnpm run build	Production bundle
pnpm run lint	Biome lint + format check
pnpm run typecheck	tsc --noEmit (strict)
pnpm run test	Vitest unit + component (RTL)
pnpm run test:e2e	Playwright E2E (headless chromium)
pnpm run validate-configs	Zod-validate every demos/<slug>/*.json

Layout

src/            React app — scenes, modules (data-schema, config-loader,
                link-token, telemetry-ingest, spot-check), components
demos/          Per-customer static configs + data (Zod-validated)
api/            Vercel Edge function (telemetry ingest)
middleware.ts   Vercel Edge Middleware — token gate (fail-closed)
design/         Design system + per-scene HTML references
e2e/            Playwright specs + visual rehearsal sweep
scripts/        demo runner, config validator

Hosting & access

Production is token-gated: the bare URL returns HTTP 401; access requires a per-link ?token=<minted> credential bound (HMAC) to a customer slug via DEMO_TOKEN_SECRET. Tokens are minted with mint({ slug }, secret) from src/modules/link-token.

License

See LICENSE if present; otherwise all rights reserved.