Skip to content
← All starter build updates

Creative starter

Fieldwork

An editorial research lab site exploring artificial intelligence and visual culture.

Live on VuraUpdated

Four distinct authored research dossiers present questions, methods, specimens and limits. The shared seeded instrument is described honestly, with a clearer mobile accession heading and adjacent navigation.

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

Fieldwork is a client-rendered creative research archive with deterministic canvas art, filters and static aliases for every bundled research record.

Source map

Shared gallery state

src/state/gallery.js

Module signals hold filters, canvas seed, drawing mode and the selected research slug.

Canvas lifecycle

src/components/GenerativeCanvas.jsx

The component draws from signal accessors and cleans up resize/keyboard listeners.

Alias generation

scripts/generate-static-aliases.mjs

Deployment aliases derive from the projects dataset so every detail route is directly openable.

Browser smoke

tests/smoke.mjs

The smoke test compares canvas pixels, opens every detail route and screenshots desktop/mobile pages.

Authored research dossiers

src/data/dossiers.js

Each accession has a question, method, local specimens, reading notes and explicit limits; these are authored studies, not measured research.

Stable research card frame

src/components/ProjectCard.jsx

Card summaries stay top-aligned while only the footer stretches.

Dossier detail renderer

src/pages/ProjectDetailPage.jsx

Known route content selects its authored dossier and adjacent record without duplicating mutable canvas state.

Responsive application stylesheet

src/styles.css

Bounded type and contained code preserve the archive specimen and dossier hierarchy.

Code patterns worth copying

Use signal accessors as effect dependencies

src/components/GenerativeCanvas.jsx

Passing the accessor lets the effect observe future signal writes. Passing canvasSeed() would sample one value and miss redraws.

useEffect(() => {
    draw();
    const onResize = () => draw();
    const onKey = (event) => {
      if (event.target && ['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName)) return;
      if (event.key.toLowerCase() === 'n') {
        handleNextSeed();
      }

Generate route aliases from the content source

scripts/generate-static-aliases.mjs

The deploy shape follows the data list, so new records get static entry points when the dataset changes.

const aliases = [
  '/projects',
  ...projects.map((project) => `/projects/${project.slug}`),
  '/build',
  '/404',
];

Let only the card footer stretch

src/components/ProjectCard.jsx

Variable summaries stay top-aligned; the CSS pushes only the tag and link footer to the bottom.

<article class="project-card" style={{ '--project-accent': project.accent }}>

Keep immutable route content out of mutable state

src/pages/ProjectDetailPage.jsx

The route selects authored content once. Signals remain reserved for the shared canvas controls rather than duplicating dossier state.

const dossier = dossiers[project.slug];

Real issues and fixes

The first canvas effect read snapshots instead of subscribing

Problem
The dependency array used sampled values, so the effect did not rerun after the seed or drawing mode changed.
Fix
Use the signal accessors as dependencies and verify the canvas data URL changes after the seed button.
Proof
The browser smoke test now compares canvas pixels after a seed change and opens every research detail route directly.
Takeaway
When an effect must follow a signal over time, pass the accessor, not a sampled value.

Before

useEffect(() => {
  draw();
}, [canvasSeed(), drawingMode()]);

After

useEffect(() => {
  draw();
}, [canvasSeed, drawingMode]);

Fieldwork passed deploy checks before visual review passed

Problem
The live host, source and route checks passed, but the first visual direction did not meet the public showcase bar.
Fix
Replace the first dark layout with a light research archive and a dominant canvas specimen, then review actual desktop and 390px captures separately from functional checks.
Proof
The revised hosted artifact passed route checks and independent visual review; the first functional pass remains recorded as a different claim.
Takeaway
Deployment success and design quality are different claims. The public journal should name both.

A PASS line is not enough when the wrapper stays alive

Problem
A browser smoke can print a passing summary while the Node wrapper still holds an open handle and eventually times out.
Fix
Launch the owned preview process directly, match readiness after stripping terminal control characters, and await bounded browser/server cleanup.
Proof
Isolated repository copies exited after their smoke assertions, and the repaired Linux workflow passed. A colorized readiness regression covers the runner-specific failure.
Takeaway
For public starter evidence, process exit is part of the proof, not bookkeeping after the proof.

The dossier must contain what its metadata promises

Problem
Early metadata counted fragments and measurements that the detail pages did not actually show.
Fix
Author a complete dossier per record, render three local specimens and reading notes, and state which observations are design reflections rather than measured results.
Proof
Dossier tests require every known project to have a distinct question and complete content; browser smoke opens each record and follows next-record navigation.
Takeaway
Research-style presentation must distinguish authored specimens from empirical evidence.

What went smoothly

  • Deriving detail aliases from the dataset removed the chance of forgetting a single research record.
  • The canvas smoke test checks pixel changes, not just button text, so it catches a silent rendering no-op.
  • The existing canvas accessor dependencies, listener cleanup and dataset-derived aliases supported the dossiers unchanged; pixel checks still verify redraw behavior.
  • The paper, ink and citron archive retains its deterministic canvas and stable card footer while local sans-serif copy and 44px controls unify dossier routes.

Boundaries to preserve

  • Canvas art is deterministic browser drawing, not live AI inference.
  • The archive is client rendered; research detail content is not request-time SSR article HTML.

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

    Four distinct authored research dossiers present questions, methods, specimens and limits. The shared seeded instrument is described honestly, with a clearer mobile accession heading and adjacent navigation.

  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

    Deepening per-record research dossiers and clarifying the shared seeded instrument and mobile accession heading. The current source and deployment links still identify the previous verified release.

  5. · Live on Vura

    Live corrections verified after independent follow-up

    The seeded canvas, aligned archive cards and full-width record hierarchy are live. Keyboard canvas controls and direct research routes passed the fresh hosted workflow check.

  6. · Live on Vura

    Design refinement released for live workflow review

    The seeded canvas, aligned archive cards and full-width record hierarchy are live. Keyboard canvas controls and direct research routes passed the fresh hosted 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. · Live on Vura

    Visual revision released

    A light archive frame and canvas-first layout replace the first direction. The142-line source guide explains the redraw failure, deployment alias mismatch and CI wrapper cleanup.

  13. · Live on Vura

    Design review raised the bar

    The hosted baseline remains available for inspection. A visual specialist is revising the layout, while code and learning-reference specialists review the collection.

  14. · Live on Vura

    First public starter released

    Clean-install and browser checks passed, source was published, and the Vura-hosted application and build guide were checked on their real HTTPS host.

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