Workflow management tool

March 2015 - August 2017

A screenshot of the illustration screen, showing a search form with different inputs for season, catalog, trip number, etc. Underneath is a trip teaser with general information and two rows of images found for this trip: print images and online images. There are also different functions to filter trips, add images or select a different variation of this trip.
A screenshot of the illustration screen, showing a search for a specific trip number.

About the project

The company I worked for at that time was producing travel catalogs including text, illustration, print and online-publishing. To manage and automate all the necessary workflows, we built this tool.

Scope

I took over responsibility for the frontend, after it was developed by two other people. From there I implemented all further features and optimizations with occasional support from another frontend developer. The features include different catalog status features as well as an illustration and cropping tool.

The backend was built by two remote developers. I worked closely together with them and the project manager via daily video chats and Jira.

Architecture

The backend is based on the PHP framework Laravel and the frontend is built with AngularJS. It communicates with the backend via a REST API.

The app follows the Model-View-Controller pattern and makes use of other AngularJS principles like factories for data fetching and logic as well as filters and directives for custom UI elements and functionality. For RESTful interactions the module ngResource is used. A major part of the app consists of large data tables which are built with the ui-grid (former ng-grid) module.

Challenges

Features include:

  • Manage (view, create, edit, delete, search, sort and filter) catalog data, editions, trips, schedules, tasks and more.
  • Assign tasks to people and regions.
  • Check the current progress of tasks and their due dates.
  • Calculate the distribution of content to differently sized print sheets.
  • Generate and download status reports.
  • Crop and assign images and image types to illustrate the online versions of the catalogs.

Tech Stack

  • AngularJS
  • REST API