Watson Adventures Scavenger Hunts - ReactJS Web App

Background

Watson Adventures is a company that specializes in fun team-building exercises for small and large groups. They offer their services to both the general public, and corporate clients like Amazon and Google.

In 2018, I helped build their new website. After the success of their new website, I helped rebuild their mobile web app from the ground up.

The Challenge

Watson’s original web app was starting to show signs of age. Originally built using jQuery and jQuery-UI, the web app was becoming difficult to build in new, more modern features to keep players interested (and prevent them from cheating).  On the back-end, the database houses thousands of scavenger hunt templates dating back years that also needed to be kept in tact.

Another unique challenge to the app was that players are often outside or on museums where internet connections aren’t reliable. Watson didn’t want to overburden players with requiring them to download an app, so an offline mode was also required.

Solutions Applied

The Data & API

We needed to work with an existing live database to ensure a smooth transition. After weighing a few options, we chose Django, so we could map existing tables to the Django ORM, and extend them as needed. Then, using Django Rest Framework, we were able to recreate the original API server fairly easily, keeping the same paths, and building out new routes as features were needed.

One of the first new features we added was the ability for hosts (Watson works that ran the games) the ability to monitor teams and assign points from the app. Using JSON web tokens, we created a simple authentication to manage live games.

Offline Mode

For the front-end, we went with ReactJS- more specifically, GatsbyJS. At the time, Gatsby had great support for creating static React websites. This allowed us to create an app that required downloading only some initial data via the API to allow players to continue to use the app when they were in spotty or dead zones. The app routinely polls and tests for an internet connection. If it determines a connection can be established, it syncs back to the main server to keep track of progress with the rest of the team.

Cheating

One of the biggest issues with the previous app was cheating. Especially hen games were played by other engineering teams from Amazon and Google. Answers to everything could simply be inspected in the HTML. To combat this, we built in basic encryption to the data in the API, and then decrypted it in React. So even if a user chooses to peak at the data, they wont be able to see the actual answers.

Covid-19

We started building the app in late 2019, and and finished the MVP in early 2020, right as Covid-19 was starting to surface. Up to this point, the app was only designed to be used outdoors and on location. Because of the flexibility with how we built the app, we were able to pivot the app from being used in the outdoors, to being a companion app player can use in virtual team building exercises over Zoom.

Accessibility

As more and more games switched to virtual and a paperless way of playing, accessibility became a primary focus for the app. We preformed several internal audits, and even partnered with Cornell University to audit the web app for accessibility concerns. After months of testing, we were able to make the web app for desktop and mobile meet WCAG 2.1 standards.