Deployment Descriptors Editor
This modern and sleek UI, born during a three-day hack days project, makes it easy to manage extensive JSON configurations.
About the Client
Since joining, I have been part of a team of 6 people responsible for building Cawemo (short for Camunda Web Modeler). Imagine it like a combination of GitHub and Visio: a place in the cloud to create, manage, and design business processes. Through plugins and connections with other Camunda products, these processes can then be integrated with the automated workflow engine.
During the latest installment of hack days at Camunda, I teamed up with a colleague who had the great idea of making the complicated and unintuitive configuration of the Camunda BPMN Workflow Engine available through a UI. Currently, the configuration can only be done in YAML files on the server, with poor documentation without further examples.
I created a design from scratch based on Camunda's Corporate Design. The goal was to provide a clean, simple, self-explanatory, and functional UI that assisted the user but also didn't stand in the way.
My framework of choice was React without any other libraries. I stuck to React's state management and used only functional components. The frontend communicates through REST APIs with a backend, like making changes or reading the current configuration. My colleague built the Java backend, providing me with JSON that the front end could consume and display.
While I finished the UI on day one, the interesting part started when I implemented relations between different engine properties. I also had to take care of different input types, validation, default values, etc. Overall, the final result turned out better than I expected and got featured during our final presentation and, later on, even at CamundaCon.