import React, { useState, useMemo } from "react"; // Mapping of common grocery items to store sections const CATEGORY_MAP = { produce: [ "apple","banana","lettuce","salad","spinach","tomato","carrot","onion","potato","avocado","broccoli","cucumber","pepper","mushroom","grapes","berries","celery","herbs","lemon","lime","orange","garlic","ginger" ], dairy: [ "milk","cheese","yogurt","butter","cream","eggs","cottage cheese","cream cheese","half and half" ], meat: [ "beef","chicken","pork","turkey","ham","bacon","sausages","steak","ground beef","ground turkey","deli meat","roast beef" ], bakery: [ "bread","bagel","bun","roll","pita","tortilla","croissant","muffin","pastry" ], pantry: [ "rice","pasta","flour","sugar","salt","oil","cereal","oats","beans","lentils","crackers","chips","soup","broth","nuts","granola","jam","jelly","spices","vinegar","tea","coffee","salsa","syrup" ], frozen: [ "ice cream","frozen pizza","frozen vegetables","frozen fruit","frozen meals","frozen fries","frozen fish","frozen chicken","frozen dinner" ], beverages: [ "juice","soda","beer","wine","sparkling water","soft drink","coke","milkshake","smoothie" ], household: [ "toilet paper","paper towels","cleaner","soap","detergent","shampoo","toothpaste","dish soap","sponges" ], personal: [ "shampoo","soap","toothpaste","deodorant","razor","lotion","face wash" ], snacks: [ "chocolate","candy","cookie","popcorn","pretzel","chips","snack bars","granola bar", ], misc: [ "flower","plant","magazine","batteries","gift card","pet food" ] }; const CATEGORY_ORDER = [ "produce", "bakery", "meat", "dairy", "frozen", "pantry", "beverages", "snacks", "household", "personal", "misc" ]; const CATEGORY_LABELS = { produce: "🥦 Produce", bakery: "🥖 Bakery", meat: "🥩 Meat", dairy: "🧀 Dairy", frozen: "❄️ Frozen", pantry: "🗄️ Pantry & Dry Goods", beverages: "🧃 Beverages", snacks: "🍪 Snacks", household: "🧻 Household", personal: "🧴 Personal Care", misc: "🔖 Other" }; function classifyItem(itemName) { const name = itemName.toLowerCase(); for (let category in CATEGORY_MAP) { // Partial match or word match if ( CATEGORY_MAP[category].some( keyword => name === keyword || name.includes(keyword) || keyword.includes(name) // for short names like "egg" ) ) { return category; } } return "misc"; } export default function App() { const [input, setInput] = useState(""); const [items, setItems] = useSharedStorage("smart-grocery-items", []); // { name: string, checked: bool, id: number } const addItem = () => { const entry = input.trim(); if (!entry) return; // Split by commas, add each entry.split(",").forEach((it) => { const name = it.trim(); if (!name) return; setItems((prev) => [...prev, { name, checked: false, id: Date.now() + Math.random() }] ); }); setInput(""); }; const toggleItem = (id) => { setItems((prev) => prev.map(item => item.id === id ? { ...item, checked: !item.checked } : item)); }; const deleteItem = (id) => { setItems((prev) => prev.filter(item => item.id !== id)); }; const clearChecked = () => { setItems((prev) => prev.filter(item => !item.checked)); }; // Group items by category const grouped = useMemo(() => { const groups = {}; for (let item of items) { const cat = classifyItem(item.name); if (!groups[cat]) groups[cat] = []; groups[cat].push(item); } return groups; }, [items]); return (

Smart Grocery List Optimizer

Enter your shopping list—items will be grouped by section for a fast, stress-free store trip. Check items as you go. 🛒

{/* Input Card */}

Add Item(s)

setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") addItem(); }} />

{/* Grocery List Card */}

{items.length === 0 ? (

🗒️ Your optimized grocery list will appear here. Tip: Add items separated by commas for quick entry.

) : ( <>

Your List ({items.filter(i=>!i.checked).length} left)

{CATEGORY_ORDER.map(cat => grouped[cat]?.length > 0 && (

{CATEGORY_LABELS[cat]} ({grouped[cat].filter(i=>!i.checked).length}/{grouped[cat].length})

{grouped[cat].map(item => (

{item.name}

))}

) )}

)}

); }