Juiced.io

• 

  This is the home page of Juiced.io.

• 

  This is the CreateRoom page where users can create their own exercise by drawing the line of motion the object is to be tracked.

• 

  This is the WaitRoom page where users get added to after creating their own link, or joining their friend's link.

• 

  This is where the users get directed after clicking the "Start Game" button where the user's camera is enabled; thus tracking the object.

• 

  This is the WinnersPage which shows the points of the users in descending order.

Inspiration

Due to COVID-19, there has been a rise in concern in mental health. Young people have been using physical fitness to feel good and regulate their mental and emotional health (VICE). 87% of Gen Z exercise three or more times per week, making Gen Z the most active generation (Les Mills). Furthermore, Gen Z is more conscious of how their health affects themselves and others. 81% of Gen Z placed more value on their friends’ and family’s health than seeing them in-person (VICE). This inspired the question of how can we enhance Gen Z’s workout routine to help them regulate their mental health while also maintaining social connections in the midst of a pandemic?

What it does

Juiced.io gamifies the experience of virtually working out with your friends by turning exercise into a fun competition. Users will create and join rooms and battle each other in completing self-created exercises. Exercises are created by drawing a range of motion drawing. Then, just grab any white object, tape it to your respective body part, or hold it (depending on the exercise) for our application to detect your exercise movements and calculate proximity to the drawn range of motion through our self-developed algorithm.

How we built it

Our application is built on node.js and sockets to host and create rooms. The frontend is built with React, OpenCV, and Figma.

Challenges we ran into

We ran into multiple code complications while creating Juiced.io, mostly within the languages like React.js, OpenCV, and Node.js. As for React.js, only two out of the four members have written concise React.js code prior to StormHacks 2022 which lead to some struggles like converting known JavaScript to React.js (ie. class to className) and learning the specific conventions of React.js. One of the most difficult problems, however, was building the tracking software and matching algorithm using OpenCV and Node.js. We had to do a lot of research and tuning to get the tracking to work well. We also ran into a lot of challenges with the algorithm lagging out the client. Thus, we spent many hours optimizing.

Accomplishments that we're proud of

One of the greatest accomplishments we have is being able to work together as an open-minded group of four who have varying knowledge of coding and front-end languages, and UI/UX knowledge. This was our group's first time working with socket.io. We were super proud that we were actually able to get the game working and running on a site and play together!

What we learned

We learned a ton regarding sockets and computer vision. Fine-tuning the tracking required tons of research and experimenting. For 3 out of 4 of us, it was our first time working with sockets. We all learned a great deal and had lots of fun building the project.

What's next for Juiced.io

We believe Juiced.io has significant potential, especially with more users working out from home than ever before due to the global Covid-19 restrictions which aided in converting gym users to do at-home workouts. Our first step would be removing the required tracking object signified as a green box around the tracked object (a white piece of paper in our case). Being able to detect a user's hand, head, etc. instead would make playing Juiced.io not only more convenient but also more effective as there can be multiple significantly white objects interfering with the users' specific tracked object.

Built With

• node.js
• opencv
• react
• socket.io