loading...
Cover image for Show DEV: I built a dashboard to track my life

Show DEV: I built a dashboard to track my life

craigcarlyle profile image Craig Carlyle Updated on ・5 min read

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 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.

Main Dashboard

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
  • 🍱 Macronutrients (carbohydrates, fat, and protein) via MyFitnessPal
  • ☕️ Caffeine (coffee, tea, and pre-workout) via MyFitnessPal
  • 💊 Supplement intake via MyFitnessPal
  • ✅ Number of tasks completed (work and personal) via Todoist
  • 🏋 Workouts via MyFitnessPal
  • 🧖 Sauna sessions via MyFitnessPal
  • 💆‍♂️ RMT sessions via MyFitnessPal
  • 👩‍⚕️ Chiropractor sessions via MyFitnessPal
  • 🛫 Places I'm travelling to via Nomad List
  • 🏊‍♂️ Dives I've completed via ScubaEarth
  • 🦉 Duolingo XP via Duolingo
  • 👨‍💻 Productivity via RescueTime
  • 🐙 GitHub Contributions via GitHub
  • 📖 Reading progress via Goodreads

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 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

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 module which loads a user’s printable diary and scrapes the data from there using cheerio. 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 and save it on my server as a JSON file.

Leveraging IFTTT

Conveniently, Google Sheets are importable as JSON objects. IFTTT 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 to track my dives, but unfortunately there’s no API. Again using Heroku Scheduler, I launch an instance of Puppeteer 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 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 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 of Nomad List 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.

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.

Travel + Dives

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

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!

Discussion

pic
Editor guide
Collapse
liyasthomas profile image
Liyas Thomas

Site looks awesome!
Are you planning on open sourcing the project?

Collapse
craigcarlyle profile image
Craig Carlyle Author

Thanks!

Yes, that's the plan. I need to do some cleanup and write some tests first, but I'll be publishing it to my GitHub account.

Collapse
liyasthomas profile image
Liyas Thomas

Awesome 🤩
Kudus to the project!

Collapse
mikerubini profile image
Mike Rubini 🇮🇹

Great job! Keep us posted! Can't wait to try it myself 🚀

Collapse
emma profile image
Emma Goto 🍙

This is super cool! I've been looking into creating a similar sort of thing, but more focused around goals.

Collapse
craigcarlyle profile image
Craig Carlyle Author

Great idea! Can't wait to see it 😊

Collapse
sebbdk profile image
Sebastian Vargr

I've been wanting to do something like this forever, but always end up staring at the wall when i think GUI.

This is awesome inspiration, thanks!

Not sure i personally would share my own data so blatantly tho. :)

Collapse
darek_kay profile image
Darek Kay

I really like it - thanks for the detailed explanation. I'm working on a personal dashboard project myself and I'm always insterested in more inspiration like your project.

Collapse
gokulkrishh profile image
Gokulakrishnan Kalaikovan

Love the idea. I built a habit tracker to do the same but yours seems very nicely detailed.

Thanks for sharing!

Collapse
joshuatz profile image
Joshua Tzucker

This is the kind of content I come to DEV for! It's awesome to see so many pieces fit together, and ingenious solutions crafted where existing APIs could not be found. Thanks for sharing!

Collapse
binyamin profile image
Binyamin Green

Never heard of rescuetime before. Thanks for the tip.

Collapse
darkle profile image
Coop

This is neat. 👍

Collapse
ascotto profile image
Andrea Di Minico

Congrats for losing 50 pounds and bringing your idea to life. As other wrote, I had a similar idea few years ago: to stay consistent with life goals, I drew a calendar which contains all weeks for 20 years ahead on A4. From one side it kept me motivating with pursuing career goals, travel goals, growth goals, and to remind of all the things I did in difficult times. From one side this kept me motivated mad from another side seeing 20 years of your life on A4 paper was a bit depressing - life passes pretty fast.

From technical perspective gathering all those data for research would be of incredible value for companies in different niches.

Collapse
hazimhafis profile image
Muhammad Hazim

What a fun project! great Idea to increase our productivity! 👍👍👍

Collapse
carlosguzman profile image
Carlos Guzmán

It looks awesome! and I love your initiative to build something that you need in your life and at the same time you use it to learn/practice new things and improve your career.

In my case, I am still stuck in the what to build? is it useful? I can not do this, I will take so long time, and so on. Reading your story inspires me to try to do something. Thanks for sharing Craig.

Collapse
remrkabledev profile image
Malcolm R. Kente

This is pretty cool! Kudos to you for making this

Collapse
corelhas profile image
Carlos Orelhas

That's a good idea !! Love it buddy !

Collapse
highcenburg profile image
Vicente G. Reyes

Awesome idea!

Collapse
kaleigh profile image
kaleigh

WOW!! This is so cool!

Collapse
jeastham1993 profile image
James Eastham

This is incredible Craig! I expect it's a great motivational tool seeing how much you are getting done.

Collapse
naimah profile image
Naimah

Love this so much!!! This is why I track all my data so that one day I can do the same :)

Collapse
rattanakchea profile image
Rattanak Chea

That's pretty impressive the number of apis involved and different techniques to accomplish this. Could u share data flow in diagram if any? Would be great.

Collapse
stefanjudis profile image
Stefan Judis

That's very cool! Thanks for sharing!

Collapse
damiangalletini profile image
Damian Galletini

Awesome! Thanks for sharing this!

Collapse
indravd profile image
Indra van Davelar

Very cool! It also looks really nice.
Only thing I would do is host it in Amazon S3 with CloudFront in front of it and use a ACM Certificate (free).
It took quite some seconds to load it.

Collapse
tvanantwerp profile image
Tom VanAntwerp

This is awesome--been wanting to build something like this for myself for ages, and this is great inspiration! Thanks for sharing!

Collapse
dana94 profile image
Dana Ottaviani

This looks great! Having all these achievements listed really shows how much you accomplished, that must be a great feeling. 😄

Collapse
phpfour profile image
Mohammad Emran Hasan

That's a pretty cool dashboard you've sewed together...kudos! 😱

Can't wait to get a hand on it for myself.

Collapse
antlio profile image
Ant Lio

That's great, thanks for sharing your journey!
Love the way you connect everything you use daily in one place 👏

Collapse
thezeroine profile image
Zeroth

Hey This looks great and I've also wanted to build like this on myself

Can I ask what stack you had used to built this app?

Collapse
websmith profile image
Nate Cornelius

Great work! Thanks for sharing this.

Collapse
xieweizhi profile image
Weizhi Xie

Love it. The design is neat. Thank you for sharing this.

Collapse
romanvanloo profile image
RomanVanLoo

Very well done sir! Love the way you fetch all these data!
Any options you could dive deeper in how you fetch the apple health data?