The Toronto International Film Festival is the second largest film festival in the world. Hosting an audience of 400,000, featuring over 300 movies and lining the streets with celebs, fans and movie lovers.

The festival is home to a diverse selection of films that cater to various tastes like vampire worshippers, walrus horror films (we know), historic tales, and epic world realities. A festival truth is that no-matter what you’re into the chances are somebody else is too. We wanted to help film lovers at TIFF find that somebody.

We created, designed and built Film Hearts because venturing TIFF alone didn’t seem particularly festive to us. Film Hearts is designed to connect people with the same film tastes and ensure that great films never have to be seen alone. Film Hearts is optimized for mobile, which allows users to stay on track of show times, films and meet-ups. The user creates their own film-orientated profile, then browses others and instantly connects. While they are waiting in the lobby they can use their visual tag to identify themselves to their newfound movie buddy, film nerd, or fake date.

Behind the Film Hearts’ curtain lies the juicy but nerdy stuff we get excited about. Film Hearts is a responsive website. We use Facebook to authenticate users and used the Laravel PHP framework to build the back-end of the site. “This is the first time we’ve used Laravel and found it a real pleasure to work with”, said James Player our guru Web Developer. “It has great documentation and an easy interface that made developing with it a speedy and painless process.”

For the front-end, we made good use of Grunt Tasks to generate icons, optimize images, concatenate and minify files and run the Sass CSS precompiler. One of the challenges we faced in the front-end was creating a horizontal scroll mechanism to display the users available for a film on a mobile device. We ended up using iScroll to fix this problem. iScroll is a JavaScript library that generates a native-feeling swipe/scroll experience on touch devices. We also used iScroll to implement the carousel on the homepage.

Creating the “Theatre Spotter” took a little bit of time to figure out. Each pair of Film Hearts needed to have a unique visual tag on their phone so that they could find each other before the film. To solve this, each Film Hearts connection receives a unique visual tag. We generate two colours and the background of the Theatre Spotter is filled with a gradient between these two colors, creating dynamic movement using JavaScript. A CSS animation keeps the Film Hearts ‘angular heart’ icon beating in the foreground.