Description as a Tweet:

Eatssentials is an online recipe book built around your health and what’s in your fridge. The website helps users with certain health conditions such as diabetes, BP and more. Users browse for health accommodating meals they can prepare with the limited items at their disposal.

Inspiration:

The current pandemic situation and how the indoor lifestyle has been detrimental to most individuals, especially those with the mentioned health conditions, is what inspired us to make this web application. For starters, grocery shopping and casual dining during this pandemic has and continues to be a major risk. We realized how difficult home cooking can be if grocery shopping is infrequent and ingredients at home are limited. On top of that, many individuals have to stick to strict diets for health reasons and at a chaotic time like this, health is the number one priority. The reason or inspiration for this application has many reasons, but the main reason is how it supports an easy and nutritional lifestyle for individuals of all walks of life.

What it does:

Eatssentials enables users to identify and prepare meals that are tailored to their health and nutrition needs by initially asking about their pre-existing health conditions. The specific health conditions they are questioned about are diabetes, high/low blood pressure, vitamin A deficiency, calcium deficiency, iron deficiency, and their cholesterol levels. Then, they log food they have in their fridge and recipes are generated based on the ingredients available and their health needs. These recipes were already stored within the Spoonacular database and were accessed through the use of its API. However, our program customized what recipes were displayed based on the user’s health conditions and their available ingredients. Therefore, while the recipes were generated by Spoonacular, our program used an algorithm that computed which recipes were most beneficial to the user. The website intends to help users with certain health conditions by browsing the web for health accommodating meals they can prepare with the limited items at their disposal.

How we built it:

The website was built using HTML, CSS, JS, Bootstrap, PHP, MySQL, and the SpoonacularAPI. When the user is prompted to select their health data, we used localStorage to store those variables in the user’s browser so it would be easy for us to access later on. The ingredients in the fridge portion of the website was done using an MySQL database with PHP. The website would communicate with the database and return the results to the user and also allow them to insert and delete records from the database all from the website. The recipe return part of the website was coded entirely in Javascript. Using php and mysql we get the current list of ingredients that are in the user’s fridge and pass it to a javascript variable. First we make an api call to get recipes that the user can make using the ingredients that the user has. Then we make another api call to get the id of the recipe and return all the ingredients that are in the recipe. Afterwards we compare the list of ingredients in the recipe with our own list of ingredients that are beneficial for certain medical conditions. Then we calculate a score depending on how “good” the recipe is for the user dependent on their health condition. Finally we return to the user the recipe and the link to where they can go make it themselves.
For the design of the website, we first mapped out how the site would flow through creating a flowchart and a sitemap to see how the navigation would work. After this, we mocked up concepts on Adobe XD. We used Adobe Illustrator to create the fridge graphic on the homepage as well as the word-mark logo. The overall look and feel of the website was designed to be minimalistic and easy to use. The graphics made the site a bit more playful and cute.

Technologies we used:

HTML/CSS
Javascript
PHP
SQL
Misc

Challenges we ran into:

A challenge for our team was connecting the back-end functions to the front-end. We had to make sure that the health conditions were stored and applied to when we searched for the right recipes. It was difficult for our web designer to work without having working back-end code to build on and stylize. Bouncing between PHP and HTML was difficult due to the difficulty of not being able to preview the code live as stylistic decisions were made. Additionally, we had never used javascript before or worked with this api so it was a steep learning curve to understand how to manipulate the data and export what we wanted to the website so the user can see it.

Accomplishments we're proud of:

We are definitely proud of being able to finish the hackathon with a working prototype and walk away from the event having learned a lot of things. Since we never used a lot of these languages or softwares before it was rewarding to be able to put something together during a single weekend. From a design standpoint, our project looks great for the little time we had to put into it. Oftentimes, design can be seen as the least important part of a project, but it can add more value to it and make it feel and look more real. The entire event has undoubtedly been a great learning and bonding experience.

What we've learned:

Specifically focusing on the software development process we learned a wide range of technologies. Having never used javascript before we learned that using localStorage for storing data is a much more efficient way than setting up a database and sending the data there and back. Also we never worked with APIs before so being able to learn how APIs work and be able to understand it as we build it was a great learning experience.

What's next:

For the interest of time, we decided not to create a login/sign up page in order to get the main functionality of the website working. The purpose of the login/sign up would be for users to refer back to their tailored recipes in the future. The recipes tab would essentially be a personal recipe book for the user. In addition the presentation of the recipes under the Recipes tab is something that needs to be polished. Currently each generated recipe is displayed in a card holder. A good idea for us would be to implement some real user feedback to see where we could improve and even add more functionality.
Lastly, the website flow needs to be altered to make it easier for users to navigate the page. As an example, under the Dashboard, if a user wants to delete an ingredient that they have added, the delete action will prompt the website to the homepage. Ideally, a delete action should still keep the user on the Dashboard tab.

Built with:

Software Development: HTML, CSS, JavaScript, PHP, MySQL, Github
Design: Adobe Illustrator and Adobe XD

Prizes we're going for:

Best Documentation
Best Web Hack
Best Domain Name
Best Healthcare Hack
Best Beginner Software Hack
Best Beginner Web Hack

Eatssentials