Yes Mom, I’m alive! Build yourself a Travel 🌏Tracking App with Express and Foursquare for your Family

I’m Jon, a self taught node developer living in Asia building side projects and writing about learning to program

**Update**: This is meant to be a starting place for folks to create their own app, or contribute to mine. If you want to get involved, just visit the Repo!

My Mom is not going to follow me across all my social channels (nor would I want her to!) and updating different networks of people constantly while traveling is it’s own kind of work.

So how’s a digital native traveling the world supposed to keep in touch with the fam? Build an intimate web app for your family, of course!

The Idea 💡

Social media is a weirdly public and serious place. I don’t want to clog my Instagram account with the sort of “Hi Mom, I’m still alive” content that is targeted towards my family.

The 12 hour time difference between Thailand and my family in Florida also makes real time communication very difficult.

So my idea was simple, create a side channel of my social media content my family can use on their own time to keep track of my daily life.

Initially, I was going to build this on top of the Twitter API, and pull in any tweets I made with #HiMom. But, I chose Swarm and Foursquare because I wanted to leverage location data to give my family a sense of scale and movement.

PR’s are welcome to add other social channels!

Foursquare’s Rad API

The Foursquare API powering my favorite checkin app Swarm is so good, and made this project possible. Thanks, yall! 🙏 ✨

The Foursquare API provides a huge database of rich venue data diligently updated by users around the world. If you’re boostrapping any sort of location based app or service, Foursquare has done the most expensive part of the work for you, maintaining a rich global data set of businesses and points of interest, complete with venue tips and photos!

But we’re going to use Swarm today as basically just a DB and API for our own checkins!

How it Works

I wanted to show my last 7 days worth of checkin history, and allow my family to visualize where I spend my time.

  • Venues I’ve checked into are plotted 📍on a Google Maps powered Leaflet map
  • Show local time where I last checked in (̶h̶a̶r̶d̶ ̶c̶o̶d̶e̶d̶ ̶f̶o̶r̶ ̶n̶o̶w̶)̶
  • Individual checkins are displayed on a timeline below the map
  • Clicking on a checkin, or a map marker, pans the map to that area
  • My photos and and status updates are displayed on the checkin, if available

The Code

I built this in maybe 8 hours total of hacking, over breakfast at Good Morning Chiang Mai, and watching Bravest Warriors in bed 😂

It’s a basic Express app, scaffolded by the Express generator, rendering a single page PUG template, and fetching the foursquare data on the server.

It get’s the job done, and keeps my Momma happy!

View it live

Here is the repo on Github

And here is the link to remix it on Glitch

Success!

This project is in it’s earliest stages, utilizing bootstrap and nothing fancy, but it’s fulfilling its’ purpose and my family is already using it!

Please feel free to alter the project as you see fit, and let me know if you use it to keep your own family abreast of your whereabouts!

Improvements I’d like to make:

  • Password protect the site, so I can keep it between myself and my family
  • Focus on the map as you scroll through the timeline
  • Aggregate more social platforms
  • Add comments posted to Swarm checkins by me to the checkins timeline
  • Make it look better on mobile, fix tiny map text on mobile
  • D̶y̶n̶a̶m̶i̶c̶a̶l̶l̶y̶ ̶g̶r̶a̶b̶ ̶t̶h̶e̶ ̶p̶r̶o̶p̶e̶r̶ ̶T̶i̶m̶e̶z̶o̶n̶e̶ ̶t̶o̶ ̶d̶i̶s̶p̶l̶a̶y̶ ̶a̶s̶ ̶l̶o̶c̶a̶l̶ ̶t̶i̶m̶e̶ ̶(̶h̶a̶r̶d̶ ̶c̶o̶d̶e̶d̶ ̶f̶o̶r̶ ̶n̶o̶w̶)̶

If you like traveling and hacking on side projects, always looking for folks to collaborate with on fun projects! Please do get at me on twitter

Javascript Developer