Project 1 Recap: TravelGram

Okay, this post is over due, but it’s been really busy!

So my first project, dubbed ‘TravelGram’, has been a really fun experience (unlike my current second project, which is giving me sooo much grief, but that’s another story for another day… heh).

You can check out the GitHub repository here: https://github.com/duncanleung/travelgram

The idea behind TravelGram is that it’s a web app for travelers who want to explore a location before they go there. TravelGram allows users to search for a location around the world – Shanghai, for example, and the website will pull in geolocated pictures from Instagram.

The technologies that I incorporated to build out this project were:

  • Instagram API
  • Google Maps API and Places Library
  • AJAX
  • SASS and Jade
  • Bootstrap 3
  • A lot of beautiful CSS and Javascript animations (if I may say so myself =p)

TravelGram-1

Some of the cool features that I build out were:

  • Dropping marker pins where each individual picture was taken - This was done by creating an array and assigning each photo and marker an ID
  • An event listener for mouseover and mouseout is attached to both the marker and photo
  • Hovering over the picture highlights the respective map pin
  • Hovering over a marker on the map highlights the respective picture

Note: The filtering panel above the photos doesn’t work yet – I didn’t have time to finish that functionality, but the idea is there =)

TravelGram-4

The big success of this project is that it was only actually supposed to be a demonstration of the HTML/CSS front-end development skills that we had just finished learning in class. So the fact that I was able to pull in extra functionality with Instagram and Google APIs was really cool. I’m really pleased with everything that I was able to build out. Were were also only just starting to learn Javascript during the first week of the project, and so a lot of the functionality was built out through weekend research and side reading.

One of the main layout techniques that I was practicing in this project was CSS FlexBox. I found it to be a really powerful way to align and position components without the headache of thinking about floats and clearfixes. It requires a lot of prefixing to allow for cross-browser compatibility, but using an auto-prefixer helped with that =)

TravelGram-2

TravelGram-3

Some of my take-aways from this project:

  • Bootstrap is great for building out layouts quickly
  • Bootstrap can end up being really difficult to work with in fine-tuning layouts because of the way that rows and columns work. This article really helped to clear up some confusion: The Subtle Magic Behind Why The Bootstrap 3 Grid Works
  • Google APIs are pretty great to work with. Their autocomplete library implementation was literally just a couple lines of code to use
  • Instagram’s API is not so fun to work with. I was placed in a sandboxed as a new Instagram developer and had to send off a lot of request emails to friends to use their geolocated Instagram photos =)

I was also one of the 6 students selected (out of our class of 19) to present my project at the school’s Demo Day to some recruiters and CTOs in the Orange County area. Here’s a quick mug-shot that my wife got of me giving an intro to what we’ve been learning in class =)

IMG_1654

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!