-
Sample dashboard
Inspiration
Our inspiration for this hack was HabitRPG (https://habitica.com), which gamified productivity. It allowed users to create tasks, and earn gold + exp for finishing tasks and keeping good habits, while penalizing them for bad habits and incomplete tasks. However, everything had to be manually managed by the user (they had to add their own tasks and check them off), making it somewhat inconvenient for the user. It was also very easy to cheat; users can just make random tasks and mark them off as complete, gaining gold and exp without doing anything.
We also wanted to find a way to motivate people to exercise, and one of our team members had a FitBit, so we decide to gamify and encourage fitness by using the FitBit API and have the user exercise to earn gold.
What it does
Our web app allows the user to have fun and motivate people to exercise. We use the FitBit API to gather data from the user's FitBit, and award coins to them based on the number of steps you take in a day. Since it's based on data pulled from the cloud, it's a lot harder to cheat than HabitRPG's application. Using these coins, the user can then buy weapons and armor, and fight increasingly difficult monsters. Defeating monsters will grant the user EXP they can use to level up and get even more powerful. We want the game to be addicting so that people will be motivated to exercise more to get their character stronger.
How we built it
We built this web app with FitBit's API, Node, React, and Bootstrap. We integrated our game seamlessly with FitBit by polling their API the activity information of our users. After getting each user's exercising progress, the game smoothly updates the user profile's coins to enhance the in-game experience. We control the communication between the client's browser display and our server using jQuery HTTP Ajax requests and responses, which dynamically updates the client display with the most up-to-date information of their profile and progress in the game.
Challenges we ran into
On the backend, we figured out how to authenticate users and fetch data from the Fitbit API. On the front end, we learned how to set up Babel and Webpack to write React.js in es6 on the server side. After writing the views in React, We had some troubling integrate the game which is developed with jQuery into the React data flow. At last we managed to find a workaround. We also learned about resolving the CSS intricacies with new techniques from CSS3.
What we learned
From a technology perspective, we learned how to use front end technology React.js, and how to integrate it with jQuery from the back end. We also learned how to integrate FitBit's API with our project to get data from the cloud. From a team experience perspective, we learned how people within team can work separately on front end and back end, and integrate them smartly.
What's next for T253 FitRPG: Gamify your fitness experience!
We will try to make the gameplay even more fun, by adding spells, pets, and other things.
Log in or sign up for Devpost to join the conversation.