Document Migration Platform

Moritz Drescher

Verified

Review

Fullstack Engineer

Software Engineer

Web Developer

Next.js

React

Supabase

Web Development

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 document.

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

Like this project

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

Posted Mar 19, 2025

Modern documentation platform transforming Word docs into web content with responsive PWA design, document management, fast search, customised authentication.

Likes

Views

Timeline

Oct 24, 2024 - Dec 4, 2024