3 ms·

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 resu

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 3y 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." }
- brunooliv 3y ago
  The idea truly was basic simplicity here
brunooliv 3y 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.

KomoD 3y 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." }

brunooliv 3y ago
The idea truly was basic simplicity here

brunooliv 3y 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.