More posts by Ben Hall

This past Thursday, Intelliware held a day long hackathon to experiment with the use of the React UI library to do something interesting with movie data. We had about 20 developers participating in various capacities, organized into 4 teams.  Snacks were consumed, code was written, and winners were crowned.

Use React

Across Intelliware’s projects, we continue to see Angular as the de-facto choice for web user interfaces. However, a few forces are at play to make us look at React more closely. Angular is a significantly heavy-weight framework. React is a light-weight framework developed by Facebook, which gives confidence that it will be supported for a while. And last year, Facebook addressed licensing concerns that might have scared off some developers. Consequently, more of our clients have become interested in ReactJS.

Across the hackathon teams, everyone used ReactJS to build a web UI. However, the teams also tackled React Native for mobile development and React VR for an immersive Virtual Reality experience. For a number of our developers, this hackathon was their first experience with React. Our post-hackathon survey was very positive towards React, with over 90% of developers saying Intelliware should try to adopt React on project work.

About Movies

All of the teams used IMDB data (such as this) to create applications about movies.  The teams were organized Survivor-style and were encouraged to tackle a problem of particular interest to them.

Team Borneo created an app combining Twitter with IMDB. Given a movie, they visualized the comments from Twitter about that movie, showing all of the comments on a timeline, graphing the volume.

Team Outback created an app that they called IMDB Derby to create a social interaction feature for IMDB. A movie fan could pick their favourite movies over the course of a year. Interestingly, they used React VR to create an immersive experience to view details about a movie, including the posters and reviews.

Team Africa won the Judges Choice creating a movie trivia game, MovieHQ. They had a good use of QR codes to get the audience engaged in the demo. They used Pinterest’s React components for the UI. On the backend, they used Express and Mongo to serve up random questions about movies from 1970 to 2017.

This hackathon added a People’s Choice award which was won by Team Marquesas. They created FlickSwipe, a movie recommendation platform with two components. The first was a native app to let you quickly decide whether or not you like a movie using a Tinder-like UX. The second part was a web-app showing suggested movies and allowing the user to understand the rating of each movie. The team used Firebase, React Native and ReactJS.

With a Twist

For this hackathon, we added a “gamification” aspect that pitted teams directly against each other during the day. At three points during the day, the teams could play a card against another team. The cards were:

  1. Not a named resource. “Choose one team member from another team to join your team. Your new team member will share in the winnings of your team. Effect is immediate, but last-played card takes effect for a given person.”
  2. Demo day. “Get a 15 minute demo from another team of their work. Includes code walkthrough. Demo happens before Furlough or Near Shore.”
  3. Furlough. “Choose another team. That team stops coding for 15 minutes. They must walk away from their computers for the duration. If your team is targeted by multiple cards, Furlough happens before Near Shore.”
  4. Near shore. “Choose another team. That team splits into two halves. They spend the next hour working separately in two groups. They can communicate, just not in person. Team sits together again after the hour.”

This head-to-head aspect added chaos and stress to the hackathon, but our post-hackathon survey indicates that it was mostly well received (54% liking the idea, with the reminder “kinda” liking the idea, and no one totally against it.)

Based on developer feedback, we will definitely be doing more hackathons, and we will probably refine the head-to-head gamification.

More important, we’ll ensure that React is considered as a first order, front-end architectural option for any of our future projects.