Inspiration: Our health during a pandemic

COVID-19 made people more mindful of the importance of maintaining their health. Unfortunately, the pandemic has also led to more people working at their screens, without being as mindful of the amount of water and the types of foods they consume. This made us think: how can we encourage people to make healthier choices, yet also make it fun and competitive for them to do so? And thus, nutritioUS was born.

What it does

nutritioUS is a website where users track their food and water consumption while competing with their friends. Users set and track their water, vegetables, proteins, and calories consumed in a day and our website's algorithm calculates their Health Score. With this score, users could make groups to compete against their friends and they could also see how they rank out of their other nutritioUS friends that day.

How we built it

We began by listing out all the features we wanted to include on our website, as well as methods to implement such. Then, we used Figma to plan the layout and design of our website. We then went on to build our website, using languages like HTML, CSS, and Javascript for the frontend, and PHP to communicate with the server in the backend. We used JSON files to save data persistently as our database.

Challenges we ran into

A big challenge we ran into was implementing methods and functions to interact with the server, as none of us were experienced with backend programming. This included being able to perform CRUD operations on our JSON database, which we eventually solved by implementing PHP in our code. Another challenge for us was learning how to store session variables, like cookies, to keep a user logged in and to streamline their experience on our site. Finally, a challenge we faced was creating a good schedule to work together, since some of our teammates come from overseas, and are asleep when others are awake. However, we were able to overcome these challenges and finish our project.

Accomplishments that we're proud of

We are very proud of our final product, as it is something that we are quite happy with, and does well to embody our initial founding idea. As for specific features, we are most proud of our tracking feature, as it is something that came together from different skills and functions to which we were new to. Finally, we are also proud of each other, and how we came together despite our time zone differences and the extremely different skills that we each brought to the table, to work on and finish nutritioUS.

What we learned

For many of us, it is our first time attending a hackathon or even working on a large-scale project such as this, and so we learned a lot about the workflow and how to collaborate with others through tools like Github. We also learned many technical skills, with many of us learning design aspects to frontend development, like CSS or HTML, or learning frontend development completely, for the first time. We also all learned a lot about how server-side programming works and why it is necessary, as well as the basics of the tools, such as PHP, required to partake in such.

What's next for nutritioUS

In the future, we look to expand our current feature list, such as including autocomplete values for more foods or include more nutritional values, so as to streamline the user experience and usability. We also look to improve the graphics, so as to provide for a more engaging user experience. We also look to implement AI or machine learning algorithms into our website, such as giving the ability for users to upload images of their meals, and have the computer be able to automatically detect and log in foods.

Share this project:

Updates