Show HN: My Smoothie Stack – What are you using to build your smoothie?

17 17 4 years ago

Hi, I'm Justin, creator of My Smoothie Stack. I'm a new developer so I'm grateful for any feedback on my source code [0].

Here's my personal recipe [1].

If you take a look at that URL, you'll see it's quite long. I wanted to be able to share recipes, but I don't have any backend knowledge. I had to get creative and store the object representing the recipe in an object encoded in Base64. This presented some character escaping issues, but those were manageable.

I don't expect this project to change the world. I just wanted a way to practice my newfound React skills and share some smoothie recipes. If you give this a try, please share your recipe!

Thanks for your time!

[0] https://github.com/somewhatJustin/smoothie-stack/

[1] https://mysmoothiestack.com/?share=eyJpbmdyZWRpZW50cyI6WyJGc...

mdaniel• 4 years ago

Congratulations on your launch!

This presented some character escaping issues, but those were manageable.

In case you were interested, there's a section devoted to that in RFC 3548: https://datatracker.ietf.org/doc/html/rfc3548#section-4 with the tl;dr of `s/[+]/-/; s/[/]/_/` and then omitting the trailing "=" characters and just padding the incoming b64 since (AFAIK) one can add as many "=" as they'd like and it'll just ignore extra ones

Depending on your interoperability interests, you can shave a bit of text out of it by shortening the JSON key names `"i"`, `"a"`, `"n"`, and then also `.filter(Boolean)` to nuke those two trailing empty strings

normac2• 4 years ago

In case you were interested, there's a section devoted to that in RFC 3548: https://datatracker.ietf.org/doc/html/rfc3548#section-4 with the tl;dr of `s/[+]/-/; s/[/]/_/` and then omitting the trailing "=" characters and just padding the incoming b64 since (AFAIK) one can add as many "=" as they'd like and it'll just ignore extra ones

Just to add one thing: in case Justin isn't familiar, "s/original_thing/replacement_thing" is a figure of speech often used in the hacker subculture to mean "replace original_thing with replacement_thing." It comes from some languages and editors like Perl and Vim/vi, where that syntax (and variations) are used for search and replace.

somewhatjustin8• 4 years ago

Thanks for taking a look!

In case you were interested, there's a section devoted to that in RFC 3548: https://datatracker.ietf.org/doc/html/rfc3548#section-4 with the tl;dr of `s/[+]/-/; s/[/]/_/` and then omitting the trailing "=" characters and just padding the incoming b64 since (AFAIK) one can add as many "=" as they'd like and it'll just ignore extra ones

Thanks! I'll check this out.

Depending on your interoperability interests, you can shave a bit of text out of it by shortening the JSON key names `"i"`, `"a"`, `"n"`, and then also `.filter(Boolean)` to nuke those two trailing empty strings

This is a good idea. I might already be filtering those empty strings but I'll have to check.

howeyc• 4 years ago

Neat. I decided to play

https://mysmoothiestack.com/?share=eyJpbmdyZWRpZW50cyI6WyJCY...

somewhatjustin8• 4 years ago

Thanks for playing! Makes me realize I need better syntax for cases where the ingredient is just a whole X.

I'd love to try your recipe but I seem to be allergic to avocado and would not have a fun time.

dublin• 4 years ago

It'd be nice to be able to browse and search the recipes (e.g., to see what people have come up with for the ingredients you have on hand, etc.) I like the quick hack nature of it, though...

somewhatjustin8• 4 years ago

Thanks! And yes, I agree, that would be nice.

al_borland• 4 years ago

Pretty cool. Congrats on getting launched!

While I thought a favorites, browse, and top smoothies section would be cool... I read your comment about not knowing backend development yet, so your current implementation makes a lot of sense. I'm actually a huge fan of simple client-side sites that aren't over-engineered. Those are the kinds of things I do when I'm bored... try to make a simple, but useful, little site that is basic enough to run off GitHub pages. If I can do it in less than 100 lines, that's also a win.

The cool thing about the project you chose is that it has a lot of room to grow if you decide to take it in that direction, and if not, your MVP is still a useful site.

somewhatjustin8• 4 years ago

Thank you!

I'm considering going in the direction of full stack development, so your feature suggestions could be great ways to learn backend.

0x008• 4 years ago

Would be nice if we were

* able to browser recipies by others, maybe vote?

* see the nutritional contents of each recipe (at least an estimate)

somewhatjustin8• 4 years ago

The second is particularly appealing to me. I wonder if there's some sort of open food API I could tap in to. Would also love to build your first idea as well once I start to learn backend development.

prithsr2• 4 years ago

I like this! I worked on a passion project during the early weeks of covid / lockdown called Choose My Smoothie. Didn't continue working on it for long but always wondered where else I could take it - this would have been a nice addition.

somewhatjustin8• 4 years ago

Thank you! Is Choose My Smoothie still around? Would love to take a look.

prithsr2• 4 years ago

Yes! https://choosemysmoothie.com

HAL9OOO• 4 years ago

Pretty cool idea to practice skills, I'll take a look at the source code since I'm just getting into React now too :). I'm sure there's an API for something like myfitnesspal for nutritional information, and I second having a simple voting system for best public smoothie recipes.

Show HN: My Smoothie Stack – What are you using to build your smoothie?

Related Stories