Show HN: Vegetarian Recipe Finder

https://impossible-emphasized-ash.glitch.me

by brunooliv • 3 years ago

4 8 3 years ago

impossible-emphasized-ash.glitch.me

I managed to build a basic healthy recipes app from scratch with ChatGPT4 and a new service that I learned from there in 10 min!! What a time to be alive.

I started with a list of ingredients and my prompts were along the lines of: give me a list of healthy vegan or vegetarian recipes with these ingredients. From there I decided to be very efficient and said that I needed to turn that concept into a simple search engine and host it in the simplest possible way and I actually learned about Glitch thanks to it!! Just type an ingredient and get back a list of healthy recipes containing said ingredient!

Incredibly simple and fun and it truly puts the simplicity and joy right back into building things!!

whycome• 3 years ago

Make this mobile friendly! (Quick CSS addition) Cool app!

brunooliv4• 3 years ago

Will do!! Thanks!

brunooliv4• 3 years ago

Hey @whycome thanks for the feedback here it is: https://impossible-emphasized-ash.glitch.me/

Now responsive!

rstnpce• 3 years ago

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• 3 years ago

"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."
    }

brunooliv4• 3 years ago

The idea truly was basic simplicity here

brunooliv4• 3 years ago

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.

peterpost2• 3 years ago

Looks neet! some thoughts/bugs: -if you select the buttons using the tab functionality the search button is not bordered on all four sides. The all-recipes and favorites button are not bordered at all -It's not very apparent where the search functionality actually search in. seems like it only works for what is loaded in for the current page?

Show HN: Vegetarian Recipe Finder

Related Stories