vFit | Devpost

Initial progress when it came to setting up Tensorflow!
Further progress in detecting user.
Working squat detector/counter!
Our landing page that leads you to the login page!
Our login page that utilizes Firebase to authorize if an account is made or is valid.!

vFit | HackDavis 2021

Inspiration

Our inspiration for vFit came when COVID-19 changed our entire way of living. The sense of normality such as going to the gym, getting groceries, and socializing with loved ones has drastically changed us which made forced us to adapt our surroundings. We wanted to create a hack that helps not only mental health, but physical health as well!

What it does

.we created a platform which users can Pair up with someone of similar body type (age, weight, height) -List fitness interests -Keep track of their goals with their paired user -Challenge the other user to motivate each other virtually

How we built it

We used Firebase as our user authentication, React, CSS with Material UI, and Javascript for our main web development stack and finally, TensorFlow.js posenet API to recognize a human body to keep track of the workout.

Challenges we ran into

Jet - At first we wanted to detect jumping jacks, but because of the rapid movement involved with jumping jacks, it was harder to detect. We ultimately decided to detect squats instead. Because we were developing in React, a lot of tools commonly available (such as Teachable Machine) weren’t so helpful

Sal - To start off it was my first time working with React, Firebase and npm, so I had a little trouble understanding how everything flows with each other. Apart from that there were some instances where the pages wouldn’t link together due to simple link issues that were fixed easily.

Ryan - I had trouble setting up a firebase within our react workspace but Sal was able to help out in that part. The other trouble I encountered was setting up the domain. We were given a notice that it would take 24 hours to process our request for our domain so unfortunately we weren’t able to complete the app in time.

What we learned

Jet: I learned the most about using Tensorflow with React, and learning about all of the different models readily available for developers. I also learned a lot about interconnecting React apps with Netlify and Firebase.

Ryan: I learned a lot of web development from both front-end and back-end. I also learned how to set up a domain name (vfit.tech) and create a website that doesn’t run locally. Understanding how to utilize react in my local system.

Sal: I learned a lot about how to set up pages, along with the directories so paths work with one another. Furthermore I learned more about css and how we can utilize it with different classes to further improve our front end section. Above all I learned how to utilize firebase to create a login system that is linked to the home page.