ARFID Meal Tracker

• 

  Home page, noting that snacks are actually not a meal

• 

  Logging a meal

• 

  Adding a meal experience to a meal

• 

  The meal is logged!

• 

  History of logged meals

• 

  Weekly insights

• 

  Safe foods

Inspiration

Most meal trackers take into account calories, calorie and weight goals, and notoriously nutritional value. However, this information can become overwhelming for those who simply want to track that they have eaten for the day.

What it does

We built a minimalist meal tracker for ARFID (Avoidant Restrictive Food Intake Disorder) to track foods that are safe to eat, experiences with certain meals, and to most importantly count that you've eaten.

How we built it

We utilized ClaudeAI to help with styling.

Challenges we ran into

For our first time making a web application, we attempted a full stack meal tracker with React, Tailwind CSS, and Supabase.

Setting up the environment took longer than expected, not only from installing dependencies, but from version conflicts across two different laptops. We also accidentally ran npm install outside of our designated directory, leading to duplicate node_modules folders. We spent a decent amount of time fixing this, making sure it reflected on our GitHub repository, whenever we pulled.

As a two-person team, we both wanted to work equally across the stack while learning React and Tailwind. In the end, we divided the work by feature so we can both gain experience in front and back end, and helped debug any UI features.

Coming fresh out of CS122A (Introduction to Data Management), we only needed to find an online database that can handle REST APIs, which Supabase provided. This helped us focus on building features.

Overall, as a team, we delivered a working meal tracker, logging previous meals, safe foods, weekly insights, and custom capybara moods drawn by our team! 🐾

Accomplishments that we're proud of

• We designed and built a full-stack meal tracking app focused specifically on ARFID and sensory-sensitive eating within a short hackathon timeframe.
• We implemented core features such as safe food tagging, meal logging, recent meal quick-fill, and search to make tracking more accessible and low-effort.
• We built an insights system that surfaces gentle patterns in common meals and meal experience, helping users reflect without pressure. ## What we learned
• We learned how important it is to design technology with different lived experiences in mind, especially for users and populations who are often underserved.
• We gained a deeper understanding of how design choices, such as language and metrics, can either support or unintentionally harm users with conditions like ARFID.
• We strengthened our full-stack development skills using React and Supabase, including state management and database design. ## What's next for ARFID Meal Tracker We plan to continue working on this project after the hackathon. We would like to add more features, such as the ability to upload photos when logging, and turn this into a mobile application.

Built With

• javascript
• react
• supabase
• tailwind