Now Live [last update, I hope] Latest project (recipe collection)

robcsaszar

Member
Gold Member
Local time
18:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

Hi everyone,

Last weekend I got finally sick of looking for recipes for the stuff I cook often and keep forgetting where I found them on, as well as keeping tabs on what I changed/substituted. I've been keeping them on Google Keep until I found a solution but I never did.
So naturally I thought to use this as an exercise and delve into something completely new to me.
Here's my own website, currently hosted on Docker, deployed with Jekyll. I know Docker isn't the best solution for this but I will be the only one using the website, along with close friends.
theSkullery

Can you please give me some feedback on it? Anything goes!
It's not completely done yet, but it's good enough for me to share and get some constructive criticism. :)
Thanks!

 
Last edited:
Upvote 2

Mike Rees

Member
Local time
16:47
Joined
Feb 3, 2020
Messages
67

Looks clean. I especially like the checkboxes, and the fact that the page scrolls to the next item when you check something off. Super useful, I wish more recipe sites used something like that

 

robcsaszar

Member
Gold Member
Local time
18:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

Looks clean. I especially like the checkboxes, and the fact that the page scrolls to the next item when you check something off. Super useful, I wish more recipe sites used something like that
Thank you, I'm glad you like it! 😀

 

Adam

Mr. Webwide
Administrator
Local time
16:47
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

Wow, beautiful, love it! Only minor points and some ideas as you grow:

  • Would be nice if the search was an input and hitting enter took me straight to your search page
  • It wasn't clear what the camera icon did under your recipe image, it just linked me to unsplash homepage which was a bit confusing
  • Perhaps a subtle container around ingredients would help to make this section a little more readable, a light yellow background with dark brown text might look a little like a sticky note shopping list and keep it more obviously separate from the instructions
  • When checking items off it would be helpful if the opacity of the item was lowered a bit so it is easy at a glance to see what's next
  • The subscribe button on homepage links directly to an XML feed, not a great experience for those (most) who don't use, I think RSS is great but expected down the bottom and perhaps you could have a mailing list for new recipes instead
As your collection grows perhaps you could add a favouriting feature saving in local storage.

 
Last edited:

robcsaszar

Member
Gold Member
Local time
18:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

Wow, beautiful, love it! Only minor points and some ideas as you grow:
  • Would be nice if the search was an input and hitting enter took me straight to your search page
  • It wasn't clear what the camera icon did under your recipe image, it just linked me to unsplash homepage which was a bit confusing
  • Perhaps a subtle container around ingredients would help to make this section a little more readable, a light yellow background with dark brown text might look a little like a sticky note shopping list and keep it more obviously separate from the instructions
  • When checking items off it would be helpful if the opacity of the item was lowered a bit so it is easy at a glance to see what's next
  • The subscribe button on homepage links directly to an XML feed, not a great experience for those (most) who don't use, I think RSS is great but expected down the bottom and perhaps you could have a mailing list for new recipes instead
As your collection grows perhaps you could add a favouriting feature saving in local storage.

Thank you for your feedback! :D
  • Search: that makes sense from a user experience point of view - it will definitely be changed;
  • Camera: it's meant to be image credit (since I'm not a food photographer, I will mostly have external photos of the food on there => would either a tooltip "Image credit" or a mini-badge be better here?
  • Container color: this is the second time I'm getting feedback on this so I think that's going to get changed first;
  • Checkbox opacity: I've actually had this idea myself, as well, consider it done;
  • Subscribe: yes, I am, as I write this, trialing a Formik form for subscription (I still have to figure out the mailing list for new recipes but that's an awesome idea)
  • Favoriting: same here, excellent idea, I just have to figure out how I can achieve this
Planned, or rather, ideas that I have so far:
  • Ability of adding your own recipe (will be public), you will be able to see a list of the ones uploaded by you
  • Dynamic scaling of recipe ingredients
As for other stuff I have to do (I added the stuff from you):
  • Find a solution for the slow-loading images
  • Subscription box
  • Optimize search page
  • Cuisine/Diet popup on hover in main page
Also, one question: is it obvious that one can click on the tags in each recipe in order to see more recipes with the same tags?

 

Adam

Mr. Webwide
Administrator
Local time
16:47
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

Awesome stuff! I think the text 'Image Credit: {author}' that is linked is more clear and standard. I wasn't sure if perhaps it opened the photo full size or if I could upload my own etc. I knew the tags were clickable yeah. It might be fun if the hero image background that's currently pasta rotated through a few different random images each time the page was refreshed.

 
Last edited:

robcsaszar

Member
Gold Member
Local time
18:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

@Adam I did some changes to the website. What do you think now? :)
My biggest issue right now is the 'favoriting part', since I'd very much like for my visitors not need to sign in. An idea would be on the /chef/ page, as in, 'this chef's favorite recipes:'. This way you'd only be able to see and save your favorites once you've submitted a recipe yourself.

 

Adam

Mr. Webwide
Administrator
Local time
16:47
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

@Adam I did some changes to the website. What do you think now? :)
My biggest issue right now is the 'favoriting part', since I'd very much like for my visitors not need to sign in. An idea would be on the /chef/ page, as in, 'this chef's favorite recipes:'. This way you'd only be able to see and save your favorites once you've submitted a recipe yourself.
Nice work!

For favouriting you could add a like button to each post which when clicked adds/removes the recipe title and URL slug in to a JSON array stored in the users local storage.

Have the button check the slug in the array to show as active or not.

Then on your /chef/ page you could just iterate through this array to create a list of favourites.

I use a similar implementation on Hoard.fyi | Curated tools & resources for web designers, developers & makers – in a nutshell.

 
Last edited:

JacobHegwood

Member
Local time
10:47
Joined
Nov 19, 2019
Messages
37

Absolutely one of the easiest to use recipe websites I've ever used. Love everything about it!

 

xtbhyn

💻 🎨 🖊️ 📚 🌱 🍔
Gold Member
Local time
21:17
Joined
Oct 20, 2019
Messages
54

The website is delicious!
Clean and simple 😎😎

Here are my thoughts:

  • I feel the text in the header should be a little brighter. The contrast with the background is low. It would be great if you could reduce the characters per line on line 2.

  • Tags like "dinner", "lunch" do not add sufficient value according to me since we can't control when and what people eat 😬. Instead I think this space should be used to convey relatively important info like cooking time, veg/non-veg, skill level etc.

  • I love the checklist approach to the ingredients and directions 👏👏 It might be just me but the checkbox borders should be a bit darker especially the ones under the "Directions" section

Loved this project :)

 

robcsaszar

Member
Gold Member
Local time
18:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

The website is delicious!
Clean and simple 😎😎

Here are my thoughts:

  • I feel the text in the header should be a little brighter. The contrast with the background is low. It would be great if you could reduce the characters per line on line 2.

  • Tags like "dinner", "lunch" do not add sufficient value according to me since we can't control when and what people eat 😬. Instead I think this space should be used to convey relatively important info like cooking time, veg/non-veg, skill level etc.

  • I love the checklist approach to the ingredients and directions 👏👏 It might be just me but the checkbox borders should be a bit darker especially the ones under the "Directions" section

Loved this project :)
Thank you, clean and simple is what I was going for! 😊
  • I increased the opacity from 0.5 to 0.7, I was worrying about that as a matter of fact but you're the first one that's brought it up.
  • Regarding the tags, I agree, the 'lunch', 'dinner', etc. tags will be changed to something the in the likes of 'mains', 'sides', 'snacks'. The tags/meals/categories part will be completed by this weekend, I think.
  • Oh yeah, I've tried styling the checkboxes a while ago but for some reason I failed and then I moved to something else so I just let it be until I got a bit wiser 😁. I'll give it another shot, though, as I don't really like them on mobile.

Appreciate the feedback!

 

CoryRunn

Member
Local time
10:47
Joined
Feb 15, 2020
Messages
24

What a great idea! I don't cook much from recipes, but I'm always pulling out the one recipe I use for homemade Taco seasoning. It's a pain finding that piece of paper each time lol.

Hm, maybe I'll had it to your list 🌮

 

Lloople

Member
Local time
17:47
Joined
Oct 6, 2019
Messages
16

Wow that website looks awesome and it's super easy to use! Well done right there 👏👏

 

avena

Member
Local time
11:47
Joined
Oct 19, 2019
Messages
149

Hey, this is cool! I am definitely needing some cookies recipes :D

 

Gummibeer

Astroneer
Moderator
Local time
17:47
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

Hey,
because your page hasn't any dynamic/interactive content - which isn't bad, it's perfect because it focuses on what it is about: your recipes!
I would recommend you to use any kind of static page generator and Zeit/Vercel - it's free and super fast. There are also tutorials for search which could be done via algolia or a simpler search running in a free Vercel FaaS.
Right now the search is super slow, which is bad for a search done while typing. If it would be faster I like search while typing because I don't have to wait for result pages.
And with Vercel you could use something like Airtable or any other API as CMS and inject the data while building. For sure you could also use simple MD/JSON files in repo.
Right now I play with 11ty and have to say that it's pretty cool! No setup/overhead and it supports multiple and even custom template engines and every data from.simple MD files to JS promises doing API calls.
Only the build of assets (JS/CSS/IMG) seems to be done separated - which is okay for me.

 

robcsaszar

Member
Gold Member
Local time
18:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

What a great idea! I don't cook much from recipes, but I'm always pulling out the one recipe I use for homemade Taco seasoning. It's a pain finding that piece of paper each time lol.

Hm, maybe I'll had it to your list 🌮


Nice! I'm looking forward to it, I recently managed to get some hari masa flour and really want to try out some tacos! 😁

Wow that website looks awesome and it's super easy to use! Well done right there 👏👏
Thank you very much! 🙇‍♂️

Hey, this is cool! I am definitely needing some cookies recipes :D

Appreciate it! I still need to put some of my own stuff on there as right now I'm still working on some final stuff but I definitely have some cookie recipes. 😁

Hey,
because your page hasn't any dynamic/interactive content - which isn't bad, it's perfect because it focuses on what it is about: your recipes!
I would recommend you to use any kind of static page generator and Zeit/Vercel - it's free and super fast. There are also tutorials for search which could be done via algolia or a simpler search running in a free Vercel FaaS.
Right now the search is super slow, which is bad for a search done while typing. If it would be faster I like search while typing because I don't have to wait for result pages.
And with Vercel you could use something like Airtable or any other API as CMS and inject the data while building. For sure you could also use simple MD/JSON files in repo.
Right now I play with 11ty and have to say that it's pretty cool! No setup/overhead and it supports multiple and even custom template engines and every data from.simple MD files to JS promises doing API calls.
Only the build of assets (JS/CSS/IMG) seems to be done separated - which is okay for me.

I'm currently using Jekyll for building based on MD files and the search is a simple Jekyll search container. But that's very odd that the search is slow for you... 😭 May I ask what browser you've tried it in? I've tested in Opera, Chrome, and Firefox on desktop and mobile and it's instant for me. 😮

 

Lloople

Member
Local time
17:47
Joined
Oct 6, 2019
Messages
16

Search for me is really really fast, to be honest, both in Chrome and Safari (Mac & iOS)

 

Gummibeer

Astroneer
Moderator
Local time
17:47
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

I'm currently using Jekyll for building based on MD files and the search is a simple Jekyll search container. But that's very odd that the search is slow for you... 😭 May I ask what browser you've tried it in? I've tested in Opera, Chrome, and Firefox on desktop and mobile and it's instant for me. 😮
I've tested it on my Huawei P10 Chrome v81 - on desktop I see that it's a JS onpage search, no request is done - strange. 🤔

 
Top