Task

Creation of a web application for filling out document forms with interactive editing capabilities and export to various formats. The application must support data selection from JSON and automatic identification of editable fields. It was necessary to develop an intuitive interface that would allow users to easily upload document formats and select the necessary data for filling. The task involved not only creating functionality but also ensuring high performance and usability.

Solution

The LiveForms application was developed, allowing users to upload form files in DOCX format and fill them with data from JSON. The application provides the ability to edit fields and choose fonts, as well as export completed documents to PDF and DOCX. Users can easily manage the filling process and customize the appearance of the document according to their preferences. This solution significantly simplified document handling, making the process faster and more efficient.

Architecture and stack

The application is built on the following technologies:

• Frontend: React 18 with TypeScript, Vite, Tailwind CSS, mammoth.js for converting DOCX to HTML, html2pdf.js for exporting to PDF, React Hook Form for managing form state. These technologies ensure high performance and responsiveness of the interface.
• Backend: NestJS with TypeScript, docxtemplater for generating DOCX, pdf-lib for generating PDF. This stack allows for efficient request handling and document generation on the server side.

Key features

• ✅ Automatic identification of editable fields from DOCX
• ✅ Data selection from JSON for auto-filling
• ✅ Font selection (print/handwritten)
• ✅ Real-time field editing
• ✅ Export to PDF
• ✅ Export to DOCX using placeholders
• ✅ Print form These features make the application a versatile tool for working with documents, allowing users to easily adapt them to their needs.

Result

The LiveForms application successfully implements the ability to fill out forms, significantly simplifying the document handling process. Users can quickly and conveniently fill out documents and export them in the formats they need. This solution has proven to be in demand and received positive feedback from users who appreciated its functionality and convenience.

What I would improve

In the future, it is planned to expand the application's functionality by adding the ability to automatically identify fields from uploaded DOCX, save form configurations, support multiple forms, and integrate a database for storing user data. These improvements will help make the application even more useful and convenient for users, increasing its popularity in the market.