Spoiling Fridge is here!

1504780336(1).png

Just dump all your ingredients there and you would be fed almost immediately with hundreds of recipes tailored to your needs.

One of my worst habits I’ve always wanted to get rid of is not planning for what to cook and getting a shopping list before the fridge gets empty and it’s time for groceries again. Sometimes I can just play it by ear, grab random ingredients and exotic spices and get lucky in the kitchen. But in reality, playing it by ear doesn’t work all the time. And when it doesn’t, disasters happen in the fridge. Foods that I’ve only used once begin to spoil horribly and all I could do is throwing them away. Since the fridge is empty now, I have to get groceries again. And because I never plan my meals, this just becomes a vicious cycle of getting random foods->using them only once->throwing them away->getting random foods again->using them once->throwing them away…

 

I decide to put an end to my endless wasteful actions. CodeBreak with StudentRND gave me the opportunity to think about this project and that’s when I decided to make Spoiling Fridge a personal cooking assistant.

DATE

June – July 2017

TIME SPENT

~30 hours

WHAT IT DOES

It’s a cooler-looking reimplementation of Edamam, a web app that takes in one or more ingredient names and returns a list of recipes that contain these ingredients. AngularJS is involved.

Thanks to the health and dietary labels you can apply filters to those recipes according to their dietary properties (i.e. low-fat, gluten-free, etc.).

HOW IT’S BUILT

The project was built with AngularJS. Design supported by Google Fonts, Animate.css and Font Awesome.

Every time you press enter after typing in ingredient names, a GET request is made to the Edamam API with the ingredient names as parameters in the API call.

CHALLENGES

Trying to get what REST really means and how HTTP works for the first time gave me headaches. All I was trying to code turned out to be just a simple GET request, but I spent about 40% of my time on learning these important topics in web dev.

The returned JSON object was also HUGE with a lot of extra information that I didn’t need. I familiarized myself with the structure of JSON objects and how to access them. All of it seems like nothing now, but once felt like climbing up Mt.Everest with my bare feet.

WHAT I LEARNED

I spent most of my 30 hours of time on learning and familiarizing myself with Angular. ng-repeat was a super life/time-saver. At least I took the time to learn concepts and syntax of a powerful framework like Angular, though it would take me about the same time to just type out every single line of code for the boxes for each result, but will definitely save much more time in the long run.

Feel free to contribute to it on GitHub! 🙂

BUILT WITH

TRY IT OUT

View this project on GitHub: https://github.com/jluo9612/spoiling-fridge

(This post is created from Devpost’s project story template)

Advertisements

CollabSketch! : Google Docs for Artists

collabsketch.jpg

Montage of creative works through CollabSketch!

11.png

My Painter Orpheus illustration. Orpheus is the mascot of Hack Club, the largest non-profit network of student-led high school coding clubs and the developer of the original Collaborative Sketch workshop.

DATE

June 2016

TIME SPENT

~8 hours

WHAT IT DOES

It lets you and others draw cool stuff together! If you are familiar with Google Docs or any real-time collaboration apps, this one is a real-time collaborative canvas.

HOW IT’S BUILT

It uses p5.js to support the drawing functionality and jQuery for saving and deletion. Firebase, a key tool, provides instant back-end services so that you won’t lose your masterpiece when you close your browser.

CHALLENGES

Forming line drawings was a feature that I spent a good amount of time trying to figure out how it works correctly. It required changing up the algorithm that originally drew simple consecutive ellipses to an entirely different one. Originally ellipses were drawn and data were pushed into an array and up to Firebase. In order for line-drawing to work, the new drawing algorithm has to listen to mouse events and keep track of two locations where it will draw the line between.

WHAT I LEARNED

A change from dot-drawing to line-drawing might seem frivolous, but was actually an improvement on usability (was able to create much more sophisticated doodles).

Don’t be afraid to go the extra mile. You will be surprised by the amount of support and tools you need that’s out there!

BUILT WITH

TRY IT OUT

(This post is created from Devpost’s project story template)

The Making of Shouty Flap

Shouty Flap Game

Shout to start. Scream to fly.

 

Playing Flappy Bird was probably one of the most frustrating things ever happened to me. It doesn’t show any fruit after I put so much effort into practicing it — no matter how much I want to become good at it, the scores just seem to always be dominated by my RNG, not my skills. If playing a game doesn’t help me become better at it and the results are mostly dependent on RNG, it is of no value to me and will only cause frustration instead of providing entertainment every time I play it.

 

That’s why I decided to change Flappy Bird into a skill-based game.

Date

June 2016

Time Spent

8-10 hours

What it does

Since it’s a beginner’s project, it relies on Google’s Speech Recognition API to recognize keywords for actions like “firing a bullet” or “ascending” by the player in the game.

How It’s Built

Under the hood, it depends on a few p5.js and Google SR libraries for game controls, audio input and recording the user’s transcripts and processing them. The game controls are similar to an iOS game (Ahh Pah!) that had been popular in Asia for a while, but now you get to play something like that right on your laptop and in your browser! It even feels more light-weight and fun.

Challenges

I wanted to implement the game so that the player’s ascension value is dependent on the volume of the voice input and have invisible ceiling and floor to prevent the player from going out of bounds. This was challenging at first because p5.play doesn’t have an intuitive coordinate system.

A big problem that happened was when we tried to put the game through PhoneGap and turn it into an iOS app. We tested it first in Safari and imagined that it would be quick and easy, but apparently, Safari needed plugins to support a method in p5.js to get any voice input. We tried with several plugins and they did not help solve the problem whatsoever. That was when we decided to let go of PhoneGap thought since we don’t want to add any more dependencies to the project. I’m still working on finding a solution to that need.

What I learned

A casual game should always be fun to play and make, and it’s not a matter of its programming complexity. It’s the first time I’ve really experienced the power of JavaScript and its libraries and realized that I could use it to turn a frustrating game, a game I (and probably you, too) have almost given up, into a crazily fun one.

I’m also excited to hear that this game had become quite popular in the Hack Club community and had been introduced as an example project to new Hack Club members. Shout out to Hack Club! Shouty Flap was made possible for everyone to enjoy because of you.

Please, contribute to it on GitHub if you know how to make it better! 🙂

Built With

Try it out

View this project on GitHub: Shouty Flap

(This post is created from Devpost’s project story template)