top of page


A meal-planning platform that takes in your preferences to formulate a weekly meal plan that meets your needs 

*Won Audience's Choice Award for BU Spark! Software Engineering Practicum



My Role​

Front-end developer


Client from Savor; Spark! Software Engineering Practicum

Project Size

Team of 4 for one semester 

  • Hannah (Yunhan) Huang (Back-end)

  • Andrew Eramo (Back-end)

  • Alex Doval (Front-end)


React.js, Gatsby.js, Bootstrap


Javascript, SCSS



Project Link

Savor is a meal-planning platform that takes in a user’s dietary preferences, family size, and budget to formulate a meal plan/grocery list. The program will maximize each ingredient spreading its use throughout the meal plan instead of, for example, using an entire chicken breast for one recipe. 


Problem statement: Currently, there is an annual domestic food waste caused by spoilage occurring at every stage of the production and supply chain, amounting to $161 billion worth of food in the United States; this especially affects low income families who are dealing with budgeting issues and unemployment.

Our Users give Savor their budget and food preferences. Then, Savor will give our users a weekly meal plan that will fit their budget!

Front-end: React.js, Gatsby.js => React framework, easy to set up, fast site and image loading (graphql) 


Backend: Firebase => user-friendly interface for database management, built-in OAuth

  • OAuth -> google authentication

  • Database -> NoSQL

    • User information: Budget, family size, dietary preferences

    • Recipes: dietary restrictions, estimated price, ingredients, etc.


Savor is the most affordable, easy to use, meal planning platform, especially during these difficult economic times. It is a subscription based application that takes in filters such as family size, dietary preferences, and budget, to formulate a grocery list that plans one’s weekly meal plan. It maximizes each ingredient purchased by the consumer by using increments of each item purchased in multiple recipes.


By the end of one’s weekly meal plan, all ingredients will be used and money will not be wasted on potential leftovers one throws away. Also, the users will be able to chart how each ingredient is being used, in terms of amount, for each recipe, essentially showing the lifecycle of each ingredient. 

For the purpose of our project, the client wants a proof-of-concept as a website. See below. Wireframes given by the client.

Screen Shot 2021-01-10 at 7.07.26 PM.png

1. Home Page

Screen Shot 2021-01-10 at 7.14.17 PM.png
Screen Shot 2021-01-10 at 8.03.56 PM.png

2. Login / Sign up Page: The user can choose to log in to their account or log in with google. Or, they can create an account by signing up.

Screen Shot 2021-01-10 at 7.15.06 PM.png

3. Create Profile: If they're signing up, they will have to enter their profile's information.

Screen Shot 2021-01-10 at 7.15.19 PM.png

4. Select Subscription Plan: This includes choosing a subscription plan.

Screen Shot 2021-01-10 at 7.15.30 PM.png

5. Set Preferences: The user will also have to input their budget, group size, and any dietary restrictions.

Screen Shot 2021-01-10 at 7.16.03 PM.png

6. Meal Dashboard: The recommended meal plan will then appear on their dashboard.

Note: During Fall 2020 (time of project), the client was still working on finalizing the wireframes as well as the workflow of the product. However, our project serves as a proof-of-concept for the client, which is also what the client requested for, so he could do user research with what we've worked on for this semester. 

bottom of page