BiteByByte

App home page includes action buttons and summary of user's data.
Logging a meal includes several pages for collecting user input. The first page asks for selection of meal type.
The next page allows users to freely type their meal contents.
Another page allows selection of moods incited by the meal.

Inspiration

With social media being such a major factor in influencing young peoples' lives today, the prevalence of eating disorders have been on the rise. This inspired us to build a novel app that focuses on providing qualitative, constructive, yet encouraging feedback about user's food choices and eating habits based on information from their meal logs.

What it does

Our app allows users to log information about their meals (what type of meal they've eaten, what they ate for that meal, how the meal made them feel, and space for further elaboration if they wish) to recieve a response from an AI chatbot that suggests healthier alternatives macronutrient-wise and feedback about what they are

How we built it

Our app is powered with a Typescript frontend using React, Next.js, and Tailwind. The backend was built with Javascript with Node.js/Express for the server, MongoDB as the database to store the AI responses for each meal log.

Challenges we ran into

When we first tried combining the frontend with the backend, we kept running into an error related to calling the formResponse function in the backend directly from the frontend in the handler function triggered when the user clicks on the "log meal" button on the last step. In order to solve this problem, we had to make an HTTP request via a fetch call from the handler function to the server instead so the server itself would then call formResponse with the input data from the user.

Accomplishments that we're proud of

We're proud that we were able to communicate our ideas and brainstorm thoroughly together before the implementation stage. We effectively delegated the different tasks to do, parallelizing our workflow throughout the development process. When unexpected problems did arise, we worked as a team to pinpoint the source of the issue step-by-step in a calm and systematic manner despite being under time pressure.

What we learned

We were actually new to many of the languages and frameworks/libraries used in our tech stack. It was our first time using Cohere AI to generate the response from the user's meal log, and mongoDB to store a history of these reponses. We also learned how to work with React, Typescript and Next.js for the first time, and deepened our understanding of the Client-Server interaction.

What's next for BiteByByte

Some ideas about how we could take our project an extra step further include:

Allowing the user to enter the date and time of their food diary entries so the meal log responses can be organized by date.
The user can choose whether they would like to simply to "submit" or "submit and recieve feedback" for their meal logs
Making suggestions about what kinds of foods to incorporate based factors such as regional availability, what's in season, and financial considerations (e.g., limited grocery budget)