แม่บ้าน Maebaan · Home Inventory
Thai-language household inventory mobile app. Implementation of
design/Home Inventory.dc.html (Claude Design canvas doc) as a
Vite + React + TypeScript app, backed by a Google Sheet via Vercel
serverless functions.
Live: https://maebaan-home-inventory.vercel.app
Full-bleed on phones and installable (Add to Home Screen → standalone, no URL
bar via manifest.webmanifest + apple-mobile-web-app-capable); on wide
screens it renders inside a scaled iPhone frame (src/IOSFrame.tsx).
Run
npm install
npx vercel dev # http://localhost:5273 — app + /api together (needs env, below)
npm run dev # plain Vite — /api unavailable, app runs on seed data (ตัวอย่าง pill)
npm run build # type-check + production bundle -> dist/
npm test # vitest — 59 tests (domain logic, mappers, mutate handler)
Backend
api/state.ts GET → { items, locations, history } from the Sheetapi/mutate.ts POST → { type, owner, ...payload } → applies applyMutation, writes the Sheet, returns the fresh snapshotapi/init.ts POST → idempotent: creates the 3 tabs + headers + seed from src/data.ts if empty- Auth:
google-auth-library JWT from env GOOGLE_SERVICE_ACCOUNT_JSON; sheet id from env SHEET_ID. Server-only.
- The Sheet must be shared with the service-account email as Editor.
- Concurrency: last-write-wins;
items/locations tabs rewritten in full per mutation, history append-only (newest-first on read, Asia/Bangkok timestamps).
- The client writes to
/api only after a successful GET /api/state (hydrated); a boot-time failure = local-only demo session on seed data.
Vercel env vars
| var | value |
|---|
SHEET_ID | the id from the Sheet URL |
GOOGLE_SERVICE_ACCOUNT_JSON | full contents of the service-account JSON key |
After the first deploy, POST /api/init once to seed the Sheet.
Design & build docs
docs/superpowers/specs/2026-09-06-sheets-backend-vercel-design.md (spec),
docs/superpowers/plans/2026-09-06-sheets-backend-vercel.md (implementation plan).
What it does
A clay / neumorphic single-screen phone UI with a bottom nav and 10 screens:
| Screen | Purpose |
|---|
| หน้าแรก (home) | ready-% headline, stat tiles, pending count, quick actions, alert cards, LINE daily summary |
| รายการรอบันทึก (pending) | photos waiting to be filed (from app / LINE Official) → ADD / MOVE / USE |
| กล้อง (cam) | capture step 1 of every record; choose event type; send now or to pending |
| เก็บของ (add) | ADD — multi-row; name, kind, EXP (days or date) for food, qty, location search |
| ย้ายของ (move) | MOVE — pick an existing item, qty, destination location |
| ใช้ของ (use) | USE — search stock, decrement, low/out warnings |
| ของในบ้าน (inv) | browse by location or item, live qty / EXP badges |
| ประวัติ (hist) | read-only audit trail, filter by item / date range / location |
| รายการซื้อ (shop) | auto shopping list: out / low / bought, aggregated by name |
| ตั้งค่า (set) | clay tone (lilac / peach / mint), storage places CRUD, per-item min/target, notifications |
State is in-memory and seeded from the design doc (src/data.ts); "today" is
pinned to 2026-09-06 so the demo alerts stay stable.
Layout
design/Home Inventory.dc.html source design doc (canvas templating)
design/home-inventory-mockup.jsx earlier rough React mockup (reference only)
src/data.ts seed data (locations, items, pending, history, tones)
src/logic.ts pure domain logic: days(), autoCode(), shopRows(), applyAdd/Move/Use()
src/logic.test.ts unit tests for the above
src/css.ts CSS-string -> React style-object parser (lets design styles paste verbatim)
src/ui.ts style-string factories (chip, codeBadge, pill, shot, ...)
src/icons.tsx inline SVGs from the design
src/IOSFrame.tsx 440x956 iPhone shell, scales to fit (replaces the doc's ios-frame.jsx import)
src/App.tsx state machine + view-model builder + screen components
support.js / ios-frame.jsx from the original design are the Claude Design
runtime and are not needed here — the templating (sc-if / sc-for / {{ }})
was ported to JSX and the device frame reimplemented in IOSFrame.tsx.
