As college students, we rely too often on cup noodles and fast food to get through our late night study sessions. Access to affordable, healthy food is a problem for many people. But new projects aimed at increasing access to healthy food, like this one in Philadelphia (, show that new grocery stores alone aren't enough to change people's eating habits. Many people continue to choose fast food because they believe grocery shopping costs more, and without careful planning, it can. Data on the Sugar-Sweetened Beverage Consumption in California Residents (2012/2013) showed a direct, negative relationship between yearly income and daily beverages consumed. We realized the need for a resource that helps people discover healthy, homemade alternatives to fast food.

What it does

Cheaper than a Burger allows people who typically eat fast food meals to switch to healthy, homemade cooking. The web app provides a number of recipes, all under $5 per serving. When a user decides to make a recipe, he clicks “I made it!” which brings him to a page that shows his total savings. These savings are calculated on a baseline of a $5.99 Big Mac meal and aggregate over time. The user is challenged to save as much money as possible in one month.

How we built it

Backend: We created a Firebase database of popular recipes and their prices, then performed our own calculations to determine the figures (amount of money the user would save over a certain period of time). We used the Google Maps API to generate the locations of nearby grocery stores.

Website: The website was built using Node.js, Embedded JavaScript, and JQuery. Frontend used Adobe Illustrator to create graphics and Animate.css for animations.

Challenges we ran into

The WiFi didn’t work reliably for the first half of the hackathon, so we went to Peet’s Coffee to work on the project. As we were building a web application, we needed steady WiFi in order to view our project, use Firebase, and have access to GitHub.

It was difficult to get the user balance (money saved) to successfully add savings each time a user makes a recipe. To solve this problem, we created a server-side tracker that updates its value with every action from the client. This strategy is very effective with one client (although two or more clients would result in a data race!), but we plan to improve this as a next step to support multiple users.

Also, the brightness of the recipe images initially made their names hard to read. We added the recipe images as backgrounds, so reducing their opacity faded out the text as well. To pair faded images with dark text, we made two sets of images, one faded using Illustrator for the front page and another at full brightness for each recipe’s page.

Accomplishments that we're proud of

We are very proud of our team member, Srishti, who made our logo in Illustrator. We are also very happy that we got the Firebase database working, which provides the opportunity to automate our data collection process in the future.

What we learned

We learned how to integrate APIs, prioritize features, and send data between the server and client in a web application.

HackDavis was three of our members’ first hackathon, so we gained skills specific to the timed environment. We learned how to distribute parts of a large project based on our individual strengths. We also learned to set goals that were slightly more ambitious than we expected to complete. This allowed us to push ourselves, and eventually we were able to add the map feature and a “money saved” counter that we wanted.

What's next for Cheaper than a Burger

We hope to automate the database population, pulling directly from websites instead of relying on pre-population or manual data entry.

We would like to support multiple users on the application, which means replacing the server-side tracker (which would result in a data race as all users try to update the same balance).

We want to add a search functionality where a user can input any fast food item, and the app will return cheaper substitute recipes.

Share this project: