J1 — Add a Recipe

Add a recipe

Save recipe with ingredients, steps, tags, and hero image.

B1 → B3 → B1 · Planner · Min: effort + 1 category tag

Recipe library

Browse all recipes. Desktop: app sidebar + topbar with search bar and filter chips + 4-column card grid. The grid fills the content area naturally — not wrapped in an additional card or panel.

V2 · Card grid — mobile 2-col, desktop sidebar + 4-col with filters

Mobile · 320px

9:41●●● WiFi 🔋

Recipes

🔍

🍝

Tomato pasta

45 min · Easy

🍗

Chicken stir-fry

25 min · Easy

🐟

Salmon teriyaki

35 min · Medium

🍄

Mushroom risotto

50 min · Medium

📅

Planner

📖

Recipes

🛒

Shopping

⚙️

Settings

Desktop · 1040px

🥗

Mealplan

Smith household

Plan

📅Planner

📖Recipes

🛒Shopping

Account

👨‍👩‍👧Household

⚙️Settings

Recipe library

All (24)

Easy

Medium

Chicken

Fish

Veggie

🍝

Slow-roasted tomato pasta

45 min · Easy · Last cooked 3 days ago

VegetarianChild-friendly

🍗

Chicken stir-fry

25 min · Easy · 5 days ago

Chicken

🐟

Salmon teriyaki with rice

35 min · Medium · 2 weeks ago

Fish

🍄

Mushroom risotto

50 min · Medium · 2 weeks ago

Vegetarian

B1 · Recipe library

/* Desktop: 224px sidebar + topbar (search 220px + Add button) + content: filter chips row + 4-col grid.
 * Desktop cards are richer: 100px image area + name (Fraunces 14px) + meta + tags row.
 * Mobile: 2-col, 64px image, no tags on cards (too small).
 * Filter chips: from tag table. Active: green-tint. 12px border-radius.
 * Grid fills the content area directly — no wrapping card.
 * Card click → B2 (recipe detail). Add button → B3 (empty form). */

Element	Value	Notes
Desktop
Grid	4 columns, 12px gap, content padding 20px 24px	Cards: radius-lg, border-default, overflow hidden
Card image	100px height. hero_image_url → object-fit:cover. NULL → tint + emoji.	Tint color based on first protein tag
Card content	10px 12px padding. Name: Fraunces 14px. Meta: 10px muted. Tags: badge row.	meta shows cook time + effort + "last cooked X ago"
Filter chips	11px/500, 5px 14px pad, 12px radius	Active: green-tint bg + green-dark text. Others: border-default.
Mobile
Grid	2 columns, 8px gap	Cards: 64px image, 12px name, 9px meta. No tags.

Add / edit recipe

Single form for add + edit. Mobile: V1 single scroll. Desktop: V5 sidebar + topbar + split content (form left, tags + live preview panel right). The tags panel is a natural sidebar within the content area, not a floating card.

V1 mobile / V5 desktop — form left, tags + preview right on desktop

Mobile · 320px

9:45●●● WiFi 🔋

← Recipes

New recipe

Save

📷

Add photo

Recipe name

Serves

Cook time

Ingredients

500g

Cherry tomatoes

300g

Penne pasta

3 cloves

Garlic

Tags (required)

Effort

EasyMediumHard

Category (pick ≥ 1)

ChickenFishVegetarianChild-friendlyPasta

Desktop · 1040px

🥗

Mealplan

Smith household

Plan

📅Planner

📖Recipes

🛒Shopping

← Recipes/New recipe

📷 Add hero image

Recipe name

Serves

Cook time

Prep time

Ingredients

500g

Cherry tomatoes

300g

Penne pasta

3 cloves

Garlic

2 tbsp

Olive oil

Steps

Preheat oven to 180°C. Halve the tomatoes and place on a baking tray.

Drizzle with olive oil, season. Roast for 40 minutes.

Cook pasta. Toss with roasted tomatoes and garlic.

Tags (required)

Effort level

EasyMediumHard

B3 · Add/edit recipe

/* Desktop: 224px sidebar + topbar (breadcrumb + Save) + split content:
 *   Left (flex:1, page bg): hero upload + name + serves/time/prep (3-col) + ingredients + steps
 *   Right (280px, surface bg): effort chips + category chips + live preview card
 * Form content is NOT in a card — it's directly on the page bg.
 * Tags panel (right) uses surface bg as a section differentiator, not as a card.
 * Mobile: single scroll, full width. Back + title + Save in topbar.
 * Ingredient autocomplete: citext ILIKE from ingredient table. */

Element	Value	Notes
Desktop
Form area	flex:1, page bg, 24px padding, border-right	Contains: hero + name (16px input) + 3-col row + ingredients + steps
Tags panel	280px, surface bg, 24px padding	Effort chips + category chips + divider + live preview card
Live preview	Mini B1 card inside the panel	Updates as user types. Shows name, time, servings, ingredient count, tags.

Implementation Guide — J1 Add a Recipe

1. Journey Flow

B1 (Recipe library) → B3 (Add/edit form) → B1 (Recipe library). Actor: Planner only.

2. Screen B1 — Recipe Library

Mobile: topbar + 2-col card grid (8px gap, 64px image, no tags on cards).
Desktop: 224px sidebar + topbar (search input 220px + Add button) + filter chips row + 4-col grid (12px gap, 100px image, tags visible as badge row).
Filter chips: sourced from the tag table. Active chip = green-tint bg / green-dark text. Inactive chip = border-default. Style: font-size:11px; font-weight:500; padding:5px 14px; border-radius:12px.
Card click → B2 (recipe detail). Add button → B3 (empty form).

3. Screen B3 — Add/Edit Recipe

Single form component with two states: empty (new recipe) vs prefilled (edit existing recipe).
Design rule: B3 add = B3 edit — build once with two initial states.
Mobile: single scroll column, full width.
Desktop: 224px sidebar + topbar (breadcrumb + Save/Cancel buttons) + split content: form left (flex:1, page bg, 24px padding) + tags panel right (280px, surface bg).

Form sections:

Hero image upload (optional) — dashed border placeholder, click to upload.
Recipe name (required) — 16px font on desktop.
Serves / Cook time / Prep time — 3-col row on desktop, 2-col on mobile (prep time hidden or below).
Ingredients — editable list with autocomplete. Each row: quantity + name + remove button.
Steps — numbered list, optional at save. Each step: circle number + text.

Tags (required):

Effort level: Easy / Medium / Hard — single-select chip group.
Category: at least 1 required — Chicken, Fish, Beef, Vegetarian, Pasta, etc. Multi-select chips.

Desktop right panel: live preview card (mini B1 card) updates as user types — shows name, time, servings, ingredient count, and selected tags.

Ingredient autocomplete: citext ILIKE query against the ingredient table.

4. Data Operations

Screen	Operation	Tables
B1	`SELECT` recipes with tags	`recipe` JOIN `recipe_tag` + `tag`
B3	`INSERT` / `UPDATE` recipe	`recipe`
B3	`INSERT` / `DELETE` ingredients	`recipe_ingredient`
B3	`INSERT` / `DELETE` steps	`recipe_step`
B3	`INSERT` / `DELETE` tags	`recipe_tag`

Minimum to save: name + effort tag + at least 1 category tag.

5. Design Constraints

Tags power the variety algorithm — they are not cosmetic. Ensure tags are always saved correctly.
If entered from a planner day slot, offer to assign the recipe to that day after save.
Steps are optional — recipes without steps can still be planned and cooked from the ingredient list only.
Form content is NOT in a card on desktop — it sits directly on the page background.
The tags panel uses surface bg as a section differentiator, not as a card wrapper.

6. Accessibility

All form inputs must have associated <label> elements.
Ingredient and step lists must support keyboard navigation (add, remove, reorder).
Chip selections (effort level, category tags) must use proper ARIA attributes: role="radiogroup" for single-select effort, role="group" with aria-pressed for multi-select categories.
Live preview region should use aria-live="polite" to announce updates.