Project Overview
The goal of the project was to transfer the knowledge from an old documentation system into a modern web app that could run well on a mobile device. It's purpose is to serve as a hub to quickly look up information and to manage documents.
The old documentation was kept as a larger collection of Word documents. These had to be injected into the new application while keeping the formatting and hierarchy.
Project objectives
An automated way to inject the existing documentation that was a large collection of nested folders of word documents. In particular to keep the hierarchy and existing formatting in tact.
Document management
Document editing
Speedy full-text search
Authentication that allows only certain domains to be able to register.
Role-based access control (RBAC)
Fully responsive design & progressive web application capability (PWA)
Solutions
Initial document injection
This needed to be an easy one-time solution, as it was only needed at one point of the project. I created a form for the client where she could easily dump a folder that contains the entire documentation.
The rest was achieved through some custom scripts that rebuild the folder tree hierarchy. Once that is achieved, the folders were filled up at the right position using a parser that allowed for the formatting to be maintained.
As this part was of one-time use, it had a very functional design.
Image showing a test upload. The documentation itself was much larger.
Document management & editing
Simple, yet functional document management. Be able to easily create or delete documents and folders when necessary.
Creation of a new document
Document editing had to resemble what users were used to from their previous editing suite: Microsoft Word.
In order to keep the project lean we quickly settled on a subset of the functionality of Word.
A document in edit mode
Full-text search
For the full-text search I chose a UI-design most people are accustomed to. I coupled it with immediate search feedback - every character triggers a refresh of the results - and clear highlighting of where the word was found inside the document.
On the database side I used clever indexing to allow for an efficient search inside the PostgreSQL (Supabase) database. I also made sure that caching was used as much as possible to reduce the strain on the database.
Full-text search a result highlighting
Authentication & Role-based access
The authentication system allows the client to clearly decide, who can register and who can't. This is done by creating a white-list of domains that can register.
In addition, users had to verify their e-mail address after initial registration in order to be given access to the application.
Users whose domain is blacklisted are given a way to contact the client and ask for white-listing.
Fully responsive design and PWA
As a compromise between developing a native application and a lean project the client decided on using a PWA approach. Therefore the whole application, from the ground up, was designed with mainly mobile use in mind.
As a cherry on top, I added a dark mode. Because everything is better with a dark mode.
The app running as a PWA in light (and dark) mode
4 likes · 153 views · Mar 19, 2025
Modern documentation platform transforming Word docs into web content with responsive PWA design, document management, fast search, customised authentication.
Timeline
Oct 24, 2024 - Dec 4, 2024
Tags
What the client had to say
Moritz Drescher's technical skills, problem-solving abilities, communication skills and dedication to delivering high-quality solutions are outstanding. He is extremely dedicated and professional. Thank you for your excellent work!
Caroline Isner
Dec 3, 2024, Client