Hella Amazing Race

Real-time social racing application with photo recognition.

About Hella Amazing Race

What's better than the Amazing Race - a Hella Amazing Race. Hella Amazing Race is our interpretation of how races should be conducted in unfamiliar parts of town; Races should include content awareness for it's path and surroundings.

Our app allows users to create races by picking specific destinations by checkpoints utilizing Google Places and allows users to compete amongst themselves real-time. In order to make things interesting, the application requires the racers two forms of checkpoint validations:

  1. Geolocation vicinity from destinations
  2. Photo Recognition based on desired input
Through the use of Google Cloudvision and Places, the application randomly chooses a point of interest or object for the racers to take a picture for photo validation.

Tech Stack: MongoDb, Express, React, Node.js
Web Technologies: React Router, Bluebird, Google Maps, Pubnub, WebRTC, Material UI
Api: Google Maps, Google Cloudvision, Google Places, Facebook

  • Checkpoint Dial
  • Checkpoint Photo Validation
  • Map Race
  • Map Race Checkpoint Validation
  • Race Create

The Concept

Goal

As a legacy project, we decided to enhance the current code based to accept multiple racers and make checkpoints more meaning by incorporating objectives.

User Cases

  • I expect to be able to create races and start races.
  • I expect to be able to race against other users simultaneously.
  • I expect to be able race using my cellphone.
  • I expect to be able to take pictures of objectives and get some sort of validation that the objective has been met.

System Requirements

  • Port pre-existing code to mobile by making it responsive to device's screen size via material ui components
  • Pass image blob to server for further image analysis by Google Cloudvision
  • Increase the number of subscribers for each race event via Pubnub

Technical Challenges

You'll always run into unexpected problems with any legacy project. For one, the legacy code did not enable multiple users to join a race. Another example was the fact that the legacy code was built to be a web app with no responsive designs to scale to mobile resolutions. However, the one that takes the cake, that is still left incomplete for this project, is the storage of cached data.

The application handled states locally for all components which became problematic whenever views were switched during a race to access the checkpoint component. Without the incorporation of Redux or storing all functions in its root container, it became impossible to complete the project.

All in all, it was a good experience to development and touch base on new technologies that I've never encountered (i.e, Google Cloudvision and WebRTC)