---
title: Commtrac | De Voorhoede
description: >-
  Our solution for managing shipping terminals in the browser: visual, realtime,
  and modular
language: English
url: 'https://www.voorhoede.nl/en/cases/commtrac/'
---

Case study

# Commtrac

## Case summary

### Expertises

Development

### Technologies

AngularJS and D3.js

### Deliverables

Web app

## Manage ship terminals worldwide in a web browser

Commtrac is a software package by DBIS that is used to manage shipping terminals. To be specific: terminals that process bulk and general cargo. Think of coal, corn, iron ore, automobiles, paper bales, et cetera.

### The challenge: from Windows desktop to web

With Commtrac, planning for cargo ships is organised, as well as loading, unloading and storage of cargo at terminals. It also includes a dashboard that displays various stats and graphs.

The existing application had become outdated and was only available for Windows. Up until then, it had grown organically and consisted mostly of input forms built on top of large data tables. This impeded maintenance and development of new features. The user interface also suffered: the learning curve for new employees and its ease of use were not ideal.

DBIS wished to renew the application. Our assignment was to implement a simplified application structure. This way, the unique workflow for every employee would be better supported with **clear overviews and intuitive input controls**.

![Overview of the cargo and containers](https://www.datocms-assets.com/6524/1539939224-commtrac-cargo.jpg)

### The solution: visual and modular with a web application

By leaving the Windows desktop environment behind and moving towards a web application, we immediately met a couple of requirements:

* All data is stored centrally
* Employees don’t need to install software on their work station and will always be **up to date with the latest version**
* The application can be used on a variety of devices, including mobile

### The most important improvements of the new Commtrac:

#### Strongly visually oriented interface

The user interface has been revamped and all screens have been redesigned. The loading and unloading of ships, for instance, has been graphically visualised. This way, the operator has a good view on what cargo is located anywhere in the ship during unloading. When loading, the operator can drag cargo directly from a work list into the cargo hold of the ship.

#### Complex relations managed smoothly

The basis of our web application is AngularJS. A lot of forms are present in the application that can be very expansive and complicated. As an example: different input fields can have various limiting relationships. This means that when you have entered something in one input field, this might influence the options you have in another field. These **rapidly evolving complex relationships can be managed well** using AngularJS.

#### Scalability and customisation

The application is built entirely out of components. A component is a small part with its own logic and layout, that can be placed in a new screen independently of other components. Together they are able to form a new component or a screen that didn’t exist before.

This means that DBIS can easily build new forms and screens themselves. Now Commtrac can be**adapted to the wants and needs of any terminal**.

![Dashboard showing an overview of the operations](https://www.datocms-assets.com/6524/1539939240-commtrac-dashboard.jpg)

* [← How we helped others](/en/cases.md)
* [PostNL →](/en/cases/stamp-postnl-design-system.md)

## Let's discuss what we can do

Nena de Clercq

Operations Director

<post@voorhoede.nl>

Don't fill this out if you're human:My name isMy business isYou can email me atYou can call me atMy question or project isGet in touch

## Subscribe to our newsletter

Don't fill this out if you're human

My first name is

You can email me at

Yes, I give permission to process my name and e-mail address in order to receive the newsletter of De Voorhoede

Subscribe

[Return to top](#top)