FitnessDisplay

Inspiration

We saw that Madhack's available hardware included a neat little FitBit Ion, and figured it was time to knock on the Fitbit API's door!

What it does

It allows a user to log into their Fitbit account, where they have registered a Fitbit device, and can view data that may help them get in shape! There are many ways this product can evolve, encouraging fitness and a healthy lifestyle!

How we built it

Using the Fitbit API, HTML, CSS, and vanilla js and subsequent pure libraries, like fetch.js!

Challenges we ran into

Fitbit's OAuth2.0 token is tough to use and integrating a specific token flow into a web app's existing routing proved difficult. But thanks to the help of Brian, an amazing mentor, and lots of food, we managed!

Also, given time constraint of the competition, we decided to use a Bootstrap template for our little site/app via another GitHub project; they are credited in our project's README.

Accomplishments that we're proud of

Running hard to get data onto the Fitbit Ion! And the powering through all that code, and documentation reading . . .

What we learned

How to build a web app, sparing server setup on our end; API helps establish a data source that is easily made available to our web app! Gave us time to spend on the front end, tailoring it in a way that it would be convenient to our users!

What's next for FitnessDisplay

Implementing a tracker to show Heart rate vs. Fat % on a chart, and also perhaps integrating a route suggestion algorithm/AI, that helps you plan a run!

NOTE:

Below are 2 links; the first links to the project via Fitbit Login and full demonstrates the use of OAuth 2.0 to pull data from an account. If one does not have a FitBit Account, they can use the second link to view the dashboard, only there may not be any data fetched having not gone through FitBit authentication

Built With

Submitted to

MadHacks 2018
- Winner Sponsor(Trek) Choice

Created by

I worked on OAuth2.0 token integration with our front end, for user authentication against FitBit's accounts. The front end is pure html, css, and js, courtesy of Moe. On the backend I wrote the API calls for data using the OAuth token we generated. (PostMan was helpful to check the json data we were getting back from these calls, and assure quality). I utilized the parsed data Moe provided to popukate front end.

Anthony Makis
Used javascript to parse the url to retrieve the access token and user id so that we can access the Fitbit api. Also helped with front end development.

MohamedSaeed99
I helped with data parsing and I also worked on the front end development. It was my first time in web development, so this was very interesting.

Sharaf Atwa

Updates

Anthony Makis started this project — Nov 11, 2018 12:56 PM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.