Press

• The Verge: pre-puzzle solve
• The Verge: post-puzzle solve
• 9to5Google
• Android Police
• Gizmodo
• Android Central
• Pocket-Lint

Overview

The goal:

• Create a collaborative application where a player can solve a series of visual graph theory puzzles and cryptic questions in order to complete levels.
• Each level correlated with a particular shape, and after a level was completed, the player could choose to end the game and add that level's shape to the "signal wall," which was a large grid.
• Once each shape on the signal wall was unlocked, the wall animated to reveal a secret message: the dates for this year's conference (one that was unfortunately cancelled for reasons you probably know).

Screengrabs

Timelapse of date reveal:

Last level gameplay example:

Date reveal and panning around canvas:

Final date:

Challenges and solutions

1. Challenge: Security - This app had to be unhackable!

   As our players were almost entirely developers, this was no easy task since we had to think through all the possible backdoors that a developer might take in order to hack it. Basically, *nothing* could be discoverable on the front-end, especially by an entire group of engineers who were trying to outsmart Google.

   Solution: We used Firestore to store any backend data, and we used Firebase Cloud Functions to retrieve this data if the player's answer or solution was correct. Part of our game was solving visual puzzles, so even the solutions of those had to be hidden and could not be validated on the front-end. In addition, we had strict Firebase Security Rules.

   
   

2. Challenge: State management

   Our team of 6 developers decided to use the newly added Preact Hooks, a new method of managing state in React apps, which most of us were not familiar with initially. Not understanding the complexities at the time created some funky re-rendering and memory leaks, which we were luckily able to fix.

   Solution: For any heavy state changes, we replaced Hooks with MobX, a state management library that more of us were familiar with and requires less boilerplate than something like Redux. We also removed any active event listeners whenever the component was unmounted.

   
   

3. Challenge: High number of users

   We didn't have the luxury of time for this project, yet we had to still ensure that thousands of users (if not more) would be able to play this game, especially on the first day - both in terms of the load on the app's server and the Cloud Functions that were being called each time a user tried to answer a puzzle.

   Solution: Load testing using Loadster and increasing a variety of quotas on App Engine and Firebase.

   
   

4. Challenge: Process

   We had to be scrappy with this project because of the timeline. We only had a few weeks to put together a fully-functioning, secure application, we had many developers collaborating at a time, and managing a complex project with multiple stakeholders was a challenge in itself.

   Solutions:

   • Regularly merge in updates. Due to the speed we were working at, and because of the number of developers coding on this, we always had many code reviews open. We focused on having more senior developers review code regularly to unblock others.
   • Communicate through a project-specific Slack channel and do daily standup video calls.
   • Use Jira for project management and use Netlify or App Engine staging links for QA.

Credits

It took a lot of folks and groups to make this project happen:

• Development: Left Field Labs

  • Developers: Caliandra Harmon, Tom Slezakowski, Keren Megory-Cohen, Matt Masurka, Mikey Wagner, Daniel Hirsch
  • Producer: Elisha Kersey
  • QA: Altheria Weaver
• Design: Instrument
• Google Developer Marketing Team