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
- SASS and Jade
- Bootstrap 3
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 =)
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 =)
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 =)