Skip to content
← All starter build updates

Lifestyle starter

Gather

A seasonal recipe collection with practical meal planning and a shopping list.

Live on VuraUpdated

Ingredient checks persist across routes and reload, with remaining counts and clear controls independent of meal planning. The terracotta recipe and market notebook remains browser-local.

Public sourceBUILD.mdOpen verified demo ↗In-app build guide
Gather: 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 application served from explicit static route entries; browser-local state, not a shared server database.

Learning journal

How to read this starter

Gather is a recipe and meal-planning starter with static recipe routes, client filters, scaled servings and a derived shopping list.

Source map

Planner store

src/state/planner.js

Signals hold filters, weekly plan and serving overrides; computed values derive meals, stats and grocery totals.

Static aliases

scripts/static-aliases.mjs

Recipe detail routes and private planner routes are emitted as concrete Vura pages.

Build page

src/pages/Build.jsx

The guide explains local state, routing and generated aliases for agents.

Recipe day selection

src/pages/RecipeDetail.jsx

A mount-local selected day feeds explicit planner actions rather than hard-coded destinations.

Responsive application stylesheet

src/styles.css

Size the wrapping checkbox label; six equal mobile tracks balance three links above two.

Code patterns worth copying

Choose the target day explicitly

src/pages/RecipeDetail.jsx

The detail page starts on the first empty day but keeps the chosen day as local component state.

const selectedDay = signal(firstOpenDay(), `gather.detailDay.${recipe.slug}`);

Derive grocery totals from the plan

src/state/planner.js

The shopping list is not separately editable state. It is a projection of planned meals plus serving overrides.

const existing = totals.get(key) || { item: ingredient.item, unit: ingredient.unit, amount: 0, recipes: new Set() };

Emit every recipe detail alias

scripts/static-aliases.mjs

Dataset-driven aliases prevent the static host from treating a known recipe URL like an unknown SPA fallback.

...recipes.map((recipe) => [

Store market checks by ingredient identity

src/state/planner.js

Checked keys survive navigation and reload; progress counts only keys in the current computed market list.

export const ingredientKey = (ingredient) => `${ingredient.item}|${ingredient.unit}`;

Real issues and fixes

A fixed Add to Monday button overwrote the lesson

Problem
Recipe detail and card actions sent meals to fixed days, so the planner felt fake and hid duplicate/full-day behavior.
Fix
Expose native day selects backed by firstOpenDay(), dayHasOpenSlot(), and daySlotLabel(), then keep button text reactive with a function child.
Proof
Browser smoke selects Thursday, verifies the Thursday planner card, and checks that full-day or duplicate choices explain the no-op.
Takeaway
Small native controls can teach state transitions more clearly than a hard-coded demo shortcut.

DOM-only purchased marks disappeared on navigation

Problem
Native checkboxes appeared checked but their completion was not part of the planner snapshot.
Fix
Persist checkedIngredients alongside plan and servings. Ignore unknown keys, default old snapshots to no checks, and make Clear checks leave meals/servings intact.
Proof
Checklist unit and browser flows verify navigation, reload, clearing, planner reset and denied-storage session editing.
Takeaway
Persist user intent by stable item identity while deriving completion from the current list.

Put the checkbox tap target on its label

Problem
A small native checkbox is hard to tap, but enlarging the glyph itself distorts the control.
Fix
Give the shopping-row label a 44px minimum height and leave the native checkbox width and height automatic.
Proof
The browser regression measures all 21 seeded checklist labels at desktop/mobile widths, requiring 44px labels and checkbox widths no greater than 24px.
Takeaway
Enlarge the associated label hit area while preserving native control geometry.

What went smoothly

  • The shopping list came naturally from computed aggregation over planned meals.
  • Route aliases derive from the recipe dataset, so new recipes produce direct detail URLs during build.
  • The computed grocery quantities remained unchanged; stable item/unit keys layered checklist completion over the existing plan.
  • Shopping labels provide a 44px tap area without enlarging native checkbox glyphs; five mobile navigation links form deliberate rows of three and two.

Boundaries to preserve

  • Recipes and nutrition-like details are fixtures for interaction design, not a live recipe API.
  • Planner and shopping list state stays in the browser.

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

    Ingredient checks persist across routes and reload, with remaining counts and clear controls independent of meal planning. The terracotta recipe and market notebook remains browser-local.

  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

    Persisting ingredient checklist state across navigation, with remaining counts and clear controls. The current source and deployment links still identify the previous verified release.

  5. · Live on Vura

    Live corrections verified after independent follow-up

    Recipe planning now selects a day and rejects a full or duplicate slot. Serving controls, planning persistence and recipe routes passed the live workflow check.

  6. · Live on Vura

    Design refinement released for live workflow review

    Recipe planning now selects a day and rejects a full or duplicate slot. Serving controls, planning persistence and recipe routes passed the live workflow check.

  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 implementation ready for review

    The first implementation is available locally. It is not yet a published source reference or a verified Vura deployment.

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