Document Editor

Drag and Drop form creation tool

client-projectreactreduxdrag-n-droprails-in-reacthierarchical-datacypress

Cluttered paper forms are tedious to fill out. The document editor web application allows to design, layout, and generate digital forms. Drag and drop makes creating forms simple.

Challenge

Many companies still deal with a lot of paperwork. German companies, especially. And it's not just informational material. Large paper forms are used as surveys or questionnaires. There are already form builders out there, but many of those lack a well-structured format to build upon. So when Dampsoft asked me to develop a tool that would allow them to digitalize a lot of documents very quickly, I knew that was a great challenge.

Solution

I created a document editor. The editor allows to create complex documents in just minutes. It features drag and drop to put text and images into the right place. Form elements are used to capture user input. Single-choice and multiple-choice elements allow nesting further elements. That way, nested elements are only shown, once a particular answer has been selected. The editor supports multiple languages and creates a well-structured JSON description of the whole document in the end.

My role

The document editor was a great project and Dampsoft an excellent client. I developed the app from scratch using React / Redux, embedded in a Rails app. After just 10 days, the first few people on the team started to create documents. Soon, the editor was widely used and a lot of user feedback arrived. That meant I was able to iterate quickly and to improve design, browser compatibility and performance. There was even time for me to write end-to-end-tests with cypress.