# helloFoodie — Product & Execution Plan ## Vision helloFoodie turns "what do we eat this week?" into a closed loop: **tell us how you eat → get a week planned for you → order the ingredients boxed per meal → cook along, step by step**. One product covers planning, shopping, and cooking — ending at the guided cook-along experience that already exists in this repo. ## Who it's for - **The optimizer** — weight loss or performance sports diet; wants macros hit without spreadsheets. - **The busy household** — feeds 2–5 people; wants the weekly decision fatigue and shopping gone. - **The values eater** — vegetarian/vegan/low-waste; wants variety without label-reading. - **The aspiring cook** — wants to actually learn to cook; the assisted cook-along is the draw. ## The loop (user journey) 1. **Land** — the home page explains the service; try the cook-along demo without an account. 2. **Sign in (optional but rewarded)** — personalization unlocks: meal history, nutrition tracking, tailored suggestions. 3. **Set preferences** — diet type (weight loss, performance, vegetarian, keto, Mediterranean, family...), allergies & dislikes, household size, budget, cooking skill & time available on weekdays vs weekends. 4. **Get a plan** — a suggested week (or month) of meals; swap, remove, or lock any meal; portions scale to household. 5. **Choose & order** — pick the meals you'll actually cook; ingredients arrive **packed per meal** (one box per recipe: vegetables, greens, herbs & seasoning, meats — portioned for your household). 6. **Next-day delivery** — track the box; each meal-pack is labeled and links to its recipe. 7. **Cook along** — scan/tap the meal-pack → the existing slide-based, timer-aware cook-along opens for exactly that recipe and portion count. 8. **Close the loop** — mark cooked, rate it; history and nutrition update; next week's suggestions improve. ## Personalized features (logged-in) - **Meal history & ratings** — never re-suggest a dud; "cook it again" shortcuts. - **Nutrition dashboard** — calories & macros per day/week against the goal of the chosen diet; micro-flags (e.g. low iron week). - **Smart suggestions** — variety-aware (cuisine rotation, seasonality), goal-aware (post-workout meals on training days), household-aware (kid-friendly flags). - **Pantry check** — mark staples you already have; boxes ship without them, price drops. - **Leftover & waste planning** — Sunday's roast becomes Monday's soup; the planner chains recipes that share perishables. - **Budget mode** — weekly spend cap; the planner optimizes cost per portion. - **Skill progression** — cook-along tracks which techniques you've done; suggests recipes that stretch you one notch. - **Calendar awareness** — mark eat-out days and travel; the plan and box shrink accordingly. ## Architecture (clickable prototype — this repo) Static, client-side, no build step, offline-capable. In-memory state (no browser storage until a deployment target confirms support). All data as structured JS, separate from rendering, so the prototype's data shape becomes the future API contract. ``` index.html — landing page (marketing + entry point) ← this pass cook.html — the assisted cook-along app (existing, moved) ← this pass plan.html — preferences → weekly plan → meal selection (P2) box.html — order review → mock checkout → delivery track (P3) account.html — history, nutrition dashboard, settings (P4) recipes.js — recipe data (already the contract: steps, timers, per-step ingredients) planner-data.js — diets, nutrition per recipe, portioning, prices (P2) illustrations.js— shared hand-drawn SVG art (brand asset) app.js — cook-along logic (existing) ``` Brand: the existing hand-drawn warm-editorial system (unbleached paper `#f6f0e4`, terracotta `#c4552d`, tarragon `#5e7248`, ink `#2b2420`, wobbly-line SVG illustrations, serif display) extends across the whole product. ## Phased roadmap **P0 — Landing page ✅ shipped** Catchy single page: hero, how-it-works (the 4-step loop), diet-preference showcase, the per-meal box explained visually, personalization features, sample week strip built from real recipe data, cook-along demo link, simulated sign-in. Done when: a visitor understands the whole service in one scroll and can jump into the cook-along. **P1 — Onboarding & preferences ✅ shipped** Diet quiz in `plan.html` (goal, allergies & dislikes, household, budget, skill, weeknight time). Output: the preference profile object (the personalization contract, documented in `planner-data.js`) plus a first suggestion engine (`suggestWeek`) that already produces a visibly different week per profile — hard exclusions for allergens/vegetarian, goal-based scoring, quick recipes on weeknights, long ones on weekends, honest "night off" gaps, and a weekend dessert when the profile allows it. **P2 — Weekly planner ✅ shipped** The quiz result is now a fully editable week: lock any day (pinned across regenerations, never duplicated), swap via a bottom sheet of profile-eligible alternatives, take a night off and restore it, and scale portions per meal. The engine gained cuisine-variety rules (no same cuisine two nights running), seasonality boosts by month, illustrative per-portion prices (RON), and week totals (dinners · portions · price) that feed straight into P3 ordering. All rules covered by headless tests. **P3 — Meal boxes & ordering ✅ shipped** `box.html`: the week's meals arrive via URL (`?order=id:portions,…`) and render as one labeled box per meal with three packs (produce / herbs & seasoning / protein & dairy) composed from the real ingredient data. Pantry-staple toggles discount the total; delivery-window choice; mock cash/card-on-delivery checkout; animated tracking timeline (received → packed → out → delivered) with a "simulate delivery day" control that unlocks the cook-along link. **P4 — Accounts & personalization ✅ shipped** `account.html`: simulated sign-in (name only, in-memory), seeded meal history with interactive star ratings, weekly nutrition dashboard (kcal bars vs the goal of the chosen diet + protein per dinner), and a live feedback loop — rating a meal ≤2 stars visibly benches it from next week's suggested strip. **i18n — EN/RO ✅ shipped** Full bilingual experience with an EN·RO switch in every navbar. Language travels via `?lang=ro` in the URL (no storage APIs). Central dictionary in `i18n.js` (~234 keys per language, parity-tested) plus a Romanian overlay for recipe content — the whole ciorbă (steps, tips, timers, ingredients, tools, phases) and all recipe descriptions — layered over `recipes.js` without touching the source data. **P5 — Close the loop** Delivery → "your box arrived" → each meal-pack deep-links into cook.html with the right recipe & portions; mark-as-cooked writes back to history. Done when: the full journey runs end-to-end in the prototype. **Beyond prototype (not this repo's scope)**: real auth, payments, supplier/logistics integration, inventory, mobile apps. Note for productionization: GDPR data minimization applies to preference/health-adjacent data (dietary profiles); collect only what the planner needs, keep nutrition goals on-device where possible. ## Risks & open questions - **Recipe depth is the bottleneck** — only 1 of 10 recipes is fully built; planner credibility needs at least ~15–20 cookable recipes across diets. Mitigation: the data contract makes recipe authoring mechanical; author in batches per diet. - **Nutrition data accuracy** — prototype uses approximate values; must be flagged as illustrative. - **Box pricing realism** — mock prices should stay plausible (RON) to make demos credible. - **One recipe ≠ one meal plan** — plans need breakfast/lunch/dinner slots; decide whether the prototype plans dinners only (recommended for scope) or all meals. ## Success criteria for the prototype A first-time visitor can, without explanation: understand the service from the landing page; build/edit a week; order it; "receive" it; cook one meal with the assisted experience — all in under 10 minutes, on a phone.