J6 — Household setup

One-time onboarding journey · Screens A1, A2, A3/D3, A4

v1.0
Screens: 4
Flow: A1 → A2 → A3 → A2 → [invite] → A4
J6

Household setup

One-time onboarding. Account creation → household naming → staples → invite.

A1 → A2 → A3 → A2 → [invite] → A4

Sign up

A1
First screen. Creates user_account. No navigation chrome (pre-auth). Desktop: full-viewport split — brand identity left, signup form right. Not a centered card — the brand section fills the entire left half.
V2 · Split layout — brand left fills viewport height, form right
Mobile · 320px
9:41●●● WiFi 🔋
🥗
Mealplan
Plan meals, eat well, waste less
Create your account
You'll set up your household next.
Already have an account? Log in
Desktop · 1040px
🥗
Mealplan
Plan your week's dinners. Get variety-aware suggestions. Shop together as a household.
📅
Plan
🍳
Cook
🛒
Shop
Create your account
You'll set up your household next.
Already have an account? Log in

A1 · Sign up

/* Pre-auth. No nav chrome. Desktop: full-viewport 2-col split. Brand ~42% / Form ~58%.
 * Mobile: brand as ~120px banner, form below.
 * Brand section: green-dark bg. Contains logo, tagline, 3 feature icons.
 * Form section: page bg. Form max-width 380px. Not a card — just content on the page.
 * Writes: user_account INSERT → redirect A2 */
ElementValueNotes
Desktop layout
Brand panel440px fixed, green-dark bg, content centered verticallyLogo 64px + name Fraunces 36px + tagline 15px + 3 feature icons
Form panelflex:1, page bg, content centered vertically, 48px 56px paddingForm max-width 380px. Not wrapped in a card.
Mobile layout
Brand banner~120px, green-dark bg, centeredLogo 28px + name 22px + tagline 12px
FormFull width, 24px 20px paddingSame fields, smaller type sizes
Data
Writesuser_account INSERTsystem_role='user', is_active=true → A2

Household setup

A2
Name household + optional member invite. Desktop: full-page layout with a left illustration/progress column and the form on the right. Not a floating card — a structured page with clear sections.
V1 · Simple form — desktop: progress sidebar left, form right
Mobile · 320px
9:42●●● WiFi 🔋
Step 1 of 3
Name your household
This appears in the sidebar and is shared with all members.
Invite members (optional)
You can skip this and invite people later from settings.
Desktop · 1040px
🥗
Mealplan
1
Name your household
Give your family a name
2
Set up pantry staples
What you always have at home
3
Invite members
Share with your household
Name your household
This name appears in the sidebar and is shared with all members.
Invite members (optional)
You can skip this and invite people later from settings.

A2 · Household setup

/* Desktop: progress sidebar (300px, surface bg) + form area (flex:1, page bg).
 * Progress sidebar shows: app logo + 3 numbered steps (current = green circle, future = subtle).
 * Form area: content centered vertically, max-width 420px. Not a card — content on page bg.
 * Mobile: full-width form with step indicator text at top. No progress sidebar.
 * Writes: household INSERT + household_member INSERT (role=planner) → A3 */
ElementValueNotes
Desktop layout
Progress sidebar300px, surface bg, border-rightApp logo top + numbered steps. Current step: green circle.
Form areaflex:1, page bg, centered contentmax-width 420px. Larger input (16px, 12px padding).
Step circles28px diameter. Active: green bg #fff text. Future: subtle bg muted text.Labels: 13px name + 11px description below
Mobile
Step indicator"Step 1 of 3" eyebrow textNo sidebar, text-only progress
FormFull width, 24px 20px paddingSame fields

Pantry staples

A3 / D3
Toggle staple ingredients by category. Desktop: same progress sidebar as A2 (step 2 active) + content area with a multi-column chip grid. The chips flow naturally across the full content width — no card wrapper needed.
V2 · Categorized list — desktop: progress sidebar + 2-col category grid
Mobile · 320px
9:43●●● WiFi 🔋
Step 2 of 3
Your pantry staples
These won't appear on your shopping list. Tap to toggle.
Oils & fats
Olive oilButterCoconut oil
Spices
SaltPepperGarlicCuminPaprika
Grains & pasta
RicePastaFlour
Sauces
Soy sauceFish sauceVinegar
Desktop · 1040px
🥗
Mealplan
✓
Name your household
Smith family
2
Set up pantry staples
What you always have at home
3
Invite members
Your pantry staples
These items won't appear on your shopping list. Click to toggle. You can always change these later in settings.
Oils & fats
Olive oilButterCoconut oilVegetable oil
Spices & seasonings
SaltPepperGarlicCuminPaprikaChili flakesOreganoCinnamon
Grains & pasta
RicePastaFlourBreadcrumbsCouscous
Sauces & condiments
Soy sauceFish sauceVinegarMustardKetchup
Baking
SugarBaking powderVanilla extract
Dairy & basics
EggsMilkCreamCheese
Skip for now

A3/D3 · Pantry staples

/* Desktop onboarding: progress sidebar (300px, step 2 active) + content area with 2-col category grid.
 * Categories flow in a CSS grid (2 columns, 24px row gap, 32px col gap).
 * Chips sit directly on the page bg — no card wrappers.
 * Desktop settings (D3): same chip grid but inside sidebar+topbar layout (no progress sidebar).
 * Mobile: single-column chip list, full width.
 * Chip toggle: UPDATE ingredient SET is_staple. Debounced 300ms. */
ElementValueNotes
Desktop onboarding
Progress sidebar300px, surface bg. Step 1 = ✓ completed. Step 2 = green active.Same sidebar as A2, reused component.
Category gridgrid-template-columns: 1fr 1fr. gap: 24px 32px.Categories from ingredient_category, sorted by sort_order.
Chips12px/500, 6px 12px pad, 20px radius. Selected: green-tint/green-light/green-dark.Direct on page bg. No card wrapper.
Desktop settings (D3)
LayoutApp sidebar (224px) + topbar ("Staples") + content with 3-col gridWider content area → 3 columns for categories.

Join household

A4
Member accepts invite. Desktop: split layout like A1 — left side shows the household identity (name, who invited), right side has the signup form. The left panel uses green-tint (not green-dark) since this is a welcoming join screen, not a brand-first screen.
V2 · Welcome card — desktop: household identity left, join form right
Mobile · 320px
10:15●●● WiFi 🔋
🥗
Smith family
Sarah invited you to join their meal planner
You'll be able to view the weekly meal plan and check off items on the shared shopping list.
Desktop · 1040px
🥗
Smith family
Sarah invited you to join
What you'll be able to do:
📅 View the weekly meal plan
🛒 Check off shopping list items
➕ Add items to the list
Join the household
Create your account to get started.
Already have an account? Log in instead

A4 · Join household

/* Desktop: split layout. Left (400px, green-tint bg): household identity + permissions list.
 * Right (flex:1, page bg): signup form max-width 380px.
 * Left panel uses green-tint (welcoming) not green-dark (brand-first).
 * Mobile: green-tint banner at top + form below.
 * Transaction: user_account INSERT + household_member INSERT (role=member) + household_invite UPDATE → C1 */
ElementValueNotes
Desktop
Identity panel400px, green-tint bg, centered contentLogo 64px + name Fraunces 32px + inviter + permissions list
Form panelflex:1, page bg, max-width 380pxSame signup fields as A1

Implementation Guide — J6 Household Setup

This journey is completed once when the app is first used. The planner creates an account, names the household, defines pantry staples, and invites household members.

Journey Flow

  1. A1 — Sign up: New user creates account with name, email, password. Writes user_account → redirects to A2.
  2. A2 — Household setup: Planner names household (e.g. "Smith family"), optionally generates invite link. Writes household + household_member (role=planner) → redirects to A3.
  3. A3 — Pantry staples: Toggle staple ingredients by category. Debounced 300ms save. Updates ingredient.is_staple. Same component as D3 in settings.
  4. A4 — Join household: Invited member opens link, sees household identity, creates account. Writes user_account + household_member (role=member) + updates household_invite → redirects to C1.

Roles

RoleCreated atAccess
plannerA2 (automatic)Full access to all 15 screens
memberA4 (on invite accept)C1 read-only + D1 view/check/add

Layout Rules

Design Constraints

Data Operations

ScreenWritesReads
A1user_account INSERT—
A2household INSERT, household_member INSERT (role=planner), household_invite INSERT (optional)—
A3/D3ingredient UPDATE (is_staple) — debounced 300msingredient SELECT grouped by ingredient_category
A4user_account INSERT, household_member INSERT (role=member), household_invite UPDATEhousehold_invite SELECT (validates code), household SELECT (name, inviter)

Accessibility

Preconditions & Dependencies