Looking to bake a perfectly portioned recipe to stick to health goals or eliminate food waste? Don’t have access to certain ingredients but still yearning for a sweet treat with a homemade touch? 🥣 Then step into the Baker’s Toolbox, where a baker’s possibilities are endless. No matter your limitations, we promise to aid you along your journey of honing your baking skills and satisfying your most fervent cravings. ✨✨

This project was inspired by the challenges we faced in our own baking endeavors. When looking up a recipe, we found that there was usually never an option to halve or quarter recipes, and not many recipe blog websites would provide substitutions for ingredients. This would lead to a never-ending spiral of trying to find the “perfect” recipe with just the right portion size and only the ingredients that we had at our disposal. We hope that this project can mitigate these issues and encourage bakers of all kinds to continue to try their hand at the art of baking!

There are three main features that Baker's ToolBox has:

• Generating Conversion (depending on the user’s inputted conversion factor, either increase/decrease the current ingredient quantities)
• Suggesting Sub (If the user choose to do substitution, the app allows user to search for a substitution for the ingredient)
• Handling user input of ingredient (if the user input an ingredient, they will be able to view it on the recipe page)

We incorporated MaterializeCSS to build our HTML pages. This included built-in HTML/CSS and JS components. Additionally, we incorporated Spoonacular API to get substitute for ingredients that the user want to substitute.

• MaterializeCSS: https://materializecss.com/about.html
• SpoonacularAPI: https://spoonacular.com/food-api/docs

Since we were all very new to creating a project from scratch. We had a bit of issues with formatting the file system. We were also very unfamiliar with component library & API which really pushed us out of our comfort zone by having to reach out to mentors for extra help, reading the documentation, and also getting some help from YouTube.

We are really proud of how the team was very communicative and transparent about what we want in our project. This made our work flow very smooth and we were able to scope out the project to a manageable piece. In the end, we were able to create the features that we wanted to include!

We learned how to use component libraries such as MaterializeCSS and also how to connect with an API so we are able to get substitution for the food!

There are some cases where we want authenticate user's input and hopefully be able to get the recipes ingredient straight from a website instead of having the users input to avoid any missing ingredients or misspelling. We also plan to have the website instantly suggest substitution for the ingredient instead of having the user search for the ingredients that they want to substitute. We could also consider adding a remove ingredient button to the “add recipe” popup in case the user accidentally clicks the “+” icon too many times.