-
-
Main page
-
Item capture page
-
Calories tracking dashboard
What inspired us
Nutrition apps such as MyFitnessPal or other online tools can often make calorie tracking confusing as the same food item usually have different macros and serving sizes. We wanted to have a way for users to track calorie quickly and accurately, without needing to enter values by values into an interface to get their result. As such, We implemented a way to scan nutrition labels with the camera, and extract the nutrition values from the captured product and update that info to the user's preset caloric and macro goals. We implemented a way to scan nutrition labels and extract the nutrition values from the captured product and update that info to the user's preset caloric and macro goals. We decided to go with this idea because we wanted to try our hands at utilizing an API that provided a pre-trained Machine Learning model.
What it does
The app helps users to track their calories and macro-nutrients intake. By scanning the nutrient facts label on a food product, our app will extract the information presented and calculate how much calories and macro-nutrients were consumed and how much are left to meet the user's target.
Users will be prompted to provide login or sign up information before they are able to use the app's functionalities. If it is their first time, the page will have the user fill out a physical index form to calculate their Body Mass Index (BMI). Once in the app's main page, users will have the option to either view their dashboard, which displays information on their current caloric and macro-nutrient intakes, or choose to capture a food product to get the nutrition information, which will then be updated to the dashboard.
Project scope
For our frontend, we used the React framework to provide users with an interactive and fluid experience. Our backend was written in Python using the Django framework and we incorporated Firebase for Backend-as-a-Service to provide our app with user authentication. For our database, we use MongoDB to store the user's information as well as the products they have scanned through our app for quicker data retrieval. We also included Google's Vision API to help extract and decode the captured image into usable data to send to our backend database.
Challenges we ran into
One of the challenges we ran into early on into the project was getting MongoDB to work with the Django framework, as well as ensuring all project members have access to the database. Because we are still inexperienced working with Django, we also had difficulties using Google's Vision API and decoding the information that was given from the image. Additionally, we still have not nailed down the process of communicating between the frontend and backend as the errors that were given did not point to the exact root and we had to spent a majority of our time debugging the code.
What we managed to achieve
We definitely underestimate the scope of our project, especially given that only a few of us had expertise in the frameworks and software we used during development. In the end we managed to set up the MongoDB cloud database to work with our Django backend as well as the Firebase. We also managed to integrate Google's Vision API to scan and extract the values from a product's nutrition label, which we then used to update our database. In addition, to make up for our rather lackluster backend, our frontend team made sure that the user's experience be as smooth and interactive as possible.
What we learned
We definitely feel a bit more comfortable using Django as a backend framework for our future project. There was a big learning curve trying to integrate MongoDB as our database, especially the process of setting up a schema for the collections and creating working API endpoints for our frontend and backend, but eventually we managed to figure it out. We also gained new knowledge of how to use Google's Vision API as we were able to decode the text returned by the API from a captured image to usable data that we then sent to our API endpoints. Finally, we utilized a few advanced React techniques and modules, such as Bootstrap, to create a nice-looking and responsive web application, which helped us gain more experience in frontend development.
Log in or sign up for Devpost to join the conversation.