Login Page
Home Tab
Water Modal
Sleep Modal
Exercise Modal
Social Tab
Profile Tab
Create An Account Page

What The Health

Inspiration

Ever since the COVID-19 pandemic began, we noticed that many people had to drastically change their daily routine. This often led to healthy lifestyle activities being forgotten. Our objective for this year's Hackathon was to create an app that would encourage users to achieve their daily goals of adequate water, sleep, and exercise ( The 3 essential components of a healthy lifestyle we thought were applicable to all users ). By introducing a support network into our app, friends/family can support each other and embark on the journey towards a healthy lifestyle together!

What it does

What The Health will require the user to first create an account using an email and password. Once logged in, users can set their daily goals for water, sleep, and exercise in the home tab. In the profile tab, users can view their user information and set a profile picture. In the social tab, users are also given the ability to track their progress towards these daily goals. Users also have the ability to add friends and family by email, which allows them to monitor their progress as well as send them encouraging messages to keep up their progress.

How we built it

Our mobile application was built using React-Native, Expo, Javascript, and Firebase. The front end of our application was created using React-Native, with Javascript handling the logic. In addition, we created a lot of custom images using ProCreate to help with the design of our front end. Firebase was used for user authentication and storing user data which was crucial in allowing us to introduce the network aspect of our application.

Challenges we ran into

Challenges that our group ran into included dependency issues with setting up Twilio API, this caused us to rely on the Expo / React-Native SDK to handle our messaging aspect of the app. During development, we also had issues with some general issues to set up Firestore correctly when it came to storing and handling data from our users. To overcome this, we considered all our necessary Firestore queries and designed a data structure that optimizes efficiency.

Accomplishments that we're proud of

We were pleased that we were able to complete what we had planned for the app in terms of functionality by the due date. We are also really proud of the drawings that we incorporated into the UI, as we feel that they give our app a unique and creative appearance. We were really happy that one of our members was able to further his pre-existing knowledge of Firebase and help us incorporate it into our application which was really useful for the network aspect.

What we learned

We learned many aspects of being a Fullstack Developer. One of our members was completely new to mobile app development so for him he was able to learn from the other team members and get familiar with React-Native. In addition one of our members was able to really strengthen his Firebase knowledge through this experience. We were also able to learn about React-Native hooks, useState, useEffect, and other newer React-Native features that were unfamiliar to us. In terms of front-end development, we learned how to use different styling tricks to improve the aesthetic of our app.

What's next for What The Health

The support network was a large part of our application we wanted to emphasize, however, we were limited to the standard Expo & React-Native SDK due to time constraints. In the future, we would like to integrate the Twilio API to further flesh out the capabilities of our support network. We also plan to implement google cloud functions that will reset daily user data and monitor long term progress.