The Thyme is Ripe

• 

  The ideal style of our site

• 

• 

• 

• 

Inspiration

Our idea stemmed from the fact that one of our team members brought up the issue about how much food she wastes at her house because she sometimes forgets she bought something and ends up throwing it out because it was stuck at the back of the fridge and has gone bad.After doing some more research, we found out that food waste was a national problem in Canada and it wasn't just us that were dealing with the same problem. Annually, 31 billion dollars worth of food goes to waste in Canada alone. And we think that's crazy as this is money that could be going elsewhere. We wanted to solve a problem by going green which will in turn will return some greens ($$) back into our wallet.

What it does

Once someone buys groceries, ideally, they would be able to use a Watson Visual Recognition Starter api to take pictures of their items which would automatically store what they have bought. (we're working on it). But for the mean time, they are able to type in the food items they bought as well as their expiry dates. Then we would compile a list of all these groceries, called "My Pantry" and keep a list of all the food items from the earliest expiry date to the long term foods. When there's an upcoming expiry date that we notice coming up, we would alert the user. The user then has the option to make something with this food item. They would enter the food name, what they want included in the meal, what they don't want or have, as well as any food restrictions and allergies. After this information is inputted, we would output recipes that fit their needs and wants. These are recipes that they have all the ingredients to since we would be able to check our lists of groceries that they inputted. This will really help the user save food and provide them with recipes that only use what they have.

How I built it

Our website was built using HTML, CSS and Javascript and implemented a recipe API from spoonacular.com. We also implemented a simple bootstrap template for the general layout of our webpage.

Given that majority of our teammates are first time hackers, we decided to focus on the recipe search function of our web app. We built a landing page where the user is prompted for the ingredients they have available, ingredients to avoid as well as dietary and allergy based restrictions. Using the Javascript knowledge we acquired throughout this weekend, we successfully created functions would take in the user's input and process it in order to be searched for in the recipe API. Using a simple Javascript function, we saved the ingredients to use and avoid as a string as the user is prompted to type in this information. On the other hand, the allergies and restrictions were given as checkboxes, so the function used to process this data saved them as a boolean array, where each index corresponds to a specific restriction or allergy. Once this information is entered, the user would press the "Find Recipes!" which would then in turn make a call to the API and return any matching recipes.

Unfortunately, the API posed a lot of problems and we weren't able to properly display the results given by it with our current Javascript knowledge. In order to display how our web app was intended to function we implemented a few recipe samples. To get a general understanding of how it works input the following:

Available Ingredients : pasta, pickles, tomatoes, cheese Ingredients to Avoid: milk, peppers Dietary Restrictions: vegatarian Allergy: eggs

Challenges I ran into

A major issue we ran into was the implementation of the recipe API in our site. Although we were able to successfully access the API and get recipes, we were unable to properly handle the resulting JSON object. Due to this issue, we were unsure of how we would display the recipe information to the user and decided to include sample recipes for the sake of creating a working prototype which displays our intentions. Another issue we had was the custom domain, as we are lacking in the knowledge of web hosting. We struggled to utilize our domain "thethymeisripe.com" and decided to utilize Github's hosting service instead.

Accomplishments that I'm proud of

We are all proud of how far we've come in terms of our Javascript skills, as most of us had very limited knowledge of it in the beginning of the hackathon. However, through perseverance we were able to successfully research and implement these newfound skills through our website.

What I learned

Given that we were mostly beginners in the world of Javascript, we learned quite a bit on the syntax and functionalities one can create and use. Alongside this, we learned quite a bit about APIs including on how to call to them and the basics on JSON objects, with the aid of a mentor.

What's next for The Thyme is Ripe

Since majority of our team members are high school students and are first time hackers,we decided to work on a website prototype as we had some knowledge in HTML and CSS. We would essentially want to make this into an app which would make this a million times easier for the user to use compared to a website. As mentioned before, incorporating the Watson visual recognition api is pretty high up on our list as well as it would improve user experience. We also aim to implement the remaining functionalities we outlined in the beginning, mainly the "My Pantry" function of our project.

Built With

• api
• css
• html
• javascript