Skip to content
← All starter build updates

Commerce starter

Cartograph

An outdoor gear shop for exploring products and assembling a useful kit.

Live on VuraUpdated

Basket snapshots reject stale quote replies, quantity replacement preserves focus and receipt reset clears the visible record immediately. Product and quote controls appear earlier without changing its outdoor identity.

Public sourceBUILD.mdOpen verified demo ↗In-app build guide
Cartograph: actual released desktop product view after the shared typography refinement.
Preview captured · Explore the product ↗

Build phase

  1. PlannedComplete
  2. BuildingComplete
  3. Local checks passedComplete
  4. In reviewComplete
  5. Live on VuraCurrent phase

This tracks the recorded release phase. The checks below include later findings and ongoing refinements.

Product scope and intended patterns

The following describes the intended reference. Features are not a verification claim; recorded check results below define what has actually been tested.

Client-rendered workspace with explicit static route entries and a real bounded serverless API; demo data boundaries documented.

Learning journal

How to read this starter

Cartograph is a hybrid commerce reference with static catalog routes, local cart state and a serverless field-stock quote endpoint.

Source map

Cart store

src/state/cart.js

Signals hold filters, cart, quote, receipt and storage notices; computed values derive cart lines and totals.

Quote API

src/api/quote.js

The function validates known products, stock limits and totals, then returns no-store JSON.

Vura build package

scripts/build-vura.mjs

The build emits static aliases, bundles /api/quote and writes the Vura manifest.

API tests

test/cartograph.test.js

Tests cover quote totals, over-stock rejection, malformed JSON, oversized streams and unknown products.

Receipt render boundary

src/pages/Receipt.jsx

The component returns a reactive function that reads receipt() and selects the empty/full view after Reset.

Native quantity editing

src/pages/Cart.jsx

Canonical quantities and temporary DOM text coexist during keyboard replacement; valid commits keep totals live.

Responsive application stylesheet

src/styles.css

Product and cart grids align at the start; gear illustrations keep their source geometry.

Code patterns worth copying

Validate quantity text before committing it

src/pages/Cart.jsx

The parser is intentionally separate from the input so both live edits and blur commits share the same 1-20 rule.

function parseQuantity(value) {
  if (!/^\d+$/.test(value)) return null;
  const next = Number(value);
  if (!Number.isSafeInteger(next) || next < 1 || next > 20) return null;
  return next;
}

Let the DOM hold a blank draft quantity

src/pages/Cart.jsx

Cart state stays canonical while the native input can temporarily be blank during select-all/backspace/type replacement.

defaultValue={quantity()}

Validate quote requests on the function boundary

src/api/quote.js

The client cart is useful context, but stock and quantity checks run again in the serverless function.

const acceptedQuantity = Math.min(quantity, product.stock);

Read the receipt inside the reactive branch

src/pages/Receipt.jsx

Reset clears both state and visible receipt immediately; a setup-time snapshot would keep the old receipt until navigation.

return () => {
    const current = receipt();
    if (!current) {

Real issues and fixes

Blank quantity drafts should not remove the row

Problem
Selecting a quantity, backspacing, then typing a replacement briefly produced an empty string. Converting that to Number removed the cart line and dropped focus.
Fix
parseQuantity accepts only 1-20. The native input owns temporary text with defaultValue, updateQuantity commits valid changes, and commitQuantity restores invalid blur to the canonical quantity. There is no separate quantityDrafts signal.
Proof
Browser smoke select-all/backspace/types 12, asserts the same input remains focused, sees subtotal $2,976, and confirms localStorage persisted 12.
Takeaway
For replacement editing, canonical app state and transient DOM text can intentionally be different for a few keystrokes.

Product route aliases should come from catalog data

Problem
A static commerce demo with hand-written aliases can miss a product detail route.
Fix
The Vura build imports products and emits one static alias per product slug, plus cart, receipt, build and 404 pages.
Proof
The build script reports the generated page count and API bundle for /api/quote.
Takeaway
Use the same content source for UI, API validation and static hosting shape.

A quote belongs to its submitted basket

Problem
A late successful quote could be accepted after quantities changed; Reset receipt also cleared storage while leaving the sampled receipt on screen.
Fix
Capture sorted basketKey and submitted lines, block duplicate pending quotes, discard mismatched responses and require a current successful quote before writing. Render receipt() inside the returned reactive branch.
Proof
Delayed-response regressions reject stale baskets; receipt browser checks require immediate empty UI, null storage, and empty state after back/reload. Keyboard quantity replacement remains covered.
Takeaway
Async results need snapshot ownership, and resettable views must read current state reactively.

What went smoothly

  • Product slugs drive cards, details, quote validation and static aliases from one dataset.
  • The quote function imports shared product data but not browser cart state, which keeps the serverless boundary clean.
  • Shared product data and bounded quote parsing stayed intact; basket ownership and reactive receipt reset fit the existing native quantity draft behavior.
  • Content-fit equipment and cart panels avoid stretching short content while shared local typography and 44px targets retain native quantity editing.

Boundaries to preserve

  • Stock and receipts are fixtures; no order, payment, fulfillment or durable inventory is created.
  • The serverless quote validates the posted cart but does not reserve stock across visitors.

Verification record

Build journal

  1. · Live on Vura

    Shared typography release captured from production

    Published shared typography and responsive control refinements are tied to the exact live deployment and source revision. Actual released captures replace the previous gallery preview; existing product behavior and source-grounded lessons are retained.

  2. · Live on Vura

    Product-depth iteration released and exercised

    Basket snapshots reject stale quote replies, quantity replacement preserves focus and receipt reset clears the visible record immediately. Product and quote controls appear earlier without changing its outdoor identity.

  3. · Live on Vura

    Reviewed source ready for release verification

    Unique product identities and deeper workflows are implemented and independently reviewed. Existing releases remain accessible while new source is published and fresh deployments are exercised.

  4. · Live on Vura

    Product-depth iteration in progress

    Guarding server quotes against changed baskets and stale replies, with earlier product and quote controls. The current source and deployment links still identify the previous verified release.

  5. · Live on Vura

    Live corrections verified after independent follow-up

    The cart holds intermediate blank quantity text without removing a SKU; valid replacement12 preserves focus, totals and local persistence. Product routes use field-stock customer copy.

  6. · Live on Vura

    Design refinement released for live workflow review

    The outfitter now has aligned product cards and useful kit-manifest copy. Live quantity replacement found an empty-draft removal issue; that repair is being tested.

  7. · Live on Vura

    Independent live design review started

    The existing public app remains available while a new design review examines hierarchy, typography, navigation and workflow clarity. Actual findings and before/after repairs will be recorded as they are verified.

  8. · Live on Vura

    Hosted reference rechecked after documentation review

    Public source, green CI and the live app were checked together after the clean-machine documentation pass. Lessons and limitations now reflect the implemented code rather than pending pre-release work.

  9. · Live on Vura

    Final source and CI checkpoint verified

    The public source and build reference match the released learning journal, and the source workflow is green. The demo remains live at the same verified deployment; README and CI-only refinements did not change application code.

  10. · Live on Vura

    Clean-machine browser setup documented

    The README now installs the locked Chromium engine after npm ci and explains the Linux system-library prerequisite. The hosted application is unchanged; code examples, repair notes and boundaries remain source-backed.

  11. · Live on Vura

    Public template and Vura release

    The reviewed implementation is available from its independent repository and real hosted URL. Detailed code examples and actual repair notes are linked below.

  12. · In review

    Design review cleared; release verification underway

    The local implementation is complete and revised visual evidence has passed review. Source and demo links will appear only after publication and hosted verification.

  13. · In review

    Local build ready for specialist review

    The implementation owner completed the local build and workflow checks. No public source release or hosted verification is claimed yet.

  14. · Building

    Implementation started

    The standalone project files exist and the product build is active. No local verification or live release is claimed yet.

  15. · Planned

    Product scope recorded

    This is a planned starter, not a working release. Implementation, tests, public source and deployment evidence will be added as they are completed.

Implementation lessons

Known limitations

Remaining work and blockers

No release blockers are recorded for this snapshot.

Using this as an agent reference

Read the public README and BUILD.md, reproduce the recorded checks and inspect the source before adapting the starter. A live demo, where available, provides separate deployed evidence.

Agent workflowSignalsEffectsGlobal stateRouting