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.

Document management & editing

Simple, yet functional document management. Be able to easily create or delete documents and folders when necessary.

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.

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.

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.