Royal Enfield: Create your own Bike - Technical Case Study

Motoverse 2024

Royal Enfield: Create your own Bike was an interactive experience displayed at one of the largest events across India held for bikers, Motoverse, hosted by Royal Enfield. Where people from all walks of life come together with a common passion for biking.

Objective

Create an interactive experience to:

1. Capture details that would help Royal Enfield deliver better products.
2. Host the experience locally, for on-site screens, and online for in-event iPads
3. Store the data locally for on-site screens, and online for in-event iPads

Tech Stack

We decided to use Next.js, and NextUI to build the application.

There was going to be no internet on the site, and the experience would be operated by people without techincal know-how. So, something plug-and-play would have been ideal.

We experiemented with the idea of an electron application that would allow me to run the application offline, however that would alienate iPads and would not be deployable online. We would have needed to maintain two seperate repositories with the same codebase, one that used Electron to build an application, and the other without Electron that would be deployed to Vercel. That would add too much overhead. So, the idea was rejected.

We did consider building it in plain HTML/CSS initally, but had to let the idea go due to time contraints, although it would have allowed us to ‘build once, deploy everywhere’, given that in most cases, you can simply double-click the .html file to open it in the browser, regardless of the system.

We ended up using static exports using output: 'export' for the offline deployments, and would simply remove that flag when pushing online.

Storage Constraints

During our inital attempts at architecting the application, we wanted the storage to be part of the electron application, and as such tried to incorporate Pocketbase and then a local Supabase deployment using Docker. But since we dropped the electron application, we also had to find a different solution to the storage problem. The answer came in the form of a much simpler, ready to use solution - the LocalStorage Browser API. That, and a MongoDB Atlas cluster for online data storage.

This reduced almost all the moving parts and points of faliure when deploying on-site, while providing stability and speed. LocalStorage in the browsers themselves are implemented using SQLite, so this was very close to the Pocketbase solution we were looking at earlier.

The Execution

After everything was said and done, the online deployment was a one-click process thanks to Vercel. The offline deployment did need us to copy the files over initally, but afterwards it was simply a matter of starting a server pointed at the corrent directory, a breeze thanks to Simple Web Server. And gathering data was handled by a small script that gathered all the data from local storage and downloaded it as a json file, which we then cleaned up manually and converted to CSV for analysis.