HN Explorer

Show HN: Recipe search engine, built in vanilla PHP (recipehunt.app)

67 points by nsemikey ↗ HN
1) Summary = RecipeHunt(http://recipehunt.app) is a Recipe Search Engine that gives you the only 3 things that matter in my opinion: (a) Picture, (b) Ingredients, (c) Directions

2) Problem = Every recipe site is bloated(e.g. full of ads, long backstory). I just want to see 3 things: Picture, Ingredients, Directions.

3) Solution = Built a simple Recipe Search Engine that gives you only those 3 things.

4) Tech Stack = Vanilla HTML, CSS, Javascript, PHP, SQL (some JQuery). Frameworks are too complicated for me, so I just wanted to build with what I know.

5) Design

-Main Feed = Similar to Instagram Explore (Square Shaped Thumbnails).

-Categories = Filter by "Country" or "Dish Type".

-Search Bar = Quickly go directly to a Recipe or Category.

-Recipe Page = Gives you only 1 Picture + Ingredients + Directions + Comments. Separated by tabs (I don't like scrolling).

-Paywall(for Spam) = I put up a paywall to prevent spamming (Stripe).

6) Content(Recipes) = I manually put in some initial recipes (posted a few for each Country/Dish Type). Challenge is to fill the site with enough recipes to make it useful. May look into Recipe API's and make sure I'm not violating any terms (give source credit in recipe page).

7) Conclusion = Just wanted to share this because I think it will solve my own problem (making it less painful to search recipes). Still a work in progress, but hopefully it may be useful to someone else as well.

Will happily welcome any feedback! Thanks!

-nsemikey

62 comments

[ 1.6 ms ] story [ 116 ms ] thread
[deleted]
(comment deleted)
hu3
Looks clean and objective. Congrats!

Quick question. What do you use Stripe for?

And if I may, I would move this stripe <script> tag to the bottom of <body>. Should speed up DOM loading: https://i.imgur.com/0X93EHy.png

nsemikey
Thanks for the tip! Wasn't sure where the DOM was lagging.

For your question, if you register an account, you can't post a recipe unless you upgrade to a premium account. I'm not expecting anyone to actually pay for this feature, I just put it up to prevent anyone from spamming images. Every user is able to comment on recipe pages though.

hu3
Cool. All the best to you. o/
sodapopcan
You can also use the `defer` attribute on script and put it in inside `<head>`.

  <head>
    <script defer src="/src.js"></script>
  </head>
aimor
I'd be interested in hearing more about how you built the search. I keep my own personal cookbook online with a search and I'm curious how others implement theirs. For me, after getting tired of the slow SQL text search queries, I made a search index of 3-grams using the title and ingredients text and that's worked great for ~100 recipes, and also has the benefit of being fuzzy. But I don't know much about alternative methods that are still simple to implement from scratch.
nsemikey
Hi there - unfortunately, I use a slow SQL text query + ajax to display results below search bar. I have a small database so it's fine for now, but expect I'll need an alternative method as it grows.
sodapopcan
If you're using Postgres, it has very acceptable fulltext search builtin that will take you very far.
james_in_the_uk
I used Manticore last time I needed plug and play full text search. Worked well for my use case.
guhidalg
Nice work! I recently built a similar page, https://letscooktime.com , might be good to compare notes.

On integrating with recipe APIs, you can scrape recipe structured metadata. Most web sites use the google structured data, you can query for a script tag with type ld+json and find the structured data. See more information here: https://developers.google.com/search/docs/advanced/structure...

nsemikey
Thanks for the advice! Happy to share notes. I really like your site, has better features than mine (adjust Servings, Nutrition Facts by Ingredient). Question, do all the recipe APIs require showing the Source Link to give Credit? Just don't want to violate any terms.
guhidalg
No, you do not have to give attribution to a source if you simply copy the list of ingredients and steps. https://copyrightalliance.org/are-recipes-cookbooks-protecte....

However you should be careful not to copy the blog text or the _images_ from a recipe website, because those require you to get permission from the author for resharing.

nsemikey
Thanks, how were you able to get the images on your site? You got permission?
guhidalg
I plead the 5th.

We have it as a backlog item to take pictures of all the recipes as made in our kitchen, we just haven't gotten around to making a good lighting set up.

SamBam
I'm always slightly surprised at the "engineers mindset" that many people on this site and other seem to approach recipes: the notion that a recipe as a context-free collection of ingredients and steps.

Yes, I know "long stories about last year's vacation where we ate such and such" get a lot of universal, justifiable hate. Everyone detests scrolling through "recipes" laden with ads and useless copy and photos.

But, to me, these kinds of database sites lose two important elements: the source of the recipe, and useful comments, from both the author and the readers.

Perhaps it's because I cook a lot, but I can't imagine just Googling "pasta carbonara" and following the first hit (pretending it was nicely formatted without ads). 90% of recipes online are seriously mediocre. For me, either I already know and trust the author (Serious Eats, many New York Times authors, etc), or I need to do a bit of work to decide whether they are the real deal.

(As an aside, I think that this is the source of the long-winded stories. Back in the day, when it wasn't so bad, I followed a handful of recipe bloggers and got to know and trust their recipes through their blogs. It seems so crap now because (1) they've so much longer, and (2) when we land on the top search of someone we don't know, it just seems like useless noise.)

For the second point, if you look at, say, a New York Times recipe, there's usually one, maybe two paragraphs of context about the dish itself (not stories of vacations). It's useful stuff. It tells you what you can substitute, it tells you the way this is and isn't authentic, it gives you hints on the tricky parts. And then the comments at the bottom will do all that and more, pointing out the recipe's flaws and improvements.

Where a database can come in useful for me is after I've fully vetted and digested the recipe, I'll add it to my own. But using a database to find a recipe has never been interesting to me, personally.

nsemikey
Thanks - I understand where you're coming from. I didn't build this from an engineer's mindset though, but as a novice cook who just needs to make quick meals for my family. So just wanted to solve my own problem. I'm sure other people enjoy the backstory/context and have the time to digest them, so a single recipe site won't be a one size fits all, this just works for me.
tpetry
Which means we need a simple database of ingredients/steps and a maybe 300 words introduction. Anyone doing that will crush the market because usability for recipe website went so bad in the past years.

And add steps in a visual + text format like KptnCook.

beardedetim
> But using a database to find a recipe has never been interesting to me, personally.

I've built a few toy apps like everyone else and found the same feeling when it was just a CRUD listing app of recipes that I could search. What I found was an interesting take and one I'm wanting to take further is I want not recommendations on recipes but _almost_ generation of recipes. So when I search "Chile Colorado" it returns a specific recipe that I created but for each "step" it "links" to relations/more info/etc.

Example:

Ingredients:

- 1lb beef <this is the recipe itself either from a source or you put it in>

  - Ribeye is best <this is from the recipe itself and notes you made on this specific ingredient>

  - Sometimes substituting chicken is healthier <linked from some other recipe about beef that you saved once>

  - This doesn't double like most things do if you are making more portions <linked from some private notes you made about cooking>
- ....

Do you think that caries the context enough? Or do you think that you would just much rather have a list of vetted + manually entered ones?

[deleted]
(comment deleted)
[deleted]
(comment deleted)
[deleted]
(comment deleted)
boredumb
This is awesome. I'm glad more people are trying to make recipes accessible and fight back against the SEO bloat that most online recipes seem to be. I made a little app to start collecting and storing recipes offline and curating shopping lists from them without all the cruft, still a work in progress and I'm hoping to start allowing p2p sharing of recipes (mostly so I can share recipes with the wife). I'm trying to do fully offline functionality -> bluetooth sharing -> public internet sharing.

https://play.google.com/store/apps/details?id=com.santurceso...

nsemikey
Thanks! I'll check the app out!
tiffanyh
If this site is even using a database at all, this would be a perfect example to use sqlite.

100% reads, no writes / no administration / no headaches.

nsemikey
It's using mysql+phpmyadmin. Writes = User Register + Comments + Recipe Posts. However, I have been wanting to switch to sqlite for sometime now, as I think it will be just as fast but much less headache.
kwhitefoot
What I would love to find is a database of recipes so that I could build my own front end.
nsemikey
I think there's tons of recipe api's out there. Check out RapidAPI: https://rapidapi.com/hub
kwhitefoot
Thanks, but I'm not looking for an API, I'm looking for a database. Something I can query with simple command line tools.
potatoman22
Check out some Kaggle datasets! There's some with the info you seek
jtreminio
When you say "Vanilla PHP", do you mean without a framework? If so, is there a reason you avoided frameworks?
nsemikey
Yes, just raw plain PHP (no frameworks like LaRavel). Mainly because I just wanted to start building it with what I know and didn't want to spend weeks/months learning a new framework.
sodapopcan
I like being able to filter by country. The small, succinct list of overly delicious Canadian recipes made me proud :')
nsemikey
Thanks! That's one thing I didn't see on other sites...a comprehensive list of countries w/ sub-categories.
innerbits
This is a good start. As a foodie who loves to cook and software engineer, I strongly dislike the bloated recipe sites and I have my own mini-site where I share my recipes with friends.

Some ideas to consider, based on my experience building my own Hugo-based static recipe site:

  - Search: I decided to use Azure Search because of the flexibility it provides (cost is minimal and covered by my free Visual Studio subscription credits)
  - Images: I use Cloudinary's free plan to upload and deliver images -- very important if you want to deliver performance-optimized experience on multiple devices
  - Full-screen touch mode: directions only, with easy access to ingredients list. Extremely useful, especially when you have your hands covered in flour and are following directions on a tablet.
  - "Tips" section: when technique is important, or flexibility is allowed the directions-only may be insufficient
  - SEO: use standard micro-formats for ingredients, steps and time so the recipes can be easily shared, searched, indexed, etc.
  - add yield, prep time and total time required
  - add ingredient and steps sections: some non-basic recipes benefit tremendously from the added organization (e.g. "dry ingredients", "wet ingredients"
  - usability: UI should be usable and text should be readable from 24-inch distance
zichy
Nice work! I have two suggestions usability-wise:

* Make sure your navigation is consistent. The left filter links and the about/contact links are missing on many pages. A breadcrumb would help as well.

* The horizontal tabs on the recipe pages aren't really useful, I'd display all content at once. No need to force the users to click several times. Even on smaller viewports it's easier to just scroll.

bitwize
It's funny how "keeping track of recipes" was one of the useless, bullshit use cases for home computers going back to the 80s and before (with the equally useless, equally bullshit Honeywell Kitchen Computer). But now, recipes are hard enough to find amid all the webshit and clickbait that finding and tracking recipes is now a great app idea.
boplicity
> make sure I'm not violating any terms (give source credit in recipe page).

This is a common misunderstanding. Giving credit does not grant the right to copy protected works.

In terms of copyright for a recipe site -- you can't copyright an ingredient list, and you can't copyright a process, but the language in the directions can be protected. For example, this (https://recipehunt.app/kimchi-recipe-1224) seems to be in violation of copyright. However, if the directions were re-written in original language, it would be fine.

nsemikey
I see, thanks for clarifying. Does that mean all recipe aggregators are likely violating copyright?
nsemikey
Also, how does copyright apply to social media sites. Like if someone posted the recipe on facebook or instagram.
MrVandemar
Curious. I built a site in Vanilla PHP that lives solely on my laptop for now, for much the same reason. The reason it's not live to the world is that I couldn't find anything considered "best practice" for secure user authentication, password management, etc. and put off the project for a time when I can learn a framework that has that problem solved. Frameworks are daunting though.

How did you approach the user management?

Nb, I love your approach to the site - its function drives its form. There's no flashing lights, ads, cookie banners, anything annoying. It's just pure content, and that's what I'm craving on the internet lately.

nsemikey
Hi there, thanks for the kind words! When I started to learn to code, I was overwhelmed with the amount of frameworks. I think I spent about a year just trying to decide which one to use. Then once I dived into the documentation & tutorials, I was also overwhelmed and confused on how things worked. At that point, I decided I'd rather just try to build something in a way I understand that's simple, then spend another year banging my head.

So I just used basic PHP to build each feature one by one. I wrote out the user flow: Register > Login > Post Recipe > View Feed > View Recipe > Search. Then just tackled them one day at a time. When I looked at existing user authentication systems, there were so many features/options that my head spun. Maybe Im naiive, but I didnt think I needed all of them. I just wanted to put an email + pw + username in a database. Then send an email(with randomly generated code) to activate the account. Then made a Login page with simple sql query to validate email + pw was correct. It seems too simple to work, but if there's any problems Ill just deal with it later. Im actually thinking of removing pw altogether and just going with magiclink.

Basically, what Im trying to say is, just make it the way it makes sense in your mind, in the simplest way. Otherwise, youll be waiting forever before you build something real. Just like everything else in life, things are overcomplicated. Were just making websites arent we? Whether its PHP or Ruby or JS or xyz framework, it all just spits out html. Hope this helps!

efader
You should checkout punchfork.com