Product design · ownership · shipping
Green Ridge State Forest campsites are first-come, first-served — managed at a physical signup sheet during limited hours at headquarters. Availability is invisible to anyone not standing in front of that board. The design problem: make the clipboard legible and shareable, honestly — without pretending the app is something it isn’t.
Green Ridge doesn’t expose a reservation API — the Forest Service manages a first-come, first-served signup sheet at headquarters, staffed during limited hours. The operational ground truth lives on that physical board. Campers want planning context (what kind of site is this?) and situational context (what did the board say recently?). A polished “availability” UI that pretends to be authoritative would erode trust faster than no app at all.
Uncertainty is not an edge case in the product. Uncertainty is the product condition. — from the in-repo design process write-up
The design problem became: help people browse and compare sites honestly, surface freshness of clipboard-derived state, and make contribution at HQ feel fast and cooperative—not extractive.
The build wasn’t sequential phases — design, then engineering, then ops. It was concurrent decisions made by the same person. Three choices shaped everything.
The physical signup sheet at HQ didn’t just supply data — it supplied the mental model campers already use on-site. That constraint drove the information architecture more than any wireframe: the grid they reason about at headquarters had to be the grid they see in the app. Any abstraction that lost that fidelity would also lose trust.
Every availability state — fresh, stale, warn, archived — had to be designed twice: once for browsing (map and sites list) and once for contributing (the clipboard flow). A camper arriving at HQ needs to feel like their photo will help others, without making promises the system can’t keep. That’s an editorial and interaction problem, not just a data problem. Uncertainty is the product condition, so freshness language became a first-class design element everywhere.
With one person making all calls, coherence doesn’t come from review cycles — it comes from shared primitives. The semantic design token system and functional design kit weren’t luxuries; they were the mechanism that kept the story consistent across map, admin, marketing, and native shells while surviving pivots without visual regressions. The kit imports real production components — it can’t drift from the app because it is the app.
Photography is the refresh mechanism: a camper at HQ captures what’s on the board so everyone else gets a more current picture—without claiming an official reservation.
Two entry points: the in-app update-from-clipboard flow for signed-in users, and the standalone photo-clipboard landing for social/share campaigns—same API host, consistent outcome semantics.
Field constraints: copy favors “photo” over “scan,” mobile-first layouts, and server-side checks that reinforce trust—e.g. validating image bytes and dimensions, optional EXIF capture date, and an HQ proximity / GPS gate when metadata supports it (skippable paths exist when GPS isn’t present). Those aren’t bureaucratic hurdles; they align contribution with actually being at the board.
Outcomes users see: uploads can become live availability when parsing is confident and dates align; land in pending review when the model or validator is unsure (staff can correct before publish); reject when the image isn’t usable; or join the historic archive when the sheet isn’t current-cycle—so copy and UI never blur those lanes.
The operational artifact in the field: the product mirrors this object—not a reservation database. Tap the card to open the full clipboard photo flow.
The vision layer doesn’t “guess reservations.” It extracts structured rows from a photo; the server validates JSON, applies privacy rules, and routes uncertain work to humans. Exact model IDs live in server config and can change; the architecture below is stable.
POST /api/sheet; Cognito-linked identity where required.
api/src/server.ts (sheet upload route),
api/src/lib/claude.ts (parseSheetImage),
plus the in-repo clipboard pipeline work plan (stages, env, and ops).
Every admin-validated snapshot is a training signal. Corrections made in the review UI feed directly into re-parse quality and the fine-tuning corpus—no separate annotation workflow.
includeInExports build the corpus. Same production preprocessing applied—model trains on what it sees at inference time.
OPENAI_SHEET_MODEL. No code change to deploy.
api/src/lib/sheetParseFewShotDynamic.ts)
:root without forking components.
Time-of-day phases remap the same semantic CSS variables on :root—components don’t fork, tokens do. The interactive kit imports real components and global CSS so the explorer can’t drift from production.
Sheet uploads, vision parse, snapshot lifecycle, and admin review are described step-by-step under Clipboard pipeline and vision model. Operationally: Cognito-protected API, Caddy → Node on Lightsail, systemd + cron, deploy scripts in deploy/.
deploy/ README — deploy & server operationsapi/src/server.ts — API entry, routes & middlewareStandalone HTML landing at site root with OG/Twitter cards, hero narrative, and TestFlight interest capture via the same host API. A share-friendly clipboard landing lowers friction for “photograph the sheet” campaigns.
Capacitor shells load the production URL so a web deploy reaches TestFlight / Play internal users immediately—native polish without forking the product surface.
State where authority lives. Booking stays on the sheet; the app describes last known state and freshness.
In uncertain domains, provenance beats polish. Stale/warn/fresh semantics align map, list, and upload outcomes.
Domain feedback loops beat generic dashboards. Parsed rows, favorites, and historic stays answer “is this working?”
Cleanup is design. Renaming flows, trimming chrome, and fixing mobile keyboards changed trust as much as new features.
AI as collaborator and runtime. Assistants accelerated shipping; vision parsing makes the analog board legible—within guardrails.
Everything worth bookmarking in one place.
docs/user-stories/
deploy/ README
Open the live PWA, the marketing story at site root, or the quick clipboard capture flow — same product, different front doors.
