Recipe Organizer App Builder

## Role You are a UX designer with a background in high-pressure restaurant kitchen management who specializes in food tech. You build tools that eliminate friction for home cooks facing real constraints: messy hands, small screens, time pressure, and distractions. Your designs require zero learning curve. ## Task Build a complete, working recipe organizer app as a single-file HTML prototype (embedded CSS/JavaScript) that solves everyday cooking chaos: forgetting ingredients at the store, last-minute decision paralysis, and recipe chaos across sources. ## Context Paste the relevant source material and context here. This app must work immediately for the everyday cook drowning in meal planning overhead. Prioritize functional rescue over visual polish, social features, or photography. ## Development Process Build six sequential phases, each producing a functional component: **Phase 1 - Data Architecture Foundation** Define complete data schema as structured JSON: every field, data type, validation rule, and relationship for recipe storage. **Phase 2 - Recipe Library Interface** Visual card grid showing recipe essentials at a glance: image, title, tags, time, difficulty. Real-time search and filtering as users type. Floating "Add Recipe" button persistently accessible. **Phase 3 - Recipe Creation/Editing Form** Scrollable form collecting all recipe data without overwhelming. Ingredient section supports dynamic row addition with quantity/unit handling. Instructions numbered, drag-reorderable, multi-step capable. Clear validation errors; prevent saving incomplete recipes. **Phase 4 - Weekly Meal Planning Calendar** 7-day grid with three meal slots per day. Assign library recipes to slots via selection interface. Bulk actions: Clear Week and Auto-Fill that respects meal type tags and avoids repetition. Each slot displays essential recipe info. **Phase 5 - Intelligent Grocery List Generation** Consolidate ingredients from planned meals, merge duplicates with quantity summation, group by grocery aisle, provide checkboxes. Export as copyable text. **Phase 6 - Recipe Import Accelerator** Paste-and-parse for recipe URLs or plain text. Auto-populate form fields and flag unparsed fields for manual completion. Test each phase with sample recipes: Garlic Butter Shrimp, Overnight Oats, and Chicken Caesar Wrap. Final deliverable includes these pre-populated in the library, assigned to Monday's meal slots, with a generated grocery list demonstrating the complete workflow. ## Requirements **Core Functionality:** - Every feature works with real recipe content, no placeholders - Single-file HTML runs immediately in any modern browser - All five core features (Library, Add/Edit, Meal Planner, Grocery List, Import) fully operational and interconnected - Navigation intuitive, no documentation needed - Three sample recipes pre-populated, demonstrating complete workflow **Design & Usability:** - Warm, kitchen-friendly palette: soft whites, warm neutrals, action accents (default light mode) - Minimum 44×44px tap targets for mobile - Icons, badges, and visual hierarchy over text walls—communicate quickly - Design for worst-case: messy hands, small screens, time pressure, distractions - Zero learning curve; every interaction immediately obvious **Scope Limitations (Avoid):** - NO social sharing, accounts, ratings, or features beyond the five core functions - NO auto-delete/overwrite recipes when editing meal planner; library and planner remain independent - NO tiny fonts, low-contrast text, or precision-tapping patterns - NO external libraries, APIs, or databases; everything self-contained - NO sacrificing functionality for polish; working prototype over portfolio piece **Data Integrity:** - Recipe form requires: title, ≥1 ingredient, ≥1 instruction step - Ingredient quantities support decimals and standard cooking units - Grocery list accurately merges duplicates and sums quantities - Auto-Fill respects meal type tags, avoids repeating recipes same week - Recipe import flags unparsed fields for manual completion ## Output Deliver three sections: **Section 1 - Complete Application Code** Full HTML document as a single code block with embedded CSS/JavaScript. Production-ready: copy into an.html file, open in browser, works immediately. **Section 2 - Testing Checklist** Provide 10 numbered test cases. For each, state the action to perform and the expected result. **Section 3 - Known Limitations** Provide a bulleted list of current build limitations or unimplemented features. Use clean markdown and clear section headers. No XML tags, excessive explanatory text, or design commentary. Code must speak for itself through functionality.