Deployment Descriptors Editor

A universal, lightweight, and easy-to-use JavaScript library that helps you translate websites and web applications.

At Camunda, the engineering teams organize a summer hack days event every year, which lasts for three days. During these days, individual developers, designers, and other interested parties gather in small teams to try out new ideas, mostly related to Camunda's products. The goal of the event is to foster innovation, experiment with new ideas, and of course, have fun coding and trying out things.

During the latest installment of the hack days, I teamed up with a colleague from the US who had the great idea of making the complicated and unintuitive configuration of the Camunda BPMN Workflow Engine available through a UI. Right now, the configuration can only be done in YAML files on the server, with poor documentation without any 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 doesn't stand in the way.

My framework of choice was React.js 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 was responsible for the Java backend, providing me with some JSON I could consume and display.

While I finished the UI on day one, the interesting part started when I had to implement 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 through CamundaCon.