Last weekend Product Hunt decided to host a global hackathon opening up their API to the community for consumption. Budding developers got together over at YCombinator on-site for a two day hackathon to come up with and deliver a new product idea. Remote entries were also allowed and across the globe from Hong Kong, France and our home town in London, plenty of fresh ideas were ready to be developed.
I applied on my own (a bit last minute) and with no real thought and put down the first idea that came to my head, ‘crowdsourcing for products’ via the product hunt API. The main thing as a personal goal was to prove to the people over at YCombinator I could come up and deliver an idea over two days. After a couple of days I got an email with an invite to participate, that was it I was ready to hack!
I got up Saturday morning and opened up the Badger HQ (a little hungover from the night before) to find Albert a fellow badger who had stayed the night on the sofa after having a few beers also with some of the other badgers the night before. The tech I decided to use was a slight risk as I had only dabbled with it previously. The tech chosen:
I began by using the basis of the project from what the Badger Academy Cubs have been creating for our own internal project of which they are doing a great job as you might of seen already. Albert started to gain interest in the whole project idea and got setup. Another great addition to the team a couple of hours later was Viktor, a beast at LiveScript, just what we needed. He saw on our companies Slack I was in the office and got involved. This was it we had a great team to get this hack really moving.
We decided on getting the core functionality we wanted to show off to the judges done on Saturday. Then on Sunday we would style it up and tweak the UI to make it a more usable and a nicer experience. I had implemented the core layout using twitter bootstrap (http://getbootstrap.com/) with styling from a theme on Bootswatch (http://bootswatch.com). Later Viktor informed us of an awesome library over at react bootstrap (http://react-bootstrap.github.io/) and converted the project so we could change the layout quickly and more effectively.
By the end of Saturday the project was taking shape with the huge help of Viktor and Albert. Authentication done, Product Hunt API consumed and stripe checkout integrated to allow users to pledge money. I had previously created a quick and dirty node.js passport (http://passportjs.org/) strategy to make the authentication process easier (https://github.com/allotropyio/passport-product-hunt). So with all of that said it was time to call it a night ready for a fresh start on Sunday.
Sunday came along and all that was left to do was add validation to forms and finish off some of the advanced part of the journey such as supporting product makers having the ability to assign costs and a deadline for features to be funded. Viktor also added the awesome firebase (https://www.firebase.com/) to add a storage layer for pledges and feature requests rather than it being stored in memory on the client.
Not only did it allow an easy way to implement a storage layer it also allowed the UI to live update when any pledges or features were added to the site. It really helped make the site come alive and would made the site more engaging to users viewing the site. I would say as a side note that the blend of React, LiveScript, Node and Firebase is just a match made in heaven for this kind of project (a blog post for another time).
On Sunday we were also joined by @jazlalli1 who worked in another team on a cool hack for Product Hunt taking their data to produce analytics and trends.
As the deadline approached our own lovely QA Roisi joined on Slack did some testing remotely which helped iron out a few creases. Once we were pleased we were ready to submit the hack on challengepost.com. We had created a droplet on digital ocean, registered the domain productfund.io and got it deployed and submitted on time.
Check out the final result on producthunt.com at http://www.producthunt.com/posts/product-fund
The next day we found out that we had made the top 20 finalists! we had some great feedback from the community.
We then waited to hear about the finalists and who had won. Turns out our small idea made the top 3 hacks of the first ever Product Hunt hackathon. All in all great job on everyones behalf for two days work.
“The top 3 winners will receive guaranteed interviews with 500 Startups, Techstars, and office hours with YC partner and founder of Reddit, Alexis Ohanian!”
Just to add there were some great entries, checkout the other finalists at http://www.producthunt.com/e/product-hunt-hackathon-2014