Forever Fit

A mobile web app that encourages exercise among seniors by gamifying fitness, and facilitating easy access to information about nutrition.

Comment

Inspiration

We discussed many different ideas, before settling on the idea of making a game, as this is unlikely to be done by many others. One of our teammates works at a non-profit that manages student volunteers at many senior centers in Washington. He noticed that many games such as Candy Crush were popular and highly addictive among the seniors. A large part of this is due to rewards and a leaderboard system that encourages further gameplay. So why not use this addictive idea for their benefit? Thus, the interactive Forever Fit was born-- inspired by Candy Crush and Geocaching.

What it does

The idea of the app is that seniors walk around in a previously mapped area where different "challenges" are scattered at different locations. They must scavenger hunt these challenges using a map with the locations marked. The challenges are ranked from easy to hard, including squats, leg raises, and incline push ups.

The app has 4 notable pages:

  • Leaderboard: Users earn Fit Points for completing challenges, which ranks them on the leaderboard
  • Home page: Displays the different challenges (along with difficulty) the senior has scheduled for the day. They can choose to do whichever challenge they want to.
  • Map: A map displaying the location of all the different challenges for the day along with the users' current position. Once the user is close to the location of a challenge, a pop-up appears with a thorough video-description of the exercise.
  • Nutrition: This page has a customized AI chatbot to answer questions regarding proper nutrition, as this is a large part of staying fit as a senior.

How we built it

Our website uses NextJS, a JavaScript framework that allowed us to work much more productively because of its server-side and routing features. We built our live tracking map using the Google Maps API provided by Google, and used JavaScript's built-in geolocation framework to calculate coordinates of users. In order to place the exercise locations on the map, we walked to each location and recorded the coordinates in latitude and longitude and turned them into markers on our map. We handled our backend with a postgres database as well as SQL queries to effectively manage data. Our nutrition chatbot's responses are powered by Google's Gemini LLM model. The website's login system is handled by the AuthJS library, and uses Google OAuth to register and log in users with a single click. Finally, our website was deployed on Vercel.

Challenges we ran into

  • Live-tracking was initially an uncertanity, but we managed to make it work properly
  • Responsive design was initally a challenge, but we overcame it
  • Integrating google maps was suprisngly difficult, and was a long process

Accomplishments that we're proud of

  1. We accomplished all of our goals on schedule
  2. Very intuitive UI
  3. Accurate Geo-location
  4. Excellent teamwork

What we learned

Lucas: I learned how to use many useful APIs while working on this hackathon, which could be very useful when developing in the future. The Google Maps API we used was initially tough to understand but became very simple and easy to use after some research and testing. I also learned how to generate AI responses using Google Gemini's API, and how to handle authentication with Google 0Auth.

Aakash: Prior to this hackathon/project, I had no experience in html, javascript or typescript. However, now I am comfortable with these languages. I have also gained a better understanding of how website development works in general in addition to an understanding of useful API's such as the google maps API, Google sign in, Google Gemini and others. Additionally, I know have experience with the react framework.

Ronav: I had a little experience with JavaScript and HTML, but I had never made a website using it. Surprisingly, I was able to apply some core ideas from video game design into app design, such as making sure everything is intuitive enough that the user can figure it out without a tutorial. This was especially difficult considering our target audience of senior citizens. I worked a lot with Aditya to make sure that the user interface was intuitive enough to satisfy the no-tutorial condition. By helping him, I became more familiar with the languages we were using, and now feel confident enough to make a professional website by myself, albeit using more time.

Aditya: I learned a lot about responsive web design over the course of this project. Responsive web design ensures that an app works on mobile devices with screens of any size. This is extremely important because it ensures that users have a pleasant experience. I am now extremely comfortable implementing responsive design.

What's next for Forever Fit

Implementing it so that seniors in senior centers can actually use our website. We can do this through one of our teammates, Aditya Kumar, who is part of an organization that hosts technology information sessions at several senior centers. We could promote our product at some of these sessions. Another idea we would implement is a feature where users must upload a video of themselves doing the exercise and others can either approve or disapprove of it, ensuring the exercises are done properly. A video with too many disapprovals would cause any fitness points gained from that exercise to be removed. Finally, we currently have to go out and manually find good locations to do exercise. We then have to manually input the exercise, a video and the latitude and longitude. We hope to use AI to automate this process, therefore adding many new locations and challenges with ease.

Share this project:

Updates