feat: Recipe Finder (aka Cocktail Builder)

[michael-genson]

What type of PR is this?

(REQUIRED)

• feature

What this PR does / why we need it:

(REQUIRED)

This PR adds the Recipe Finder. This enables users to find recipes based on particular ingredients.
It has its own sidebar entry:

Including for public users:

Users can select any number of ingredients and we'll match them with recipes they're ready to make or almost ready to make:

As seen above, if a user can almost make something, they can see those recipes as well as a list of foods/tools they're missing.
This is also true for tools:

The user can configure how much leniency they want, or if they want to turn off "almost ready" entirely:

As hinted in the above screenshot, we also consider "on hand" foods/tools when suggesting recipes (unless turned off). For public users these options are set to false (and removed from settings):

Other filters gives you access to a query filter builder, so you can customize what you want (e.g. if you're only looking for cocktails, you can filter by a category):

Which issue(s) this PR fixes:

(REQUIRED)

N/A

Special notes for your reviewer:

(fill-in or delete this section)

The suggestion algorithm exclusively uses the database ORM, so it's very fast. It basically takes your inputs and ranks them against what I think makes sense. Here are the high-level rules (other than the obvious ones):

• If a user doesn't supply any foods, we shouldn't filter by foods (the UI won't allow this, because it doesn't make much practical sense)
• If a user doesn't supply any tools, we shouldn't filter by tools
• If a user has all foods to a recipe marked as "on hand", but they didn't actually search for any of these foods, don't consider the recipe (imagine if you had a recipe for water: every time you searched for a recipe, the water recipe would always appear first, since you have water on hand)

The order of results is ranked using the following logic:

1. The user has all foods and tools
2. The user has all or some tools, in order of number of matching tools
3. The user has all or some foods, in order of number of matching foods (including matching "on hand" foods)
4. Prefer recipes with more matched user-provided foods (rather than "on hand" foods)

If any recipes tie using that criteria, we fall back to the user-provided sort (which is createdAt; the UI doesn't allow you to customize this, even though the API does).

---

After this PR is merged, there are several improvements I'd like to make. These all require additional work:

• Users should be able to mark certain recipe ingredients as "optional". I should be able to find recipes even if I'm missing some of their optional ingredients (e.g. cocktail garnish).
• The "on hand" flag needs to be per-household. Currently it's per-group, and not all households are going to have the same pantry.
• We need some sort of substitution table for ingredients (maybe aliases can solve this, I'm not sure). For instance, I have several types of whisky in my food store, and when I'm looking for recipes I don't want to have to check all my whisky types just to find all of my whisky recipes. I should just be able to check "whisky" and be done with it.

Testing

(fill-in or delete this section)

Lots of frontend testing. Added backend tests for the search algorithm.

[Kuchenpirat]

Finally had the time to glance at this PR 👀
This is pretty cool to use 🚀

Sidebar Icon

Just from my first impression i think adding this to the sidebar under Recipe Finder with a search icon might be a bit confusing and people might assume its search.
One solution might be to have it integrated in the normal recipe page, but to add an Toggle to switch into Recipe Finder Mode.

Something similar to this is what i had in mind, but this does not feel 100% right.
Also I removed the auto search toggle in the mock up above, i never used it but maybe it is needed on slower hardware?

Mobile

It seems like this is not yet optimized for mobile. The filter section should probably be above the found recipes instead of keeping the column layout

[michael-genson]

I wanted to avoid putting this on the main search page mostly because that page is already super complicated. Also if we wanted to do anything with query params (e.g. save which mode you're in so you could direct link to the cocktail builder) we couldn't do that easily due to how we implement the search page. However if you or I can think of a way to integrate it without it feeling like more bloat I'd be in favor of that.

This is the kind of site I was thinking of during implementation: https://www.cocktailbuilder.com/
Super simple, super easy. I was thinking down the line maybe having user configurations (e.g. put me in cocktail mode, or put me in road trip mode) but that's too much for this PR.

not yet optimized for mobile

Good point! I'll get on that

[michael-genson]

How it looks on mobile now:

[Kuchenpirat]

I’m with you on most of what you said—let’s keep our main page from getting overloaded. 👍
While i don't think the wording is the best way and will probably confuse people, I can't think of a better way to phrase it right now.
We really need to bring in a UI/UX expert to help improve Mealie.

When I first used it, I found the interface a bit tricky. I was adding foods and expecting recipes to pop up right away, but that didn’t happen. I think it would be more user-friendly if the recipe finder displayed recipes as soon as you add your first ingredient, like cocktailbuilder does. Plus, the finder is great because it shows what's missing, letting me skip over recipes I can’t make at the moment.

A lot of the recipes I use rely on ingredients I usually have (but have not marked as "on Hand" or can easily substitute, which I don’t always think to add in the recipe finder.
Just to try this out I set the missing ingredients to 100 and found the result easier to use.

Another cool feature would be to make the missing foods clickable (a checkbox probably) to allow the user to easily add them while you’re scrolling through the recipes.
This would combine discovering which recipes to make with a intuitive way to refine the search.

[michael-genson]

Just to try this out I set the missing ingredients to 100 and found the result easier to use

Yeah this makes sense. Originally I didn't require a suggested recipe to include one of the user's selected foods, so I got a ton of irrelevant results, but that's not a problem anymore. I'll bump up the default number of missing foods/tools, maybe to 20?

make the missing foods clickable

Love this

[michael-genson]

I bumped the default missing foods/tools to 20. I also added checkboxes to the missing organizers:

Clicking on the chip/checkbox will add the food/tool to your selected organizers. There's a brief moment where the checked organizers remains on the recipe card, allowing you to toggle it off if it was a mistake, but once the recipes refresh it will disappear (since it hits the backend and re-calculates the missing organizers). The "brief moment" is watchDebounced (same as when you add/remove organizers the normal way, currently set to 1000ms).

[Kuchenpirat]

In light mode the text color switches to black making some thing hard to read:

Also, I don't think i am a big fan of the 1 second delay on every action. It makes the whole Recipe Finder feel pretty slow.
Is there a big disadvantage on removing that?

[michael-genson]

Is there a big disadvantage on removing that?

It's similar to the search where if you add a bunch of foods at once, it's going to call the API every time you add a food. So we want it at least somewhat debounced (e.g. try checking 3-4 foods at once).

I'll try turning it down to 500 (that's what the recipe search is at) let me know how you feel about it.

Fixed text/checkbox color: