Dora Goczi

Software Engineer

Work Collection

MyVitals

MyVitals

MyVitals

Frontend

Backend

Overview

A full-stack application integrating with the Fitbit API to enhance data visualization and analytics, providing users with detailed insights and pattern recognition over extended periods.

Approach

MERN stack is used to integrate with the Fitbit API, employing MongoDB, Express, Node.js, and React for backend processing and responsive frontend visualization

Project Rundown

Project Overview

The project is a full-stack application that integrates with the Fitbit API to enhance data visualization and analytics of health data. It aims to provide users with a detailed view of their health metrics over extended periods, allowing for more profound insights and pattern recognition that are not readily available through the standard Fitbit dashboard.

Motivation and Background

As a passionate advocate for the power of data, the inspiration for this project stemmed from personal experiences with a Fitbit watch. Intrigued by the insights it offered, I noticed limitations in the existing Fitbit dashboard, particularly its handling of historical data and limited API endpoints. This led to the development of an application that not only improves data visualization but also makes historical data more accessible and actionable.

Technical Description

The application employs the MERN stack, optimizing the benefits of MongoDB, Express.js, React, and Node.js. The backend, developed in Node.js, includes libraries such as Mongoose for database management and Passport.js for authentication via OAuth with the Fitbit API. The frontend is built with React and uses Ant Design for a responsive and visually appealing interface.

Key Backend Technologies:

  • Express.js: Framework for handling server-side logic and routes.

  • Mongoose: ORM for MongoDB, used to manage relationships between data and provide schema validation.

  • Passport.js and JSON Web Tokens: For handling OAuth with Fitbit and securing API endpoints.

Frontend Technologies:

  • React: For building a dynamic and interactive user interface.

  • Ant Design Charts and Recharts: For data visualization, allowing users to interact with their health metrics graphically.

Features and Functionality

Advanced Data Visualization: Users can explore their health metrics through interactive line and bar graphs, comparing different periods and spotting trends in heart rate variability, activity levels, and more.

  • Seamless Authentication: Integration with Fitbit's authentication system allows users to securely access their health data.

  • Responsive and Accessible Design: Ensures that the application is easy to navigate and visually engaging across all devices.

Challenges and Solutions

Data Synchronization: To ensure the database remains in sync with Fitbit, the application checks for the latest data daily and fetches any missing information. For data accuracy, it refreshes the current day's data to account for any updates from Fitbit.

User Authentication: The system uses Passport.js to manage OAuth flows and includes mechanisms to refresh access tokens automatically. It prompts users to re-authenticate if tokens cannot be refreshed, ensuring continuous access to their data.

Data Safety and Privacy: Health data is anonymized and set to auto-delete after 30 days to protect user privacy. The application is designed primarily for personal use, with a focus on security and data integrity.

Future Enhancements

I am considering adding more interactive elements and data types, further enhancing the application's ability to provide comprehensive health insights. Additional features could include machine learning models to predict health trends and personalized health recommendations.