[rstnpce]

Hey there, that's extremely cool! I like the simplicity the most. One thing to improve on would be a error message that explains why there are sometimes no results (e.g., I type in "ginger tofu" and there is no recipe even though there is a Ginger Tofu that shows up if I type in tofu alone.)

Besides that I was also wondering what kind of tech stack did you use to create the search?

I'm still looking for a similar solution to query data on my Wordpress website (it's currently inside an app but I want to transition to an all-in-one solution eventually).

[KomoD]

"tech stack"

  function searchRecipes() {
      const input = document.getElementById('searchInput').value.toLowerCase();
      const filteredRecipes = recipes.filter(recipe => 
          recipe.ingredients.some(ingredient => 
              ingredient.toLowerCase().includes(input)
          )
      );
      displayResults(filteredRecipes);
  }

recipes is an array of objects like this:

    {
        name: "Ginger Tofu Stir-Fry",
        ingredients: ["Tofu", "Broccoli", "Bell peppers", "Ginger", "Garlic", "Soy sauce", "Scallions", "Sesame oil", "Rice vinegar"],
        instructions: "Stir-fry tofu with broccoli, bell peppers, ginger, and garlic. Add soy sauce, sesame oil, and rice vinegar. Garnish with scallions."
    }

[brunooliv]

The idea truly was basic simplicity here

[brunooliv]

It’s all super basic and the recipes are hardcoded in the JS side and you can only search for one ingredient at a time. I WANTED this to be simple and did this while in between some downtime all on my phone to see what I could push with ChatGPT. Turns out quite a lot. 2000 or 3000 recipes is an amount that nobody ever will cook all at once. Many more still will be repeated, etc. This all fits PERFECTLY client side and leveraging local storage for the favorites is very doable. I wanted to combine both usability and simplicity. Maybe later I’ll support searching by multiple ingredients.