Inspiration
We eat 3 meals a day, but rarely do we ever consider the impact of our dietary habits on the planet. In the meanwhile, none of the mainstream diet tracking apps has incorporated this idea into their products. We feel that being green and climate-aware is a part of a lifestyle, therefore we want to promote such awareness by incorporating information related to carbon footprint and water usage into a diet tracking app, which people already use on a daily basis.
What it does
At the moment, we have only implemented a search bar, which searches food items from our database and displays the food’s related information. We were also aiming to incorporate the Google Cloud service, which would allow us to return search results based on user-taken photos of their meals.
How we built it
We used Node.js and express.js for backend, React Native with Typescript and Expo for frontend.
For our database, we used MongoDB to store our data and mongoose to define our schema. We adopted our carbon footprint database from the SU-EATABLE LIFE dataset and the nutrition database from the USDA National Nutrient dataset, cleaned our data by selecting the columns we are interested in, and uploaded into MongoDB’s cloud service.
Specifically, for our search bar, we used regex to find all foods that begin with the search string from the database and rendered them on a React Native Flatlist component. We chose Flatlist instead of ScrollView, because Flatlist enables scroll loading, which improves performance given that we have a large amount of data.
Challenges we ran into
The two main challenges we ran into were:
Styling in React Native is completely different from web development. Since this is our first time using React Native, we weren’t familiar with the array of developer tools. It took us a long time to get a grasp of styling and inspecting elements on the Mobile simulator. Integration with Google Cloud Vision API was challenging (and we still haven’t finished this integration) because some of the Firebase functions aren’t compatible with Typescript.
Accomplishments that we're proud of
This is our first time working with mobile development, so we are proud that we were able to put together a functional component that incorporates frontend, backend, and database.
What we learned
We never had any experience with Node.js, MongoDB, and mobile development before this hackathon, so we spent a lot of time learning these technologies. We also learnt how to integrate them together and familiarize ourselves with sending and receiving requests via ajax.
What's next
For the first step, we need to display a food’s nutritional facts along with their carbon footprint information. Then, we are aiming to add a login system and a component that allows users to log their meals. The app would also be able to calculate users’ daily nutritional intake and estimate their yearly carbon footprint.
Log in or sign up for Devpost to join the conversation.