InCahoots Goodies

Summary

Priceline PicMe microsite was a photo sharing contest commissioned by priceline.com's marketing department in order to engage their employees to share their travel/vacation photos, with the most popular submissions becoming eligible for prizes. The site was built with Nodejs using the Express framework + MongoDB, and hosted on a Ubuntu server via Digital Ocean (they rock!). The client-side logic was custom built with some plain old JavaScript + jQuery, since we felt that the scope of the project did not require the use of a major framework.

While the design of the site had to coincide with a look and feel consistent with other Priceline internal sites, this project presented multiple (fun! exciting!) technical challenges, first being that this was going to be an intranet site hosted externally. This requirement meant we had to build a custom login/account component (leveraging passportjs, http://passportjs.org) so that only priceline employees could sign up and participate. This account registration required that those signing up had an active priceline email address which would be validated via confirmation email once the user created an account (nodemailer came in handy here, https://github.com/nodemailer/nodemailer). Certain accounts also had to be set up with administrative rights which would allow them to collect contest data and download the original high resolution image uploads.

Photo management was also a bit of an undertaking. To optimize site performance, every uploaded image was scaled down to a "thumbnail" copy and a "preview" copy (Imagemagick was key, https://github.com/yourdeveloper/node-imagemagick), both stored on the Ubuntu server. The original high resolution copy, however, was backed up to an AWS S3 bucket for preservation/space saving purposes.

The (responsive) UI had to support both desktop and mobile capabilities such as photo drag and drop and direct uploads via device camera, respectively. We also had a requirement to properly scale and preview the selected photo prior to upoad. In classic fashion, iOS gave us some headaches as photos selected/taken via Safari Mobile refused to orient properly. This issue, as we soon determined, was due to the iOS images' EXIF data orientation. Since we are not image data experts, a bit of developer sleuthing had to take place, and eventually we found and tweaked a solution in which the EXIF data was properly parsed and the image data re-oriented accordingly, to be redrawn using HTML5 canvas for preview. Since photos can be a real pain to load in bulk, we built out a custom lazy-load, infinite scroll solution so that the upload listing rendering felt smooth and fast. Sorting and filtering based on users, as well as a photo "liking" system were features also built from scratch but were relatively straight forward in implementation.

Altogether, the Priceline PicMe microsite did not feel very micro at all. We got the opportunity to work on an image-heavy project which required some noodling and creativity to enhance performance (thank goodness for Imagemagick), deal with some very pesky issues such as the EXIF data orientation parsing and subsequent canvas rendering, work with some excellent Node modules such as passportjs and nodemailer, and connect to third party tools such as AWS S3. But in the end, it was super gratifying to see the uploads and likes roll in as the microsite operated without issues for months before the contest winners were announced.