As avid bakers with dietary restrictions, we have always struggled to find recipes that meet all of our needs. They often contain ingredients that we don’t have at home, we are allergic to, or simply choose not to eat. When looking to make the “Best Chocolate Chip Cookies” recipe on, we encountered the same problem with ingredients like eggs or butter. Thus, we were inspired to build milk & cookies, an extension that makes the process of finding working replacements seamless.

What it does

milk & cookies is a google chrome extension that extracts replaceable ingredients from a recipe, and automatically suggests alternatives to those ingredients. Users can choose which ingredients they would like to replace and select an alternative that fits their needs. The extension updates the recipe on the website to display the replacements and their corresponding measurements in order to successfully make the recipe with the replacements.

How we built it

To create this Chrome extension, we first researched ingredient replacements and created a custom database. We built a frontend in React, which we connected with a JavaScript backend that extracts ingredient data from the website, queries the database to find potential alternatives, and performs measurement conversions.

Challenges we ran into

Since this was our team’s first time building a Chrome extension, one of the major challenges we faced was in integrating our product with the browser. At first, we struggled with rendering the React popup as an overlay on the website, and had to fix several issues with the build process of the extension, as well as the manifest files. When attempting to integrate the backend with the recipe website, we were met with many errors that were difficult to pinpoint in our code, since the JavaScript is minified during the build and we couldn’t see line numbers as we were debugging. Overall, the process of working with website data and using Chrome DevTools to debug our issues was a big challenge, since we couldn’t spot the errors in our code as easily.

Accomplishments that we're proud of

The accomplishment that we are most proud of is being able to successfully integrate the various components of our extension and create a cohesive product.

What we learned

Although we faced a lot of challenges along the way, we learned a lot about unit testing and debugging in different environments, working with JavaScript, as well as writing programs to parse through and modify websites.

What's next for milk & cookies...

We’re extremely excited for the future of milk & cookies! We hope to add customizable default replacements, including vegan and vegetarian presets, and have notes & tips about the baking process to make the integration of the replacement smoother.

Share this project: