Facebook Developer Circles sounds more like a hippy healing group than a hackathon initiative. The 2018 Global Community Challenge brings together developers and community leaders from around the world, helping people to build communities. Okay so it still sounds like that healing group. But we’re fine with that.
The first part of the challenge is a series of local hackathons in the participating countries. July 6th-8th saw Codeworks welcoming participants and judges from across Europe for a weekend of innovation and learnings at our Barcelona campus.
Home of the Mobile World Congress (the world’s largest exhibition for the mobile industry), and with our campus district (22@) dedicated to innovation, Barcelona is fast becoming the Silicon Valley of Europe. The ideal spot then for our hackathon participants to create a solution based, at least, on a Facebook product. That means Groups, API, Messenger, React.js or GraphQL to name a few. But first, the winners!
3rd prize, Eventing
A chatbot that creates events automatically with people with the same hobbies as the user.
2nd prize, MobPong
A game in which all the people who are waiting for the metro or a doctor can participate.
1st prize, Grids Ninja
A web application that allows you to simultaneously play multiple video streams and comment on the content through a chat. Codeworks students were actually behind this one, but we won’t show off too much about that.
What were the takeaways?
No, we don’t mean noodles. We’re talking about 1 Hackathon, 48 hours, 5 teams and 3 winners. Phew! We asked our participants, what did you learn?
Tip 1: ask for help 🙋🏽
In 48 hours, your idea will change in ways you can’t predict. Codeworks instructor and intrepid hackathon participant Isabella Chen, described her project like a cheshire cat:
“Eventing is cool. But it’ll decide not to show up when you need it most and do weird sh**t.”
Think of your project like an animal, feed it, nurture it and train it well. Edgar Cheverier, one of the four behind ‘Grids Ninja’ described the project like a fly, because: ‘‘if you look closely it has nine eyes.’’ Sounds scary? That’s because Grids Ninja lets you simultaneously play multiple video streams.
Nine videos is just the beginning. It might feel like it’s moving in all directions at first, so ‘taming’ your hackathon idea is crucial. Remove any extra stressful features and take back control.
Take MobPong for example, lead by Senior bootcamp teammates, Jon and Doruk. Jon spent the first 24 hours teaching himself to code with a complicated tutorial until he admitted the game was half-dead. Lifeless, the project panted to a grinding halt until suddenly! Jon’s ally Doruk stepped in and said,
“Jon dude. You’re stuck. Need help?’’
Jon humbly told us,
‘‘24 hours into the weekend was a breakthrough moment. Doruk helped me with an easier approach and MobPong was up and running soon after. Later, during the pitch, everyone in the audience jumped on the back of MopPong and played it. It was awesome!’’
48 hours is too long to work solo. Doruk showed Jon the light, using a new tech stack. Four hours later and the project could breathe again. At 8pm on Saturday night, Jon and Doruk asked everybody on campus to pause on their own projects and test the game and so saw all hackathon participants happily testing MobPong.
Much like the Carpenter experiment (read on for more on this), the players needed little instruction. They figured it out; the code was smooth, the design super simple. Doruk’s help, together with help from fellow participants made for a winning project. It’s a golden lesson: help each other out.
Tip 2: just like your laptop, arrive fully charged ⚡️
Lazy myths surround Hackathons. We picture a bunch of hacker guys in black hoodies surviving on zero sleep. Blue thumbprint bags under their eyes. Nothing but pizza to eat. The reality during this hackathon was quite different.
To be a good teammate, you need rest. Okay, so it’s hard to guarantee 8 hours sleep. But we made sure the participants filled up on vitamin D from our sunny campus terrace and took plenty of breaks. Even if they were tired to begin with. Roger, a frazzled teammate on Grid’s Ninja sternly advised us:
‘‘Don’t party the night before a hackathon.’’
And Jon wisely adds, :
‘‘You can’t cheat sleep. RedBull just isn’t the same. ‘’
With plenty of water, just a little caffeine and lungfuls of fresh air, your hackathon might not be the endurance test you expect.
Tip 3: plan as a team ⏱
To be the dream team, you need to plan. That means effectively communicating with each other. Organise your time. Some of these participants had worked together before on Codeworks Thesis projects so they knew each other’s strengths and weaknesses.
The winning team understood that whilst some students enjoyed working on front-end, others were better suited to the back-end. They planned their workflow accordingly.
Chris from Grids Ninja explains:
‘‘ We used React and Redux on the front-end with me and Edgar leading. Roger and Lars worked on the back-end using Node.js and the Koa framework with integration of Socket.io. ’’
‘‘ We would then switch between the back and front-end. We learnt the fine line between getting things done and being chilled. That understanding comes from getting each other’s strengths and weaknesses. The more we can laugh as a group, the more productive we can be.’’
And to stay productive, a little planning goes a long way. Isabella Chen says:
‘‘ If I were to go back in time, I would have much better planning. I think to succeed in a hackathon, you really need to have figured out what you want to implement and get everyone to agree, at least a day in advance. Then stick to that plan during the event.’’
Eventing’s plan was this: they used Facebook Developer platform for the messenger and the Node.js server with Koa. For the database they used Postgres, with a Sequelize layer. Their view was rendered thanks to a React.js component.
Isabella Chen brings all that tech jargon to life in layman’s terms:
‘‘With Eventing, people talk to our bot and specify their interests. When enough people have specified the same interest, an event is spontaneously created for them.’’
So whilst the app itself is designed to be spontaneous, the team had to be the opposite. They needed to stick to the plan and meet the deadline.
Tip 4: take risks 🔥
Before Jon signed up to the Hackathon, he had a small idea of what to build:
‘‘Originally, I just wanted to join another group and work on someone else’s idea. But I ended up pitching at my first hackathon! I had an idea I wanted to do something with public screens but I didn’t know what. A day before the event, I heard about the ‘Carpenter experiment.’ I took a risk and pitched. ’’
What inspired Jon’s idea?
‘‘I saw an exciting experiment with Pixar co-founder Loren Carpenter in the early 90s, a simple version of audience’s playing an interactive game of Pong. We wanted to take this same experiment and build it into a new game.’’
The idea wasn’t original, it’s been around for years, but what idea is truly original? Jon’s risk paid off and MobPong came 2nd.
‘‘Our project was simpler than some of the others that were pitched, just a basic game. But during the pitch, we explained the story of the original experiment and our vision. Everyone played. Just like with Carpenter’s game, there was the same amazing atmosphere in the room.’’
MobPong uses React.js on the front and back-end. Koa and Socket.io allow the real time, quick communication between the front-end and back-end.
‘‘We’ve tested 40 players simultaneously and it works. We have to try MobPong in a big square one day. We’re building a smaller version at the moment. Maybe that’s life, a series of cool, small moments.’’
So what’s next?
A hackathon is often just the beginning. For teams that go on to participate in the Global Challenge, the winners will be announced on the 14th September. Prizes will be awarded to those who create the best solutions to provide online connections with offline experiences. And in the meantime:
Coming third, Eventing are going to pause on a project too wild to tame. ‘‘We should have kept it simpler’’ was their lesson learned.
With MobPong, you can only play one game at a time right now. However, as Jon says:
“We need to scale and implement the ‘new rooms’ feature. Let’s say you’re the admin of the hospital. On the waiting room screen, you put the webpage, create a new room; Port Vell Maternity Wing. Then patients can go to that room and play each other. This feature will take 2 days to build on Socket.io. Once that feature is built, we’ll build a simple webpage to publicise it. No app stores, just a browser. Easy.”
Adapting an existing idea with a simple approach has worked out well.
The winners told us:
“At the moment there’s a lot to do for Grids Ninja. We’re taking care of Twitch, YouTube and Facebook Live. You can embed public streams. You’ll make your grid, put it on Reddit. You can currently chat with every person in each grid and add an audio option to speak. So we’re working on that. We’re going through the code, fixing problems, like resizing and refreshing.”
Sounds like the winning team will be busy.
Join the Facebook group here: https://www.facebook.com/groups/devcommunitychallenge2018/
Check back to see the winners on September 15th: https://devcommunitychallenge.devpost.com/updates