Oerol Festival

Oerol

The annual theater, art and music festival rooted deep in the natural reserves of Terschelling.

Purpose

Oerol has been a consistent client of ours over the years. But as they keep getting bigger and bigger, new challenges arise. For one, they were expanding the amount of stages they offered on the island of Terschelling. Another problem was that they struggled with mobile and internet traffic on the island during the festival. To fight these challenges, they commissioned a mobile experience for customers to help navigate Terschelling during the festival for 2018.

Responsibilities

The application was built with React Native. The idea was that we'd just need a few webviews to handle static content, and we can inject JavaScript from the app into the web page we're pulling to do a few things, like remove the navigation menus, kill links that go outside the app, and filter out content beyond a certain date. So for this project, regardless of the app, we'd need to touch both the web platform and the app itself.

First off the goal was to create a new React Native app. Compared to Ben Mobile and other maintenance work I'd done for companies like Houthoff and Ajax, I got to use Expo, which has a fantastic hot reload system. This made development significantly faster and easier to do. The React Native app was also very quick to set up, as well as the bottom navigation menu, which would contain the Map view, Schedule view, and Content view.

The next step was to get the Map working. Thankfully Google API made this quite smooth, including directions, pins, and more. We had concrete data that we'd cache inside of a Redux Persist layer, and there were plans to have hotspot portals at the festival, so while we were gunning for an offline-only experience, we took some shortcuts to reach the deadline in time.

Next came the schedule view. This was pretty simple, but as mentioned earlier required me to dive into the web page content and mark stuff with data attributes, so that when I inject JavaScript code from the webview into the web page, I could force certain content to not render using a simple document query selector fetch. This was similar to what I did in Ajax's fan app.

The project wasn't overly complex and took just shy of 3 months to complete. During the festival, it seemed like internet connectivity remained an issue, but outside of that the app helped people throughout their experience at the Oerol festival.