A Quick Walkthrough of McHacks 2016

It all started with an email.

Hey there,
We have some open spots at McHacks, and if you’d still like to come we’d love to have you! Come on down to the SSMU building today on McGill’s campus and register!
See you soon!

I really wanted to go to McHacks but I got refused. I guess I lost the hackathon lottery. I thought that all hope was lost until I received this message 50 minutes before the beginning of the event.


I quickly grabbed my phone to contact my friend Keven-Matthew. I wanted to know if he had a team and what was his project. He was with his buddy. They wanted to build a Shopify app.


We thought about an idea. At first we wanted to build an app that would post pictures to Facebook and Instagram when a new item is added into a store. We quickly found out that Posting.ly was already doing that. Back to the drawing board!


I arrived at the hackathon. There was no time to waste. We started brainstorming. What about an app to fill forms? No, too boring. What about hardware?


Hardware looked promising. We wanted to build an app that would allow customers to interact with a Shopify store in a whole new way. A quick trip at the WearHacks provided us with what we needed: Beacons.

The idea

We wanted to build a brick and mortar Shopify store that would be location aware. Beacons would be used to triangulate the position of a user in the store. Given the position of the customer, the app would display info related to the item in front of him. Our app was called WalkThru.

The team

Gabriel Bélanger

Keven-Matthew Larrivée-Fontaine

Justin Léger

The development

Keven-Matthew and Gabriel mostly worked on the Shopify store and everything surrounding it. Keven-Matthew is a beast when it comes to Shopify store. If you ever need help with one, you can contact him here.

I mostly worked on the android app. As of right now, the beacons are hardcoded inside the app. I will try to publish the github repo with some modifications to make it universal and probably add the possibility to add items while using the app.

First, I started to use the estimote library but after doing some research I ended up using AltBeacon, an open source library for proximity beacons. Everything was a breeze to setup.

Regions can be created in a single line. The only problem I encountered with AltBeacon was the usage of a final collection of beacon object. The collection was only one item long and had to be reinitialized at every new loop. Each loop, I checked which beacon was inside the collection and logged its distance from the phone. I then made an algorithm to position the customer in the aisle of the shop according to the position of the phone relative to the beacons.

The final product

We made a little video showcasing our creation. Have a look. The voice-over was done by Keven-Matthew. I used iMovie to do the editing since it offers a simple and easy solution for editing and voice-over. The video took 2 hours from start to finish. We are really happy with the result.

The result

We finished third! We are really happy. We never thought that our project would be a big success like this. This was an amazing experience. I cannot wait for the next hackathon.

The swag

No hackathon review is complete without a swag review; therefore, here is my swag collection from McHacks: