RealMeals | Devpost

Inspiration

Oftentimes, I hear people talking about how they need to eat less to be healthier and how the amount of calories they are eating is making them unhealthy. But really, the root problem lies in having a balanced healthy meal. Our app creates an easy way to see if your meal has all five food groups: vegetable, fruits, grain, dairy and protein. We wanted to make having a balanced meal as quick as taking a picture and fun by being able to share your meal with your friends.

What it does

You will take a picture on your app and our app then scans if each food group is present in your meal. The app will tell you which food groups you are missing and will allow you to share your meal to your friends! Our app is able to address huge issues like heart disease and health issues by providing accessibility and addressing mental health issues that come with malnutrition.

How we built it

We first split the different pages that needed to be built. The three pages we needed to build were the opening screen that prompts the user to take a photo, the page that tells the user which of the food groups they are missing and finally the page to share your meal. We grouped and focused on each page individually. For the initial page, we wanted the user to be able to take a picture on the app and have that sent to the Google API to scan what food is in the image. We used the Camera library on Expo and when the button is pressed it is stored and exported to the Google Cloud Vision API. From here, the user can retake their photo, which restarts the process and re-initialize the states. With the API, we can analyze the image taken with our app, and the information that we get is processed and further analyzed in our "What is Missing" Page to figure out which general food group is missing. In our “What is Missing” Page, we made lists for each food group with possible components in a meal based on the Google API options. Then, we used nested for loops to scan the lists for which of the food groups was present in the meal. Using another group of loops, Use another for loop to save which food groups are present and then display the food groups in green or red based on their presence in the meal. The share page merged into our “What’s Missing” Page. We then merged the two pages and codes together for our final product.

Challenges we ran into

This was our first time coding in Javascript and React Native so we struggled with syntax and understanding the language’s logic. We struggled with exporting the image to the Google API and correlating the data from the Google API to the food groups. Finally, merging our codes was a little difficult as it was the last stretch.

Accomplishments that we're proud of

Our ability to split the work and come together at times to help each other and then finally combine our work together. We were also impressed at our ability to brainstorm and execute this app with a large time constriction. Navigating new techniques is difficult and intimidating but we were able to come together and create RealMeals.

What we learned

For some of us, this was our first time using JavaScript and React Native. We learned how to use these two tools and how to code in an app setting. We also learned about using APIs and merging pieces of codes together.

What's next for RealMeals

The next step would be to add suggestions for each category. At this moment, our app only provides the user with what the user is missing in their meal, the next step would be to ask the user about their dietary restrictions and then provide them with suggestions and examples of things to add to their meals to get to a healthier lifestyle. Another addition to our application might be a calorie counter and asking the user if they are following a certain dietary plan. This allows the user to customize their application and get the preferences they want.