Skip to content
← All starter build updates

Lifestyle starter

Bloom

A garden journal for tracking plants, observations and seasonal care.

Live on VuraUpdated

Dated manual watering updates reminders, undated legacy records stay honest, plot assignment displays correctly and observations have history. Botanical silhouettes and responsive code guides are verified.

Public sourceBUILD.mdOpen verified demo ↗In-app build guide
Bloom: 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

Bloom is a gardening planner starter with plant catalog routes, plot assignments, watering journal state and derived care queues.

Source map

Garden store

src/state/garden.js

Signals store plot assignments, watering journal, filter and persistence status.

Routes

src/routes.js

The app includes catalog, plant detail, plots, journal, build and fallback routes.

Build page

src/pages/Build.jsx

The in-app guide explains local state, aliases and browser-only durability.

Dated care and legacy migration

src/utils/care.js

Pure explicit-clock care math ignores invalid/future watering and observations; legacy notes keep unknown dates as null.

Responsive application stylesheet

src/styles.css

Content-fit plant panels and local typography preserve dated watering and assignment state.

Code patterns worth copying

Move one plant to one plot

src/state/garden.js

The function rebuilds known plot buckets and removes the selected plant from every previous bed before adding it to the target.

export function assignPlant(plot, slug) {

Derive a care queue from source state

src/state/garden.js

The queue reacts to both the season filter and journal entries without becoming a separate mutable list.

export const careQueue = computed(() => filteredPlants()
  .map((plant) => ({
    ...plant,
    ...careForPlant(plant, wateringJournal(), new Date(clock())),
  }))
  .sort((a, b) => ({ overdue: 0, today: 1, check: 2, soon: 3, rest: 4 }[a.urgency] - { overdue: 0, today: 1, check: 2, soon: 3, rest: 4 }[b.urgency])));

Use local calendar days for the next soil check

src/utils/care.js

No valid dated watering means Check soil, not a fabricated overdue date. Observations remain notes, not watering events.

const nextCare = midnight(latest.observedAt);
  nextCare.setDate(nextCare.getDate() + plant.waterEvery);

Use the shared stylesheet on application routes

src/styles.css

Content-fit plant panels and local typography preserve dated watering and assignment state.

.seed-packets {
  grid-area: packets;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  align-items: start;
}

Real issues and fixes

Plot assignment is a single-location state bucket

Problem
Moving a plant by only appending it to the target plot could leave the same plant visible in two beds.
Fix
assignPlant rebuilds every known plot bucket, filters the plant out everywhere, then appends it to the selected plot.
Proof
Unit and browser checks assert Sun Gold Tomato appears exactly once after moving to the kitchen bed.
Takeaway
When the UI offers one select per item, the state mutation should enforce that same uniqueness invariant.

Stored garden plans need shape validation

Problem
Old localStorage can contain plots with unknown plant slugs or malformed arrays.
Fix
safeLoad checks validPlan before restoring, otherwise it falls back to seedPlan and initialJournal.
Proof
Startup either restores a valid plan or reports that seed data loaded.
Takeaway
Small starters should show recovery paths because agents will copy them into larger apps.

Cadence alone could not react to watering

Problem
Logging water never changed the Today badge because care used only fixture cadence; older Today labels had no trustworthy timestamp.
Fix
Compute care from valid non-future dated watering with an explicit clock and local calendar days. Migrate undated legacy notes to observedAt:null, preserve text, label uncertainty and bind selects to current unique plot assignments.
Proof
Unit tests cover today/next day/overdue, future/invalid timestamps and unknown legacy dates; browser checks watering, observations, assignment continuity and session-only storage.
Takeaway
Preserve unknown dates as unknown; manual care reminders are not sensor measurements.

Expanded source guides exposed mobile overflow

Problem
Long source snippets widened the document after the notebook guide grew, especially with wider fallback monospace fonts.
Fix
Let guide grid children shrink with min-width:0, wrap inline tokens and constrain preformatted code to its own scrolling box without altering copied source text.
Proof
The 390px browser regression checks normal and Courier fallback fonts and asserts intact literal source while the document remains within the viewport.
Takeaway
Contain literal code within its own scroller instead of changing source text to fit the page.

What went smoothly

  • The care queue is derived from plant fixtures plus the watering journal, so logging water changes the queue without manual sync code.
  • Named plot keys make the state easy to inspect in exported JSON and localStorage.
  • Unique plot assignment, denied-storage fallback and static aliases supported the dated notebook; the clock refresh timer/focus listener are cleaned up on unmount.
  • The dated notebook retains botanical SVG silhouettes and real plot assignments while quiet surfaces and 44px controls unify catalog and plant detail routes.

Boundaries to preserve

  • Plant and care data are fictional fixtures.
  • Garden state is browser-local and not a synchronized account.

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

    Dated manual watering updates reminders, undated legacy records stay honest, plot assignment displays correctly and observations have history. Botanical silhouettes and responsive code guides are verified.

  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

    Repairing dated watering urgency and plot assignment display, and adding observations and botanical detail. The current source and deployment links still identify the previous verified release.

  5. · Live on Vura

    Live corrections verified after independent follow-up

    The garden uses packet illustrations, meaningful bed shapes/plant dots and an aligned care queue. Plot assignments and plant routes passed live checks.

  6. · Live on Vura

    Design refinement released for live workflow review

    The garden uses packet illustrations, meaningful bed shapes/plant dots and an aligned care queue. Plot assignments and plant routes passed live checks.

  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; documentation-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. · Building

    Implementation started

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

  14. · 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