BattleHack 2013 World Finals at PayPal Headquarters


At the end of September, I won the BattleHack competition in Austin with PayPup - a mobile app for our local no-kill animal rescue, Austin Pets Alive. This was a project I’d been thinking about doing for over a year, but I needed that 24 hours to sit down and do it - and bringing PayPal into the mix for donations was the missing element to make it worthwhile to everyone.

As a result of winning the local competition, I got an entry into the BattleHack world finals in San Jose, California on November 16 and 17. This was an amazing opportunity to have a chance to go head to head with some of the most talented hackathon developers in the world, as competing teams would show up from ten different cities - Moscow, Tel Aviv, London, Berlin, Barcelona, New York, Miami, Seattle, Washington, DC, and myself from Austin. All of the other teams had at least two people, and most had three or four developers or designers. I was competing solo, as I had basically known what I wanted to build at BattleHack Austin and hadn’t formed a team.

I didn’t really think too much about my idea for the world finals, except a loose concept around fundraising for disaster relief, based on the flooding that happened in southeast Austin on Halloween this year. Then the typhoon struck the Philippines, with incredible amounts of damage and loss of life, and my friend Ronnie headed over to the Philippines  to organize disaster recovery for the area where her family is from. They had a ton of damage there, and it’s not one of the big cities, so it won’t be one of the first areas cleaned up by the government or outside relief organizations.  She asked for money from family and friends, and then kept us informed with updates on Facebook as to how things were going in Manila and then in the disaster area. This started to crystallize some of the ideas I wanted to do!

After flying up from Austin to San Francisco, I had my first ever driver waiting for me with my name on his tablet - usually I wouldn’t have even looked for those guys! The black car ride down to San Jose was pretty uneventful, but I checked in to the hotel around 3pm (meeting the great team from DC in the lobby), to get ready for the video pitch at 4:10pm. I figured that our video pitches would be shown up on a screen somewhere and some point during the weekend, as we weren’t getting judged on the pitches themselves, or even whether we built what we pitched. We had ten minutes of time in front of the camera to give a 1-minute pitch (all the way through, not edited) - I used three takes, after writing down some notes in my hotel room right before the event.

The next item on the agenda was to meet all the other developers at a dinner in our hotel that night - we’d also be meeting the PayPal developer evangelists we’d be working with that weekend. Overall, it was an extremely friendly event - I was a little worried that with $100,000 on the line for the winners, the other teams would have their guards up, whether they were being rude or just unfriendly, but it was basically the opposite. That really impressed me.

After dinner, we had a little free time to get ready for the next day (which started at 9:45am with a bus over to PayPal headquarters). I was exhausted after getting up at 6am to catch my flight from Austin, and I can only imagine how tired the developers from overseas were - apparently Team Moscow felt pretty good, because they rented a car and drove up to the Golden Gate bridge that night!

Early the next morning, I woke up and went for a 4 mile run on San Jose’s brand new Guadalupe River trail, which was a great way to start the morning off. It was just above freezing, but the day was sunny and clear.

BattleHackTrail

For my birthday (which was that Sunday), my wife Cheri got me a lucky Hacker Periodic Table of the Elements shirt - can’t go wrong combining programming with chemistry, in my mind.

BattleHackHackerShirt

The event really started to kickoff after we made our way to PayPal headquarters - the Austin BattleHack was really well organized, but the world finals were over the top - individual video stations playing video from each city’s hackathon, a bar, a DJ station, a hack room with individual tables for each team, and an area set up for the announcements.

BattleHackDJ

Once we got settled in and ready to go, I basically wasted two hours trying to decide whether or not I wanted to build my site with Rails 3.2 or Rails 4, and then if I wanted to use Rails Composer or not. More to the point, I didn’t have a strong idea of what I wanted to do, or how I was going to accomplish it, so I kind of wasted a lot of time. This wasn’t smart! All of the other teams seemed to be building mobile apps, so I went with a responsive web app - even though I mostly do mobile app development these days, part of what I wanted to do at this hackathon (and every hackathon) is stretch my development skills out a little bit further.

At the BattleHack in Austin, I did my first Windows Phone 8 app in C#, and used Windows Azure Mobile Services as a backend for the first time. This time around, I’d use Rails 4 - not vastly different from Rails 3.2, but little things like attr_accessible vs strong parameters were new. Luckily turbolinks appeared to cause absolutely no problems.

After futzing around with Rails installs,  scaffolding, and the paperclip gem for storing images on S3, I decided to clear my head of dev problems and switch over to design. As a one-man team, I couldn’t just rely on a graphic designer or front-end developer, so I had to conceptualize what I wanted as a responsive design. I was able to build my page up using Twitter Bootstrap 3 and DesignModo’s free Flat UI Kit in the browser, getting a static HTML prototype of how I wanted the key page of my site to work. Because I designed in the browser, it wasn’t a lot of work to split this static page out into an application layout and a content page template to get it back into Rails.

RebuildingAppBattleHack

PayPal did an excellent job of feeding us - the hackathon actually stopped the clock for a formal dinner at 5:30pm, where the hackathon judges and mentors rotated between tables.

BattleHackDinner

In addition to this, later that night, a build-your-own pho place rolled into the hackathon area, you could assemble your own bowl out of noodles, vegetables, broth, and sauces! Yum!

BattleHackPho

I didn’t want to sleep, but I was exhausted. Part of PayPal headquarters was turned into a sleeping area, with a cot set up for each team with a PayPal developer blanket. I wasn’t sure how the teams with more than one person were going to handle the cot situation, but it didn’t seem to be a problem for any of them.

BattleHackCot

By this point, I had the basics of the web site down, so I had switched into integrating two key hackathon partner APIs - Twilio and SendGrid - I know that both of these are extremely easy to add in a superficial way, but my web app actually heavily depended on Twilio and SendGrid integration.

In a disaster area, you’re not going to have strong wifi, a reliable 4G internet network, or even possibly access to your own computer or mobile device. Because of this, I wanted users to be able to update their stories using SMS, voicemail, or email updates. This required writing hooks for incoming email using SendGrid’s webhooks, and incoming SMS and voice using Twilio. In addition, I used the Twilio Client to provide a voice recording feature directly from the web browser, for areas here there may have been available wifi (perhaps through satellite uplink) but no reliable voice infrastructure.

Voice was a key part of the application, because I wanted people to be able to record messages for their loved ones - their friends and families would love to hear from them directly that they are ok. Twilio also does a decent job of transcribing those recordings, so I included those as status updates.

Somehow I struggled through to the morning, and I basically had the core of the app done - integrations with SendGrid, Twilio, and PayPal, a Google Map on the home screen, and a compose new update feature that took images, YouTube videos, or links and inserted them on the screen using AJAX. I gave a practice pitch at 10:30 am, and got some excellent feedback on leading with the SMS feature, which I incorporated into my final pitch.

I really just worked on testing and polishing the app for the next two and half hours. I also took several walks around the building to practice giving my pitch, first to myself, and then second over the phone to my mom - I figured if she could understand what I was pitching with no visuals, it would be pretty clear to the judges and audience.

With an hour left, I was basically done. There were things I could improve with the app, but they wouldn’t fit into the demo, so I didn’t bother with them for fear of breaking the hack.

The final presentations went smoothly - I was thrilled to be third, so I wouldn’t have the pressure of leading off, but I wouldn’t be nervous through out the whole presentation by going last - after all, there was $100,000 on the line! Some of the teams appeared to go over their five minute limit, and were being waved off the stage, but I ended my presentation with about 7 seconds left of my five minute limit. The questions from the judges were all well thought out - Sarah Austin asked if you could set up a disaster story over SMS, which I hadn’t thought of before, but would actually be an excellent idea. Jeff Lawson from Twilio asked if I was going to support MMS, and the app could easily support MMS as soon as Twilio opens it up for long telephone numbers! Last, I was asked what technologies I used to build the application (Rails 4, Bootstrap 3, SendGrid, Twilio, Heroku).

The other teams all gave interesting presentations - I liked that none of the teams seemed to be doing the same things, so there was a good cross-section of ideas - NFC, 3-D technology, image recognition, cross-platform mobile apps, and hardware hacks. Some were more practical than others, and some seemed to stretch the limits of available technology. I thought that David Marcus - one of the judges, and President of PayPal - did an excellent job of asking how some of the apps would be used by customers or where they fit into the landscape.

BattleHackTeamLondon Team London

BattleHackTeamSeattle Team Seattle (and Macklemore)

BattleHackTeamMoscow Team Moscow (with the winning project, DonateNow)

  The period in between when the finalists all presented and when the prizes were announced was really stressful - finally we were called back in for the final judging, and I was thrilled to see that my project had won both the Twilio and SendGrid prizes! The Microsoft and Nokia prizes went to a strong team out of Seattle that demo’d Kinect-based technology, while the first, second, and third prizes went to Team Moscow, Team Tel Aviv, and Team Miami, respectively.

This turned out be a very crazy weekend - out to California on Friday, back to Austin on Monday, teaching my iOS development class Tuesday night, so it took a little while to get back up to speed. I thought the best part of the hackathon was meeting all of the developers on the other teams - I really enjoyed sitting in between two teams of college students (Team DC from Georgetown University, and Team London from the Hackathon Society at the University of Nottingham), and being able to talk about the project with the other solo developer, Jurre from Team Berlin (Team Berlin’s other member was on the business side). I also enjoyed meeting all of the PayPal developer evangelists (Robert, Jonathan, Tim, and Cristiano), along with Kunal from SendGrid and Joel from Twilio.