Skip to content

Ranked Recipe List

Display recipes ranked by ingredient match, showing how many ingredients are missing for each recipe so users can quickly identify the most feasible recipes to cook

Display recipes ranked by ingredient match, showing how many ingredients are missing for each recipe so users can quickly identify the most feasible recipes to cook

List of recipes ordered by missing ingredient count (ascending)

Recipe name displayed prominently for each result

Missing ingredient count badge or indicator for each recipe (e.g., '2 missing')

Total ingredient count for context (e.g., '2 of 8 ingredients missing')

Visual distinction between recipes with 0 missing vs. 1+ missing ingredients

Clickable recipe cards that navigate to recipe detail

Empty state message when no recipes match or no ingredients provided

List displays all ranked recipes returned from the backend