Whole Kitchen


Whole Kitchen is a web app that gives a user recipes based on the ingredients in their kitchen. The user enters the ingredients they have in their house and an algorithm returns recipes that can be made using those ingredients. 

This was my final project for CS132: Web Applications (Spring '16, Brown University). I also implemented a responsive prototype of this web app using HTML/CSS and Bootstrap. 


There are several similar web apps that already exist. After playing around with these web apps I decided that they were cumbersome. They tried to pack too much functionality into the service (such as addition recipe search, messaging, etc.). I wanted to make a streamlined web app that performed the task with ease.

My Main Changes

1. Other web apps would live update recipe lists as ingredients were entered. I found this distracting. In my web app, ingredients must be added before recipes can be searched.

2. I included an instructional time line at the top of the web app that is present on every page. This can be used for navigation and to give the user a clear understanding of where they are in the use case process. 

3. Guest and member accounts. Guest accounts are for quick searching on the fly. Member accounts save a users ingredients if they navigate away from the web app. A member can also bookmark recipes they discover. 

Home Page - Guest Mode

In guest mode, the user can quickly add ingredients and search recipes. None of their ingredients are saved after they navigate away from the web app. This is good for users who want to test the service or only use it once or twice. 

Adding Ingredients

Ingredients can be typed into a search bar, which includes auto complete, or added from the suggested ingredient list. The suggested ingredient list is generated by an algorithm that dynamically updates the suggested ingredients based on what you have entered into your fridge. For example, it would know that if you entered eggs it is likely that you also have milk as these items are often bought together. 

Searching Recipes

The returned recipes feature several filter options to make it easier to identify what you want to make. These options include:
Additional ingredients: This option will return recipes that require the additional amount of ingredients specified. A use case of this would be that you don’t mind taking a quick trip to the store so you can see what you could make if you were to pick up a few additional ingredients.

Meal type: This option allows you to switch between meal types such as breakfast, lunch, dinner, dessert, and snacks
Minimum ingredients: Specify the minimum number of ingredients the recipe requires. Example use case: the user wants to make something on the fancier side that requires more ingredients.

Maximum ingredients: Specify the maximum number of ingredients the recipe requires. Example use case: the user wants to make something simpler. 

Selecting a Recipe

Clicking on a recipe opens the ingredients and directions on how to make that recipe. A member user can also bookmark the recipe for later. 

Mobile Versions

In the mobile version, all this functionality is the same except the user navigates the interface in a top to bottom scrolling fashion. The only time the app moves laterally is when a user selects a recipe. 


I used green to signify healthy, home cooking. The fonts are simple and clean to present the content of the web app more clearly. Ingredients are presented in big green tab like buttons that can be dragged around. This makes the app more fun and pleasing to use. The color and round shape of the ingredient buttons is supposed to draw a user in and make them want to interact with the app.