Revved Up Performance: Building a Blazing-Fast, Resilient Web App for Indy's Biggest Fundraiser

Every web application project has unique requirements, especially when considering apps that are focused on annual events, such as fundraisers.

As we planned and built the Rev event application, we knew we had to create a resilient, fast web app that would streamline both client and attendee experiences, without adding the friction of a separate app download.

What is Rev?

Rev, Indiana University Health's largest annual fundraiser, is hosted at Indiana’s famous Indianapolis Motor Speedway. It’s a night full of live entertainment, cuisine, and red carpet interviews — a racing-themed celebration at an iconic venue. Participants need a singular place where they can see what’s coming up, learn about restaurant vendors, locate their surroundings, be notified when events are due to begin, and create a list of all the things they want to check out.

Why we created the mobile-first web application for this event

To provide event information, Rev previously maintained iOS and Android apps in addition to their main website. However, this disjointed approach brought challenges:

• Time-consuming content updates: Changes to both app and website information required separate authoring.

• Higher maintenance costs: Maintenance across multiple platforms led to additional annual fees.

• Limited user adoption: A separate app created more friction for event attendees, requiring a separate download.

When Rev tasked us with creating a new app experience, we partnered closely with their team to design a long-lasting solution that would serve a broader range of participants for years to come.

Thoughtful planning

We built the main revindy.org website on Craft CMS, where Rev can market the experience leading up to the event. Here, users can find information about the chefs, the entertainment, sponsor details, and more. This setup enabled us to create a new app experience and source the content from their CMS to the app directly. This meant that once the client entered the content into the marketing site CMS, it automatically appeared in the event app as well.

Creating the event app as a mobile-first web application also meant there would be a number of benefits for participants — namely that they would not need to install any new software. Once they scanned a QR code at the event, they would immediately be taken to the application where they could find event details, sign up for SMS notifications, and “favorite” vendors and experiences they were interested in visiting.

The need for resiliency and performance

The web app needed to be able to handle the massive traffic spike during the event itself. It was one thing to create something that's easier to install and for the client to maintain using their existing CMS. But if the app couldn't hold up to the heavy traffic, those achievements would be moot. 

To make the app resilient and performant, we focused on three things:

1) Implement full-page static caching.

Once the event begins, vendor, event, and sponsor content rarely changes, so we knew using static page caching would be a significant performance boost for all users. Rather than every request being routed to the CMS, the database, and various controllers, we had have the server immediately send back static HTML files. This frees up a massive amount of server resources as Nginx can handle those requests directly.

2) Handle event and vendor searching on the client side.

Thanks to static caching, every user can instantly see the full list of vendors and events without taxing the server. These lists are also searchable. For some applications, too many simultaneous searches can overtax the server and cause a bottleneck. We built a JavaScript workaround that ensures the servers are never overwhelmed, and even users in low-connectivity or network-saturated areas still have an instantaneous search.

3) Use localStorage for favoriting.

Users also needed the ability to “favorite” events and vendors. However, requiring user accounts would be network-prohibitive and may deter some individuals who aren’t interested in going through a sign-up/log-in flow. We were able to address both issues by utilizing localStorage, a simple, on-device web storage system. As most users would be on a single mobile device throughout the night, we were able to store their “favorited” vendors and events without any type of authentication system.

These decisions ensured we were moving network-bound interactions back to the user’s device. This meant an area of poor connectivity or heavy traffic wouldn’t be a factor for users. It also meant we could ensure a modest server setup would be well-provisioned for the event.

Success for thousands of users

Not only did we achieve our goal of creating a performant web application for our client, but they can use this same configuration for years to come without reinventing the wheel each year. 

In addition to seeing a maximum CPU spike of only 8% for the entire event, the other results were outstanding.