The following is an overview of the group Capstone Project of my most recent adventure: Web Development coding bootcamp at Fullstack Academy.
Fullsnack is an all-in-one kitchen app for managing foods in a user’s shopping lists, pantries, and recipes. By adding recipes to their collection, Fullsnack does the work of putting necessary ingredients on their shopping list, as well as tracking the items they already have. Fullsnack also tracks the nutritional data of the foods they eat and builds engaging visualizations of their habits.
My contribution to this project lies primarily in the implementation of a recommendation system of recipes to users. On the Recipes page, users are provided with a carousel of recipes that can be stored in their profile. These recipes are obtained from the Edamam API, which offered us an array of various recipes and associated ingredients. With this limited information, the recipes were then ordered according to the user’s preferences and moreover according to the ingredients that are already present in the user’s pantry. Due to the restrictive number of requests permitted to this API, I designed an algorithm to optimize the number of API calls to retrieve new recipes.
In addition, my contributions are evident in the front-end presentation of components on the Foods and Recipes pages. By using React-Bootstrap and modularized CSS, I was able to introduce an organized, colorful scheme to the site. Furthermore, I used React Hooks to implement logic by which users receive notifications whenever actions result in items added to their shopping list (e.g., clicking on recommended recipes produces a navbar popover indicating that ingredients have been automatically added to the shopping list). These and other decisions have offered important lessons about the development of a positive user experience.
I welcome you to visit the final Heroku deployment of the project here. The source code is also accessible at our GitHub repository here.
Teammates:
