About six months ago I was sitting in a CTO meeting across DMGT and they were trying to come up with ways that we could improve collaboration across the group. After a few suggestions around wiki based API pages I came up with the idea to run a Hackathon. In my experience the best way to get geeks to know each other is let them build stuff together. This idea stuck and luckily Oliver Parke had sometime on his hands and got the job of organising it all. We were very fortunate to be able to get the Campus London Workspace to hold the event which is a hot bed of startups and geekery. The event was run on the 23rd and 24th of May and included technical people from businesses across DMGT including:
- Metro
- Mail Online
- Euromoney
- dmg::media Sprint Suite / Dev Lab
- Landmark
- Evenbase
- Broadbean
- Wowcher
I was fortunate enough to also be able to participate in Haribo fuelled hacking and below is an overview of what we built and how we approached the whole event.
Vrsus: The future of real time voting
Trying to find a group in the initial hustle of the team forming stage was easier than I thought. My initial idea was something based around real time analytics but this quickly morphed into a real time voting tool to decide which the best cats on the internet are. The great thing about the real time approach was a chance for us to use a load of new technologies. So the dream team that we ended up with consisted of the following:
- Mary Morgan (Euromoney Institutional Investor)
- Frédéric Occédat (Mail Online)
- Panagiotis Albanis (Metro)
- George Old (dmg::media)
- Me (Metro)
Once we had a general direction with regards to online voting we had an hour design session around our flip-board to try to conceptualise the flow through our app and what screens and actions would be necessary. This gave us a decent enough understanding of the requirements to put together a technology stack which consisted of the following tiers:
- Amazon EC2 Ubuntu Instance
- Twitter Bootstrap
- Angular.js
- Socket.io
- Express
- Node.js
- Redis
As we wanted to be real-time and socket based most of the stack chose itself and we thought that Redis would provide a simple way of storing the data and retrieving the post via score. At this stage we started to get down to the detail of building the initial flows around being able to submit images for voting on.
I also started work on setting up the EC2 instance so we could easily pull from GitHub and keep the server running. There were a few things that I need to do in order to get the ports forwarded to HTTP and the Node process running in the background for which I used the following:
- Forever – makes Node.js run as a background process
- Rinetd – allows port forwarding on Linux so Node can run on port 80 and sockets on 8080
Next steps were to get all the pages setup and the logo done which took the rest of the evening.
Coming in the next day first thing we sorted was our Kanban board to get everyone working on the different bits that were required. This worked well through out the day as we finished the following screens.
I also managed to procure the domain name vrsus.me and then added the subdomain you.vrsus.me to it to give it a bit of entertainment. The second day disappeared far to fast and I focused on stripping down the homepage to be nice and simple and also on the create page the ability to preview the image as soon as it has been added using sockets. We decided to against our idea of being able to enter any URL and for us to go and scrape the Open Graph or Twitter tags from it to get the images from the page to just entering a URL of an image.
This proved to be a good idea as it took us the rest of the day just to get the basic flow working, due to Redis not having any relational abilities there it took a bit of time to figure out how to store both the complex hash around the upload as well as the score after voting. The ability for the list to change order in real time also came right down to the wire and although there isn’t a fancy animation the list view is socket based and will change order when votes come in which I think adds a lot to the application.
It was then time to give a presentation of how we had approached everything and I had managed to knock up the below in Prezi.
We won the ‘Most Technically Impressive’ category overall.
Future Ideas
If we were to have some more time to develop this application into something more fully fledged I think these are the area’s that we would focus on.
- Ability to post any url and vote on it
- Social integrations
- Ability to put sponsored posts in it
- General responsive and cross browser performance
- Improvements to the animation
- Tracking
I think that Vrsus could be utilised across DMGT in many different ways apart from just showing the best cat beards on the internet. Having a real time voting system that people could submit content to that allowed the best to rise to the top based on user interaction would be a valuable asset in my opinion.
If you are interested in having a look at the code you can see it on GitHub and the url you.vrsus.me is still live and will be so for the next month or so.
Video
DMGT Hackathon – Google Campus from Dan Buck Joyce – OFILMS on Vimeo.
Photos
