Show DEV: I built a dashboard to track my life
Tags: showdev, webdev, javascript, react
Published: 2020-03-15 23:46:03

**tl;dr** check it out at http://craigcarlyle.me

## A Quick Intro

Several years ago I started on a weight loss and health journey. I was introduced to the quantified self community with Fitbit and MyFitnessPal. After losing over 50 pounds, I was hooked on the idea of personal data tracking.

Fast-forward to the present and I’m tracking more than ever. Not because I believe in optimizing every aspect of my life, but because it helps me balance it. Haven’t exercised in a few days? Time to hit the gym. I’ve been eating 4,000 calories a day this week? I should eat clean for a while. Haven’t meditated or read in a while? Let me grab my Kindle.

Lots of fantastic tracking tools are available for mobile devices ([Gyroscope](*_Gyroscope_*) has been my personal favourite), but I wanted something for the desktop/iPad where I could see more data at once over a longer period of time. I couldn’t find anything that did what I wanted, so I built a solution myself. You can see it [here](https://www.craigcarlyle.me).

![Main Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/vkx0xavzdx3220gr4tzg.png)

I’ve set up my data (since January 2019) to appear in a calendar view. Each date will contain the data from the following sources:

#### Data tracked and imported from external sources

- ❤️ Heart rate & HRV _via Apple Health_
- ⚖️ Weight and body fat percentage _via Apple Health_
- 👟 Steps and distance travelled _via Apple Health_
- 🧘‍♂️ Meditation sessions _via Apple Health_
- 🔥 Calories consumed _via [MyFitnessPal](https://www.myfitnesspal.com)_
- 🍱 Macronutrients (carbohydrates, fat, and protein) _via [MyFitnessPal](https://www.myfitnesspal.com)_
- ☕️ Caffeine (coffee, tea, and pre-workout) _via [MyFitnessPal](https://www.myfitnesspal.com)_
- 💊 Supplement intake _via [MyFitnessPal](https://www.myfitnesspal.com)_
- ✅ Number of tasks completed (work and personal) _via [Todoist](https://todoist.com)_
- 🏋 Workouts _via [MyFitnessPal](https://www.myfitnesspal.com)_
- 🧖 Sauna sessions _via [MyFitnessPal](https://www.myfitnesspal.com)_
- 💆‍♂️ RMT sessions _via [MyFitnessPal](https://www.myfitnesspal.com)_
- 👩‍⚕️ Chiropractor sessions _via [MyFitnessPal](https://www.myfitnesspal.com)_
- 🛫 Places I'm travelling to _via [Nomad List](https://nomadlist.com)_
- 🏊‍♂️ Dives I've completed _via [ScubaEarth](https://scubaearth.com)_
- 🦉 Duolingo XP _via [Duolingo](https://duolingo.com)_
- 👨‍💻 Productivity _via [RescueTime](https://www.rescuetime.com/)_
- 🐙 GitHub Contributions _via [GitHub](https://www.github.com/)_
- 📖 Reading progress _via [Goodreads](https://www.goodreads.com/)_

#### Data entered manually into a Google Sheet

- 🆙 How long I'm using my standing desk
- 🔬 Thyroid-stimulating hormone (TSH) results
- 🏆 Accomplishments
- 🤒 Sickness
- 🤕 Injuries
- 🌴 Vacation
- 📝 Bucket list

## Fetching the data (the technical stuff)

### From Apple Health
In iOS 12, Apple added  [Siri Shortcuts](https://support.apple.com/en-il/HT209055)  which allows for some powerful scripting. I wrote a script that goes through my Health Samples, formats the data as valid JSON, then saves the file to my server via SSH. Unfortunately at the time of writing, Apple doesn’t allow these shortcuts to  be triggered automatically, so I usually run them manually when I arrive at work in the morning.

![iOS Shortcuts](https://dev-to-uploads.s3.amazonaws.com/i/5sww5uxrfp3nuv08gywd.png)

### From MyFitnessPal
I could have leveraged the same Siri Shortcuts to upload my nutritional data, but MyFitnessPal is notorious for having missing or duplicated entries when synced with Apple Health.

MyFitnessPal also has an invite-only API. I’ve been on a waiting list for years, but have never heard anything.

I came across this [mfp](https://www.npmjs.com/package/mfp) module which loads a user’s [printable diary](https://www.myfitnesspal.com/reports/printable_diary/aeacad) and scrapes the data from there using [cheerio](https://cheerio.js.org).  I’ve modified it to scrape exercise, caffeine consumption, supplements, and RMT sessions. I collect this data every 10 minutes with a Node.js task run with [Heroku Scheduler](https://devcenter.heroku.com/articles/scheduler) and save it on my server as a JSON file.

### Leveraging IFTTT
Conveniently, Google Sheets are  [importable as JSON objects](https://coderwall.com/p/duapqq/use-a-google-spreadsheet-as-your-json-backend). [IFTTT](https://ifttt.com) has plenty of applets that add a new row to a spreadsheet when triggered by an action. A new row is created whenever:
- I mark a task as complete on Todoist
- My reading progress is updated on Goodreads
- A daily productivity summary is created by RescueTime

### No APIs, No Problem
Recently I’ve fallen in love with scuba diving. I use [ScubaEarth](https://www.scubaearth.com/Default.aspx) to track my dives, but unfortunately there’s no API. Again using Heroku Scheduler, I launch an instance of [Puppeteer](https://pptr.dev) to log in to my account and collect the page’s data from my logbook. The data is parsed into a JSON object  using [cheerio](https://cheerio.js.org) and then uploaded to my server.

Duolingo has an API, but it’s undocumented and (as far as I can tell) doesn’t have exactly what I need. Using the same Puppeteer instance, I go to my [duome](https://duome.eu/craigcarlyle/) profile and collect my recent XP. The new XP JSON objects are added to the existing array of XP objects and uploaded as a file to my server.

### The Easy Stuff
[Pieter Levels](https://twitter.com/levelsio)  of  [Nomad List](https://nomadlist.com/)  is awesome and allows anybody to access their data as JSON. All that’s required is a simple fetch of  [https://nomadlist.com/@craigcarlyle.json](https://nomadlist.com/@craigcarlyle.json).

## Pushing Further
I thought it’d be cool to map out my travels and dives, so I added another page that does that. The data is listed and visualized with [Mapbox](https://www.mapbox.com).

![Travel + Dives](https://dev-to-uploads.s3.amazonaws.com/i/aqmjenvjsotfwrps2xz2.png)

I also thought it’d be cool to share my bucket list. This is just a simple Google Sheet that’s imported as a JSON object.
![Bucket List](https://dev-to-uploads.s3.amazonaws.com/i/c5wk2wrs4oc1iua94zry.png)

## Final Thoughts
Although it’s far from elegant this has been a fun project to hack away on. Not only have I built an app that I needed in my life, but it helped me get over my imposter syndrome (something we all have). One of my goals was to teach myself React as I’ve mostly been working in AngularJS and vanilla JavaScript/TypeScript for the past 6+ years. Although it’s not perfect, I’m now comfortable working with React.

At any point I could have said “oh, this is too hard", or "there’s no API so it can’t be done”. Finding creative solutions (like using Puppeteer to scrape data) has helped boost my confidence as a developer.

If anyone has any questions, please don’t hesitate to reach out. I’d be happy to answer them. Thanks for reading!