Eat Green

Page 1: Title page
Page 2: Meat selection
Page 3 (1/2): Meat alternative selection
Page 3 (2/2): Meat alternative selection + progress bar
Page 4: Final page

What it does

The web app "Eat Green" first greets the user with simple instructions. Then, it allows the user to pick a meat (ex. 100g of pork), a meat-based meal (ex. a burrito) or a combination of both that they want to consume. The next page allows the user to do the same, but with various meat alternatives in the four categories of fish, nuts, vegetables and soy/dairy products. This page also has a progress bar on the bottom that keeps track of the grams of protein that they would intake from their choice of meat alternatives, comparing it to the grams of protein they would get from their choice of meat. For example, if the user was consuming one hamburger--which has 27 grams of protein--their progress bar will slowly reach the 100% mark as they get closer to consuming the same amount of protein through their meat alternatives. Finally, the last page prints the user's choice in meat, meat alternatives, and the protein they would consume from this meal once again to highlight their new meal plan.

How we built it

We started building our app by creating a database on Firebase of 'ingredient: grams of protein' pairs. Then we moved on to building the actual React app by iterating through these items in the database and storing an item on the browser's local storage if the user clicked on it 1 or more times. Simultaneously, we developed the front end of our app through various cards with the picture, name, grams of protein and the count (of how many times the user clicked it) associated with each ingredient. From the meat selection page, we calculated the total amount of protein using the simple equation of italics_count * (grams of protein per serving)_italics that the user would consume, and also stored this in the local storage so we could pull it from any of the subsequent pages if needed.

Challenges we ran into

Among the numerous challenges we faced throughout the project, one of the biggest struggle was being able to share data between the pages. We wanted to store information like the total grams of protein inside of some "global variable" for us to be able to pull it from the various points in the app, but realized that it was impossible for us to export it if we were already exporting another function from a file. Then with the help of a mentor and a great amount of Google searches, we found the local storage, in which we could store our information directly within the browser of our app. This also meant that we needed a way to clear the local storage after the user was finished with the app, which we implemented into the various buttons that loads the subsequent pages.

Accomplishments that we're proud of

A lot of our members ran into our own challenges throughout this project, such as using Github for the first time, learning more React about as we develop the app, having a bigger leadership role than expected, fighting sleep during the late hours and many more. However, a shared accomplishment among all of us was getting through the long amounts of time we spent online while only communicating with each other remotely. Every time we ran into a tricky situation, we thought of how much nicer it would have been if we were all physically together but still tried our best to effectively communicate and help each other through sharing screen, and encourage each other through our online calls which also allowed us to get closer with each other by the end of the project.

What we learned

From our project we learned a lot of practical information about developing a web app with React including its limitations in functionality and design, but also its strengths and cool quirks. Through this hands-on experience with the language, we have all developed a more thorough understanding of the process of web development as well as the various tools that come into play. We have also learned that even the simplest communication between the client and the server (such as pressing a button) can and most definitely will take a lot of work to implement correctly.

What's next for Eat Green

The most immediate improvement to our product will be allowing the user to input any meats/meat-alternative ingredient of their choice, rather than limiting them to only the ones included in our database. In this case, we would want to take the user's input and immediately run a search on a search engine for its protein contents. If this is not possible, we would look into options of expanding our database to provide the user with a much wider range of ingredients. Other improvements we might make is to suggest actual recipes using the ingredients of the user’s choice or to incorporate other nutrients such as calcium or iron to inform the users about deficiencies other than protein.