Maritime and coastal services

Mobile - MVP

Build a mobile application for the storm surge barriers in Nieuwpoort (also known as tidal barriers) based on an in-house prototype

The Agency for Maritime and Coastal Services (AMDK) is the Flemish government agency responsible for ensuring smooth and efficient shipping to and from ports in Flanders and coastal protection. Their responsibilities also include the construction and maintenance of coastal defences. They asked us to build a mobile application for the storm surge barriers in Nieuwpoort (also known as tidal barriers) based on an in-house prototype.

Our approach

The challenge

The application visualises monitoring data of the storm surge barrier in Nieuwpoort and the status of its components. It shows whether shipping is possible through the barrier’s construction site (and in the future through the barrier itself), and displays relevant parameters such as wind speed, the wave height and currents. It also communicates planned closures to shipping through push notifications. This allows boat owners, captains, fishers, and other interested parties to stay informed and safe.

The other part of the challenge consisted of getting AMDK up to speed with all the new front-end technologies. The agency wanted to update their front-end development, so they looked to Sweet Mustard for some expertise and knowledge sharing.

Our approach

From prototype to POC to MVP

We started by evaluating the technological possibilities based on AMDK’s prototype, made by the agency’s in-house .NET developers. This meant we did not need a Discovery Bootcamp, unlike most of our other projects. We then translated this prototype into a proof of concept (POC) to align the customer’s demands and expectations.

The agency was thrilled with our first analysis sprint (sprint 0), so we started developing at sprint 1. The Minimum Viable Product (MVP) launched with a complete feature set, except for push notifications, which were added two weeks later in a next Agile sprint.

Tile-based modularity

We had to keep in mind that modularity and expandability were key, since the agency wanted to add more features further down the road. The application consists of tiles, and we made sure that the agency and its developers could reuse the way we visualised maritime data through graphs and maps. In the few months since the application’s go-live, we have also added additional features like offline functionality and a detailed view (both graph and data) of the wave height.

Technology

We worked with React Native for both iOS and Android, which allowed us to achieve native performance when it comes to robustness and speed while only using one codebase. This meant we could keep native structures specific to one of the platforms, for example, the alignment of menu items. Working with one codebase also ensured that we completed this project in just three months. Like most of our projects, we collaborated with Noest for the .NET development aspects.

Looking back

This was an exceptionally interesting project for our developers, since it is close to their daily lives. Most of them live near Nieuwpoort and regularly encounter the storm surge barrier on their walks. In an increasingly digital world, it is nice to see a tangible result.

We previously helped AMDK by building a database of wreckages along the Flemish coast, and we are currently starting a new project around the visualization of the coastal defense. We’re excited to have clients like AMDK on board, because they confirm our vision of continued co-creation.