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, which allows to create complex documents in just minutes. It features drag and drop to put text and images into the right places. Form elements are configured to capture user input. Single-choice and multiple-choice elements allow conditional nesting. Nested elements are only shown, once a particular answer has been selected, which allows for interactivity when someone fills out the form. The editor supports multiple languages and creates a well-structured JSON description of the whole document in the end. That means the document can be rendered in html, PDF, in a native tablet app, and more.

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, through continuous feedback loops, 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.