Skip to content

feat: Ingredient name autocomplete using TheMealDB ingredient list #15

@staticvoidmainmaui

Description

@staticvoidmainmaui

##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:

  1. Consistency — "Chicken" is always stored as "Chicken", never "pollo" or "chkn"
  2. 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

  • Typing in the ingredient name field shows a filtered dropdown of TheMealDB ingredient names
  • Selecting a suggestion populates the field with the canonical TheMealDB name
  • Dropdown closes on selection or when clicking outside
  • Ingredient list is fetched once and reused, not re-fetched on every keystroke
  • Works in both the Add and Edit bottom sheets

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions