##Problem
Right now, the "Add Ingredient" form in the Pantry page is a plain free-text input. This means users can type anything — "pollo", "chkn", "Chicken Breast" — and it gets stored as-is. Since recipe matching relies on ingredients being named the same way TheMealDB names them, inconsistent user input directly degrades match quality.
Desired Behavior
Think of it like Google Search autocomplete. The moment you start typing "chik", a dropdown appears below the input
showing:
- Chicken
- Chicken Breast
- Chicken Thighs
- Chicken Wings
- ...
The user picks one from the list and that TheMealDB-canonical name is what gets saved to their pantry. No free-form
guessing : the ingredient name is always one that the recipe engine already understands.
This solves two things at once:
- Consistency — "Chicken" is always stored as "Chicken", never "pollo" or "chkn"
- Match quality — pantry items will always resolve correctly when scoring recipes
Implementation Notes
- TheMealDB exposes a full ingredient list at https://www.themealdb.com/api/json/v1/1/list.php?i=list — fetch once on load and cache it (~600 items, very small)
- Filter client-side on every keystroke
- Suggestions appear as a dropdown below the "Item name" input in both the Add and Edit BottomSheet components
(client/src/pages/Pantry.tsx)
- Selecting a suggestion fills the input and closes the dropdown
- If nothing matches, user can still submit (graceful fallback) but show a subtle "No matching ingredient" hint
- The backend already has fuzzy matching in server/app/services/normalizer.py — this frontend change reduces the work it has to do
Files to Touch
- client/src/pages/Pantry.tsx — add autocomplete dropdown to name input in both Add and Edit sheets
- client/src/hooks/useMealDBIngredients.ts (new) — fetch + cache the ingredient list
Acceptance Criteria
##Problem
Right now, the "Add Ingredient" form in the Pantry page is a plain free-text input. This means users can type anything — "pollo", "chkn", "Chicken Breast" — and it gets stored as-is. Since recipe matching relies on ingredients being named the same way TheMealDB names them, inconsistent user input directly degrades match quality.
Desired Behavior
Think of it like Google Search autocomplete. The moment you start typing "chik", a dropdown appears below the input
showing:
The user picks one from the list and that TheMealDB-canonical name is what gets saved to their pantry. No free-form
guessing : the ingredient name is always one that the recipe engine already understands.
This solves two things at once:
Implementation Notes
(client/src/pages/Pantry.tsx)
Files to Touch
Acceptance Criteria