Winning TartanHacks 2017 gave us the incredible opportunity to be invited to Facebook’s headquarters in Menlo Park to compete in their global hackathon.
Greetings
I was quite literally shocked to see just how massive Facebook’s headquarters truly is. I had always heard about giant tech companies before, but I didn’t realize I would be stepping into quite literally a small city.
Once we had dropped our luggage off at the hotel, we started off with a tour of the office. The hackathon organizers lead us around the office and pointed to everything that we could do and enjoy if we worked at Facebook. Of course they weren’t going to hire us though.
We ended the tour in the hacking room. There was a huge table for each team. There was also multiple refrigerators and giant bins with snacks and energy drinks. On the other side of the room, there were couches that we could sleep on. All of this stuff for just the 14 teams that they had invited. They told us that they had plenty more goodies “in the back” for us when the time was right.
What we were building
We had been scheming about what we might want to build at the hackathon for quite a while. We knew we wanted it to be Facebook themed somehow, or at least be in the social media space.
We deliberated a lot on visualizing connections or somehow enhancing the social media experience.
Since we were (kinda) hot off of the 2016 presidential election and the controversy surrounding Facebook’s role in the spreading of fake news, we decided to tackle the hackathon idea from that angle. Ultimately our idea converged on the concept of making political debates easier to follow and have richer social media interaction.
The flow of the idea went something like this: two debaters would speak into microphones as they debated as the “left” speaker and the “right” speaker, just spatially speaking. As they spoke, whatever they said would be transcribed and then analyzed for facts, sentiment, and entity. Their transcription would then be displayed on their side of the screen.
Any facts would be automagically fact-checked against a database. Whether true or false, articles and links that support the fact-check verdict would be pulled up and attached to their transcript. Sentiment and entity information were used to relate what the debaters were talking about to each other. For example if the left speaker were to rebut against a point said previously by the right speaker, the sentiment and entity analysis would pick that up. If that is the case, a line would be drawn between the two transcriptions.
Finally, the audience could comment on, upvote, and downvote these transcription blocks. All of this activity would be aggregated in terms of their positive/negative affect. Then a light bar between the two debaters would show, in real time, which side the audience was supporting more strongly.
All of these were to provide an easy way for the audience to engage with and have a visual effect on the debate process. Also it allows social media users to trace a debate back by following specific topic threads.
This is how a debate may look. Taken from our presentation livestream
%s/sleep/hack/g
There were a ton of technical challenges with this project. There were two really difficult ones that we had an especially hard time dealing with. One was trying to figure out how to actually track the rebuttals and agreements between the debaters really far back without increasing the search complexity too much. We ended up just doing a lot of approximations based on our demo (more on this later). The other was actually debugging React.
A quick little background on our team. None of us do frontend. We are all math-inclined people who can do algorithmic thinking but didn’t show shit about using frameworks or making things look good. I’m sure with enough time we could figure out how to use React properly, but that was a luxury we couldn’t afford with only 24 hours to spare.
We ended up getting help from some Facebook engineers who had been working on React since its release.
We discovered that we really liked Red Bull Yellow
Design for Demo
As I mentioned before, we ended up “patching” up a lot of stuff by coding specifically for the demo.
We prepared a script of exactly what kind of a debate we were going to have during our presentation. During the presentation, I actually misspoke a word. My heart skipped a little but it turned out fine since the judges really didn’t care too much what technical details were going on.
Ultimately a hackathon presentation is pitching an idea, a concept of what a product might look like. Here our concept was a more interactive and useful political tool for a social media platform. It didn’t matter (that much) that we got our React canvas to finally behave nicely, or that we use some pretty nifty search algorithms. You are there to sell the concept for a product, not your engineering skills.
Goofing around before our demo
Check
We presented to some of the VPs of Engineering for Facebook’s subsidiaries. They gave us some really positive feedback. It was quite amazing to get to meet and talk to them.
In the end, we got the first place prize. This meant that my team to got split $10,000 and we also each got an Oculus Rift. We all flew back early next morning to make it to our lectures. I spent all morning stressing about how to carry a big check with me on the plane, but apparently it happens all the time because there is a standard protocol for helping passengers store very large single sheets of cardboard.