Inspiration

We wanted to create a user-friendly web application that encourages people to take a vital role in their diet. We wanted to rise up to the third challenge that was cantered towards patient engagement.

What it does

Vital Plate is an application that has the user set up a profile. This allows for more personalized responses and data collection. There are three main functionalities within Vital Plate. The first is the chatbot where users can type in their symptoms and receive what foods can best relieve their symptoms. It also provides the user what foods to avoid to ensure their condition does not worsen. Also it gives some recipes that the user can follow. The second function is the calorie finder. The user proved an image in a png, jpg, or jpeg format. The application then utilizes Clarifai's food classification model to identify what food is in the image. It uses that information to display its nutrition that it find within the USDA nutrition database. The last function is the analytics. The application promotes daily usage by allowing the user to input what meals they had for breakfast, lunch, and dinner. They also input how they were feeling both mentally and physically. It gathers the symptoms that were inputted and organizes everything in multiple charts to cleanly display your progress throughout two weeks.

How we built it

We used Next.js, TypeScript/ JavaScript, Tailwind CSS for styling (Front-End) and Firebase for Authentication and Database (Back-end). API's we used were from Clarifai and USDA.

Challenges we ran into

We ran into challenges for the image classification and the chatbot dataset. At first, the plan was to create a classification model, but we did not have the time nor resources needed to build either effectively. Luckily, we were able to find Clarifai and use their model to help with the calorie finder page. As for the chatbot dataset, we wanted it to include multiple symptoms, food types, and common house recipes. We could not find one that fit the requirements online, so we decided to create a small sample of our ideal dataset for this version.

Accomplishments that we're proud of

We were able to design and deploy a full-stack application that has cool features like a chatbot and calorie finder that utilizes image recognition. We are proud to implement multiple features for the user to have the best experience using Vital Plate.

What we learned

We learned how to develop a full-stack application, frontend using next.js and TypeScript, and backend for user verification and authentication. Learning how to connect the frontend and backend of an application is a new and enlightening experience that we will definitely use in future projects.

What's next for Vital Plate

We want to make Vital Plate more personalized for its users. We want the profile to be able to hold the user's medical information such as whether they are pregnant or are an athlete. This way the chatbot can take these into account and recommend based on these details as well instead of just providing food based on the types in information. We also want to expand our database and improve the image food classification even more so that it can take in more than one dish at a time.

Share this project:

Updates