SendGrid sent us to the TechCrunch Disrupt Hackathon to do some hacking with local developers. With just 24 hours to go from idea to demo, we came up with the idea CrunchFunnel. Using the Crunchbase, SendGrid and Twilio APIs, CrunchFunnel helps you find out which companies are ready to hire and expand their infrastructure, giving you a lead time of 2-5 weeks over competitors.

In this post we will describe our process from beginning to end, including access to the source code and live demo.

1. Selecting An API Hackathon Target

At hackathons, it’s not about who you are, but what you build there. You can come with a team or find one there. Frequent attendees of hackathons are familiar with popular API’s and usually arrive with several ideas in mind. The exciting part is trying something new.

You’re looking to build something interesting and unique. Sometimes that’s using an API in a novel way unimagined by the designers of the API or by mashing a few APIs up to form something innovative.

SendGrid’ers Laurence and Pedro brought the CrunchBase API to our attention as a viable and interesting API to hack on. There is a lot of information on the CrunchBase site, with crowdsourced data and over 150 million updates per month according to a recent article about the CrunchBase API update.

We spent time exploring other sponsored API’s for the hackathon we hadn’t used before like Evernote, New Relic and the Department of Energy, looking for interesting ways to tie them together.

For the foundation of our technology stack, we selected Python for our language and Flask, a lightweight Python web framework, perfect for a time constrained hackathon. For hosting we decided to use AWS Elastic Beanstalk as it was one of the sponsored services and would be fast to setup. SendGrid and Twilio rounded out our technology stack, allowing us to easily send out information to CrunchFunnel users. If we had extra time, we would of integrated Locu, LinkedIN and Klout to polish the data.

Elmer took care of the backend programming, while Adria focused on customer development, frontend design and our final presentation.

2. The Customer Development Process

While there were a lot of data points within the CrunchBase API, we needed to identify the data that would be most valuable in a digest format to subscribers. Adria selected the overview description, number of employees and total money raised in addition to the company’s contact information and URL to begin.

To validate this was the correct data, Adria created a survey asking:

    • Were they readers of TechCrunch
    • How they used CrunchBase
    • Did they work in a technical role
    • How did they make decisions on where to work

This identified individuals who were likely to be making a job change in the next 1-3 years and thus the target user of our tool. Adria started with open ended questions and then divided them into groups.

Overall, the findings were consistent with location and work environment being the most important.

3. Front End Design

The design was kept simple and focused on where the information would be sent. After entry of the zipcode, you could select to send by email using SendGrid, text using Twilio and post to your Evernote account (this option will be marked at “coming soon”).

Adria used an online wireframing tool called Moqups to sketch out an outline of our idea:

We then discussed formatting of the CrunchBase content via email as well as the fields that subscribers would fill out to sign up.

To create the site for the app, Adria downloaded Twitter Bootstrap and created the landing page. This front-end framework is very popular at hackathons and Adria first used it last September at the Foursquare hackathon. It’s easy to use and comes with packed with useful css styles, layouts and javascript functions so you don’t have to spend hours building them yourself.

Adria stripped out all the navigation and started with a base page using the Bootstrap grid, thumbnails and a form for the zip code to create the initial design.

Once that was in place, Adria created a logo, added form fields, submission buttons and logos for each service

In a hackathon, functionality is more important that design as the goal is to build a working app, but making your app easy on the eye helps to focus on user experience and workflow. If you have a choice between working on slides and working on the interface, choose the second one.

4. Back End Design

In parellel, Elmer worked to make the APIs (CrunchBase, SendGrid & Twilio) come to life via the Amazon AWS/Python/Flask stack. Prior to arriving, Elmer worked on making sure the framework was functional and ready to go, albeit on a different hosting service (Heroku). It did not take much to switch over to Amazon Elastic Beanstalk. During the event, the focus was on making the idea come to life in a form that could be demoed onstage, within 60 seconds.

5. Demo Slides

We created a set of slides to explain what we built. This is common if you’ve attended events like Startup Weekend or gone to demo day for an incubator. The thing that made the TechCrunch hackathon different is that instead of having 3-5 minutes to explain and demo your app, you had exactly 60 seconds. Elmer and I decided to skip nearly all the slides and focus on the demo but these slides give you an idea of the presentation

        • The problem: Too much information to process
        • The target market: Job seekers
        • Demo
        • Customer Development: Validation of our assumptions

6. Live Demo

In the end, we were one of 151 final hacks presented, 8 of them using the SendGrid API. After our presentation, we were treated to Sushi & Beer, a hackathon first for us, and we attend a bunch of hackathons.

It worked!

There were 8 companies that used the SendGrid API, making it a challenge for us to chose the best hack using SendGrid. We chose Roxollo, a marketing platform that captures and retains customers. They were able to complete a impressive CRM in just 24 hours, so we awarded them our prize, a Google Nexus 7!

You can download the source code, view the presentation and try the live demo [zip codes that are known to work are 94109, 94111 and 94114]. Don’t forget to check out our photos and tag any that you recognize. See you at the next hackathon!

Written by Adria Richards and Elmer Thomas

Adria is a developer evangelist at SendGrid. Originally from Minnesota but now living in San Francisco, she attends hackathons, conferences and local meetups showing developers how to leverage the SendGrid API. Adria has been a speaker at SXSW, O'Reilly Web 2.0, BlogHer and is involved in helping women programmers like herself learn to code. Loves bacon, snowboarding and endless Wikipedia surfing.