Last week we held our realtime themed hacknight sponsored by the awesome Pusher. Pusher is a simple hosted API for quickly, easily and securely adding realtime bi-directional functionality like realtime chat, video chat, activity streams and more to your apps. We challenged attendees to create something cool using Pusher in just 3 hours…

We had a great turnout with students, designers, entrepreneurs, Simpleweb team members (past and present) and brilliant local developers with a range of skills and experience, and they did not disappoint! The quality of hacks was outstanding and we’re super proud to be part of such a great tech community.

After 3 hours of hacking, Pusher developers Jamie and Hamilton chose a winner to take home this Parrot MiniDrone and 2 runners up who went home with an envelope full of cash each. Simpleweb had no say in the judging, meaning our developers were free to participate and eligible for the prizes…

So, without further ado, here’s a lowdown of the hacks we built on the night (winners at the end)…

Feeling Lonely

@spyou

Created by CookiesHQ Director and Ruby on Rails developer Nic Alpi, Feeling Lonely connects multiple users via realtime video chat. Users can login and connect with anyone and everyone who’s also logged at that time. Nic and the Cookies team have since been using the app to video chat with each other in the office.

feelinglonely_jpg

Hack the DJ

@BenjaminReid, @studioromeo, @DavidDarnes

This app allows a DJ to pose a question to dancers in a club (for example “Are you liking this track?”) and gauge a response.

The DJ would have a dashboard screen where (s)he could send out a question to everyone on the dance floor and then have the results visualised. Each dancer can use their phone to receive a question and then vote yes or no in response.

The team was made up of Simpleweb Front-End Developer Ben, Rob of Orange Peel Studios and Designer and Front-End Developer at Basekit, Dave.

Rob got a PHP framework running to interact with Pusher and Ben’s JavaScript while Dave built out the two screens using HTML and CSS. The team aimed to keep the idea small so they could complete it and not leave it half finished. They were pleased with the result and may plan to spin it up into a simple service for people to test out themselves.

hackdj

Plylster

@Kidatart and Jack Barnett

Created by freelance web developer Jack and developer at Motasoft, Junior, Plylstr enables people to add songs to playlists from their phones at parties. When a user visits the website, they’re given the option to either create a party or join a party. If they create a party, they are given a Party ID and if they join a party, they have to provide one.

Users can search for a track of their choice on Soundcloud. After a user has selected a track from the list, it’ll be added to the main playlist on the computer.

When a user adds a track to the playlist they’ll send a load of data along with it, including a track ID. Plylstr then does a quick search on the Soundcloud API and retrieves an MP3 link and plays it. When that track finishes the next track is loaded up on the playlist ..so on and so forth.

Jack and Junior intended for the app to save cookies so that users could only submit one song every 5 minutes, but they ran out of time – nice idea though!

plylstr_jpg
Tweet FM

@innernets

Simpleweb Front-End Developer Mike wanted to represent Tweets as sound.

He created a simple Node.js/Express server which consumes Twitter’s streaming API, filters Tweets by those with geo-location data, and sends the longitude/latitude co-ordinates for those Tweets to the client using Pusher.

A simple webpage was created which translates that data to sound using the web audio API. Latitude is mapped to the pitch of a sound, and longitude is mapped to panning.

Check it out here http://tweet-fm.herokuapp.com

PusherBreaker

@Denis_Sellu

PusherBreaker was created by Developer at CookiesHQ, Denis. PushBreaker is a standard breakout game that you control with the gyroscope on your phone.

When players start the game on a PC they are asked to sync with their phone, which then becomes the controls for the game running on the PC.

Denis didn’t manage to finish the game on the night, but he did send over this .gif showing how the game was supposed to work.

pusherbreaker

Popularity Contest

Tim Halford

Popularity Contest, created by web developer at Lobster Pictures, Tim Halford, is a realtime multiplayer HTML5 game. In each round, players must try to pick the most popular side (left or right) before the time runs out.

The game was written in Full Stack Javascript (Node and JQuery) taking advantage of the Pusher API for controlling and updating the client in real time.

popularitycontest_jpg

Whiteboard

@BethElwell1, @benhull, @nickbloor

Whiteboard, created by Ben, Beth and Nick from local development agency Worthers, was inspired by a moment of frustration when Ben was speaking with a colleague over Skype and was unable to sketch his thoughts for his colleague to see immediately. This inspired the idea of a shared drawing space that users could place images into and draw on top of, aiding collaboration and communication.

Ben focused mainly on the Pusher side while Nick focused on the Paint tool and Javascript and collecting packets of data to send and receive via Pusher and Beth focused on styling.

whiteboard_jpg

3D Shooting Game

@cjonasw

Charlie, web app developer at Bohemia Interactive Simulations created this great multiplayer shooting game where users are represented by blocks. Check out the gif below or play it yourself here http://charliejwalter.net/hack/.

We loved this game and were playing it in the Simpleweb office the next day. We played it so much that we exhausted Charlie’s Pusher daily message quota. Thankfully, the kind folks at Pusher upgraded Charlie so that we could keep on playing. Game on!

game copy

Winners

3rd place – Follow The Music

@CoenAtCM

Developer, coach and project manager, Coen (compassmentis.com), created an impressive game where users could press up or down arrows to guess how a song would change in pitch.

Opting to use existing libraries to help him create something fun and impressive in the short three hours, Coen decided to use Highcharts, a charting library he’d been using a lot recently.

After rejecting a few other chart-related ideas, he realised that a bar chart looks very much like a frequency distribution on a sound panel, so he decided to create a moving bar chart, which was driven by music. To make it more fun, Coen introduced a line chart, showing the player following the bar chart.

Check out this video of the game in action…

2nd place – Gyrofight

@Ben_Allen, @Roarster31

Ben and Rory, Computer Science students at Bristol University, decided to use Pusher to implement a simple cross platform 2 player ‘shoot-em-up’ game.

Players scan uniquely generated QR codes off of a web page and Pusher then sends gyro data from the mobile phones to a web server running Node.js. Players can shoot by tapping and move their characters by rotating their device.

Using Pusher’s channels, Ben and Rory created private sessions so games and players do not conflict. The game was then smartened up with some css3 animations and fancy images (with a few of the team’s favourite places in them).

Check it out on GitHub now.

gyrofight

1st place – Push for Pusher

@labfoo, @chickenstudios

And in first place we have Simpleweb Developer Adam and University of Bristol student Jamie with Push for Pusher.

Currently, Pusher allows users to add realtime web-browser push notifications to their web apps, but doesn’t support mobile phone push notifications. This hack is a service for developers to add push notifications into their iOS apps, a feature that Pusher doesn’t currently offer and that Jamie and Hamilton found very impressive.

An iPhone app and a Ruby script are used to build an ‘in the middle’ service that takes your Pusher account details and subscribes to an APN channel listening for message events.

Devices register against an account and push messages can be sent to all (or at some point a specific) device.

Check it out on GitHub here.

pushforpusher_jpg

A massive thanks to everyone who came, and a huge shoutout to Pusher for sponsoring. We had a great night, its always amazing to see so many fantastic local creatives making cool stuff!

Keep an eye on our Meetup page for details of the next Simpleweb Challenge.

Related Stories