Obesity afflicts over 13 million American children, according to the U.S. Centers for Disease Control and Prevention. The risk of childhood obesity also increases with age, with over 20% of all American 12 to 19 year olds being classified as obese. Furthermore, study after study has found that childhood obesity dramatically increases the risks of dangerous health consequences in adulthood.

COVID-19, and the lockdowns imposed to combat it, have made this complex and far reaching problem even worse!

Schools all around the U.S. have closed, which means no recess, no sports, and no gym class. Many communities have implemented strict social distancing guidelines which have closed outdoor spaces like playgrounds and parks. Unfortunately, these measures have accidentally encouraged kids to spend even more time just sitting around indoors. In fact, University of Missouri sociology professor Joseph Workman estimates that just six months of school closure could result in a 4.86% increase in childhood obesity.

I built the exARcise web app to help solve this problem, by giving kids a creative way to have fun exercising in their own homes.

What it does

ExARcise uses augmented reality to gamify exercise for kids, in order to encourage them to exercise. The app is a platform that facilitates the creation of interesting and fun real-world activities by providing easily embeddable augmented reality experiences.

The core of the app is the AR enabled QR codes, which I power through echoAR. The QR code has the information the app needs to pull up the AR player, which then displays an exercise tutorial/example video onto the marker. This combination tech stack allows users to use the QR codes to create their own activities, like scavenger hunts, dice, or bean bag toss, and display the information into the real world.

I have also used gamification to encourage exercise by awarding badges for doing specific exercises, and having the user set daily exercise goals.

How I built it

Since exARcise is meant to be accessed via a mobile device, responsiveness is a key design feature. Therefore, I chose to build a React app, styled in Material UI so the website is accessible and easy to use on all sized devices. It’s also hosted on Google Firebase Hosting, to guarantee high availability and to automatically scale server resources up and down based on demand.

For the AR portion of the app, I used echoAR, because it allows me to easily manage and track my AR experiences, and change them in the future. To use echoAR’s built-in rendering system, our app has a two-part embedded system for reading and viewing the experiences. The first step is scanning the QR code using the reader built into the app. This triggers a popup with the appropriate viewer for the experience the user is looking to have. From there, echoAR allows me to embed and play the video.

Challenges I ran into

One major challenge with the app that I came across was in encapsulating echoAR’s full rendering process into the app. Traditionally, the user would scan an echoAR QR code outside of any app, and the QR code would take them to the web viewer for the media. While that is great for a poster or flyer that is isolated from any specific technology, I specifically wanted people to view the exercises in the app so I could reward them for their exercise. The result was creating a slightly roundabout process on our end, but the end result from the user is intuitive and simple, and it prevents them from ever needing to leave the app.

Accomplishments that I'm proud of

The main thing I am proud of is getting the AR to work so well! I'm really proud of the simple process I created for the user.

What's next for exARcise

In the future, I want to expand exARcise in the following ways:

  • Expand out the library of exercise videos, exercise badges, etc.
  • Enable the user to create personalized workout routines and sets
  • Add mindfulness and wellbeing activities, like yoga poses

Built With

Share this project: