๐ก Inspiration
As teenagers, many of us are self-conscious of our health and fitness. Many people use calorie counters to track their daily food and nutrition intake - however, we thought that having to enter and choose each separate food was tedious, and it was hard to find time to consistently update food entries. Hence, we wanted to create something that was easy and quick to use, while providing the same health-benefitting results and analytics.
๐ What it does
CalMeHealthy allows users to quickly get the nutrition data of various foods from only an image of the food in question. Users can either upload an image or take a photo with their webcam of their food, and our app will provide data on calorie count, carbs/protein/fats percentage, and more. Our app also provides data about past food entries and nutrient intake trends over the past week.
๐จ How we built it
We used a Node express backend with MongoDB as our database. On the frontend, we used React.js with Material UI for styling. Our food recognition comes from machine learning algorithms in the LogMeal API. We planned to implement further analytics but ran out of time :(
๐ฃ Challenges we ran into
We were definitely running low on time at the very end and had to simplify our planned page count and layout by quite a bit. The main reason we were so short on time was that we were trying out new APIs and frameworks that we were unaccustomed to. For example, we spent a lot of time working out the LogMeal API (food recognition is not very popular right now, so there was very little documentation and we used trial and error). None of us had also used Material UI before, so getting its components to work took us a while too.
We had quite a few ideas that we wanted to add, but which we decided to hastily cut out near the end. These included but were not included to deeper analytics and recommendations of foods/dishes to users (based on their calorie trends and what is optimal for them, as can be calculated from the Harris-Benedict equation). In fact, our user feedback for snapping is not even very complete - it is minimalist right now and if we had extra time, we'd develop it further.
๐ Accomplishments that we're proud of
We built an app that looks quite nice! We tried out some new styling techniques (ex. using gradients) and they turned out nice. We are also proud of getting the basic functionality down with picture processing, as we've never done anything similar before & and it was exciting to learn and overcome.
๐ What we learned
We learned that it is important to prioritize. If we had spent more time on business logic instead of styling, we might have had a more complete product.
๐ What's next for CalMeHealthy
In the future, we'd like to add even more analytics data for users (ex. specifying trans fats, nutrition subcategories) on a seperate page. We also want users to be able to track their history not only in the past 7 days, but for however long they want (we couldn't set up pagination as we were low on time). We're also considering developing a mobile app version for travel use and to make it easier for taking pictures of food.
Built With
- express.js
- figma
- logmeal
- material-ui
- mongodb
- node.js
- react
- react-webcam
- recharts
Log in or sign up for Devpost to join the conversation.