Description as a Tweet:

Have you ever been confused and lost with your body and health? Have you ever wondered why you’re not seeing results from working out? Well, it’s time to learn what specific diets and workouts you need to reach your goals. It is YOUR Body and YOUR Health!

Inspiration:

We all love working out and would love to learn more about fitness. However, we sometimes feel lost while working out and trying to reach our goals at the gym. We found it difficult at the gym at times to know what we should do to workout specific muscle groups and parts of our bodies. Also, an important part of working out is dieting, which is something that we all struggle with. Not knowing what meals to eat to help maximize our gains is also a factor we face in not reaching our goals! We decided to implement our hack with these issues in mind!

What it does:

My Body, My Health allows users to identify workouts and meals that are customized to their goals and specific needs. The user is prompted to enter specific information about themselves and their specific targeted muscle group on the survey page. After the information is entered, through the MongoDB, the website will produce personalized workouts and meal recommendations based on the user’s survey answers. This program is designed to give users the motivation to continue on their fitness journey with a motivational quote on each page all while trying to achieve both gains and healthy meal planning goals. After all, it is your body and your health so get fit and stay healthy starting today!

How we built it:

First, we designed the website using Adobe Xd. For the symbols used, we used SF Symbols and Google Fonts. The website was built using HTML, CSS, React, and Javascript. The IDE that we used was VsCode. The website has 4 main pages, a welcome page, a page where the user enters the information prompted, the workout page where the workout results will be displayed for the user based on their specific goals, and a meals page in response to their answers from the survey. We used our own database for the survey answers to prompt for the corresponding workout and meal results. For deploying the website, we used github and vercel.

Technologies we used:

• HTML/CSS
• Javascript
• React

Challenges we ran into:

Our challenges mainly came from the backend part of our hack, especially in implementing the database of our hack. In our original plan, we tried to create a cloud database using Google Cloud. However, using Google Cloud proved to provide many challenges for us, especially in deploying the database in the cloud. We couldn’t figure out how to deploy our database in Google Cloud. To overcome this challenge we decided to use a different software to implement our database, namely MongoDB Atlas. However, we ran into another challenge with MongoDB and ended up storing our data in our own database.

Accomplishments we're proud of:

Overall, we all feel really proud of even finishing our hack! There were many times in implementing this hack that we felt like finishing the hack was impossible. However, we were able to get through it and even finish it which made the outcome of this project so much more rewarding! We are also very proud of our user interface experience, as we feel it is pretty easy to use and aesthetically pleasing. Although with the little time that we had, we are proud to have learned so much from this project as many of the languages used, many of us have never worked with before.

What we've learned:

Google cloud is pretty difficult to use, but is something that we all want to figure out at some point! We also learned the importance of being a full stack developer. Also, prior to this hack, many of us did not know much about many of the technologies that we used to implement our project, such as HTML/CSS, and React. However, doing this hack has taught us a lot about the use cases of these technologies and how to implement many of them in our project!

What's next:

One of the main things that we want to add to our hack is a way for users to track their progress. This progress tracking includes many aspects such as weight loss/gains, new workout personal records, new eating habits (diets), workout days, and many more. For example, one way of tracking workout days is to implement a calendar to track days that the user has been to the gym and days where the user did not. We want to make our project even more personal for the user to create a more immersive and informative experience. We also wanted to add even more information and even more specific categories with each aspect of our website. We also want to polish our user interface even more to create a friendly and easy to use experience for the user.

Built with:

Visual Studios Code, Adobe XD

Prizes we're going for:

• Best Software Hack
• Best Web Hack
• Best Beginner Software Hack
• Best Healthcare Hack
• Best Domain Name from Domain.com

Steven Pham
Jasmine Zhen
Stanley Ngo
Kevin Chiu

Table 23