Project #1: Autochef

Team: The United Front <end>


The Autochef is a web application that will help you decide what you can cook.


Take ingredients available from your pantry and find suggestions of recipes to create based on the ingredients on-hand. Click [Get Started] on the home page to try us out! It will simplify your cooking experience.

1

Get Started
Enter your name

2

Fill items to your pantry

3

Select items you want to use

4

Select that perfect recipe

5

Go grocery shopping for those extra ingredients


Description

This application takes food on hand (your pantry) and adds it to a search to find recipes based on what's in your pantry. Select ingredients adding them to your pantry either from using the preselected category feature (sidebar) or enter in your ingredients manually using the text field (input). Select ingredients to search for recipes. Browse the queried results and if you’re missing ingredients, you can use Google Maps to find the nearest grocery store.

Results: The functionality of this application requires tracking the items the users has, and matching selected items with the Edaman API to get recipes with targeted ingredients. The matches are displayed for the user to look further into detail of the recipe. The user has the to option to browse grocery stores using the Google Maps API.

Motivation

Utilizing ingredients: If you are willing to cook, and don’t know what to make for a meal, this site can help you. Using what you have is the primary goal for this applications.

Reducing food waste. It’s tough to come up with delicious meals of things you have on hand. Once you inventory what you already own to the virtual pantry, let the algorithms help utilize your items. No more produce going bad in the fridge.

Stress free. We get hungry and would like to cook but don't know what to cook. Let the search engine find what recipes you can make with what you have on hand. No more anxiety over what to make.

Minimum Viable Product

The MVP for this application allows the user to fill a pantry and select items to search. When the recipes are populated it would highlight the missing ingredients, and allow you to purchase with the left over cost of items from a nearby grocery store. This shopping list feature was modified to a nearby grocery stores on a map.


Team Efforts

The United Front<end>

Delegations during this project did not take place. Each team member volunteered to take on initial activities (like documenting, wire-framing, API access, category design) which broke out our tasks. As we progressed, members with available time would commit to assisting with troubleshooting the issues and continue with features not yet implemented.

Individual Efforts

@Anish Page layout, Category layout, Pantry layout

@Elvin Organization, Firebase, Local storage, Javascript interactivity, Git merges

@Lindsey Wireframing, Home page design, API (Google Maps), Firebase, Local storage

@Pierce Ajax, APIs (Edamam, Wegmans, Recipe Puppy, TheMealDB, Food2Fork), Firebase, Uniform Styling


Challenges and Improvements

General
Challenge
Improvement

Identifying usable APIs that meet our initial MVP. Finding recipe APIs that were free and that can return information we can use for our purpose was challenging. Different sites return different object data structures. It takes time to go through and experiment with each of the data and potential using up query limits with free API accounts. Also, with food or grocery APIs, we could not register to obtain an access key with any store, either with high cost, unavailable or wait period.

Changing API from food or grocery, meant changing our initial vision. Time wasted searching for various stores and we had to be firm instead of constantly hoping or waiting for a response. Based on the initial vision to build out a shopping list, the user would just manually search for a local grocery store using Google Maps API.

Project #1 has a fast time line. Balancing time was a challenge in deciding to spend time refactoring code or just trying to meet the minimum viable product. Reorganizing code helps with logical thinking and connecting interaction.

Uniform styling is challenging. Each of us created our own CSS to help with building pages and features, and merging is not just as simple as adding all the code together. We each think about style coding differently, some tagging general selectors and some very specific. This created style conflicts which made us reassess page layout.

Project planning and documentation was a challenging. We initially began with a Google Document to collaborative align on all functionality of the site. We started adding these details to a Trello board to break up features to help with status tracking and self-delegations, but maintaining all this information in a short time frame was tough.

Use of checkboxes were a challenge. This element is composed of input and label tags and selecting and targeting these at different sections on a page was complex. Sometimes they are in a table and sometimes nested in other parent elements. One of the trickiest problems involved deleting items in all areas from an action, HTML Display, Firebase, and variable. Each had to be specifically targeted.

When clicking between pages, we wanted the information to be persistent. However, it was more than just a list. It was tracking each item that selected and each item on-hand compared to the default category list. Making those updates during the page loads was tricky.

At this time, Git branching, pushing and merging is still a mystery. We learned a lot about it but some of the errors and resolving the conflicts are bewildering. Why this is a challenge, none of us are confident to just make changes / branches to understand the intention of all conflicts.

Missing ingredients: Based on what is in your pantry, this list should filter what items are needed in the recipe. Highlight them and be able to see and extract the missing items. Depending on the API, a lot of string processing is required here.

Shopping list: Once the missing ingredients are identified, these items can be added to separate list. It can summarize all the items the user needs to obtain for shopping.

Pricing ingredients: The missing items are extracted, and then these items can be queried against a Grocery Store API to determine the local pricing. This was our initial intent in the app design, however without an API it was difficult to test the difficulty.

Parsing out information in recipes: Almost every recipe has information of the item from a source location. Parsing the information would give users description of the work involved and potentially modal view the item without needing to go to a different site.

Favoriting recipes: An added feature for users to bookmark specific recipes. This can be done by tracking the source site and API Unique ID.

Geolocations: Currently the grocery store finder needs to manually enter the location you are at. With geolocation, the browser can detect your current location and with 1-click automatically show you nearby stores.

Multiple Users: Multiple Users: Different people can track their own pantry items, favorite recipes.

Multiple APIs and Query algorithm: Gather information from other sources to help user make choices. An algorithm can track intrests between the different sources to show more popular results.