tdo95 / brief-docx

📄 Document formatting tool that allows you to create word documents from templates

Brief Docx

Easily create formatted Word Documents!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Features
   • How Its Made
2. Getting Started
   • Installation
   • Usage
3. Optimizations
   • Future Improvements
   • Lessons Learned
4. Roadmap
5. Contact
6. Acknowledgments

About The Project

Brief Docx is a document formating tool that allows you to create and edit document in real time. Documents are generated from a template and populated based on the template structure.

Features

• Sign up for account and view document catalog
• Add and remove summary information
• Move summary information to different sections
• Hyperlink references and sources
• Automatically formats text to appropriate font, size, and spacing in document
• Duplication Detection: warn if summary has already been entered
• Text cleaning: remove filler text in brackets/parenthesis
• Saves changes within database - revisit documents at any time

How Its Made

The application is built with the following technologies:

Libraries

• Material UI
• React Load Spinner
• React PDF
• File Saver
• History
• Passport
• Docx Template
• Docx PDF
• Bycrypt

Getting Started

If you would like to use Brief Docx online, visit #.

To get a local copy of the application up and running follow these simple example steps.

Installation

Follow the steps below to set up the application locally.

1. Clone the repo

   git clone #

2. Install NPM packages in the root folder and within the client folder

   npm install

3. Create a tmp folder at the root

   /tmp 

Usage

1. To start the server, run the following command

    npm run dev  

2. Navigate to the application using the url below

   "localhost:3000"

Optimizations

• Allow users to create/upload their own document templates
  • This would require third party file storage. Users can fill out a form to define the variables within the template. The values within the form can be use to dynamically create the form component needed to edit a document generated from the template.
• Incorporate grammerly or some similar api for writing assistance
• Add support for document sharing on various social medias and through email

Future Improvements

• There is some latency loading the pdf in the display modal on dashboard. The reasoning for this is 3-fold

  1. I am generating the pdf on the server which takes time (on avg 1,500ms)
  2. I am then reading the return pdf file as URL so it it can be passed into react-pdf’s document viewer. This is an asynchronous process and takes some time.
  3. I am using the same document viewer to render multiple different files while mounting and unmounting the component. This causes weird rendering behavior as the previous file will be loaded briefly before the current new one is shown. This flashing behavior isnt ideal for UX and can only be prevented by hiding the document viewer behind a loading screen until the final file has loaded. (edit: This may be intentially implemented by maintainer, see last reference)

  The potential solutions that I am considering for this issue are:

  1. Storing pdf and word files of the document within some third party cloud service (eg AWS 3, cloudinary) and saving the url references to those files in the database. This way I can avoid having to regenerate the pdf and read it as url, and just pass the cloud service url instead.
     • I could also convert the buffer into a base 64 string and store in data base then pass said string into the pdf viewer https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions#how-do-i-load-a-pdf-from-base64
  2. Providing each document card it’s own document viewer. This means that each card will have its own display modal, and so I longer have to worry about rendering multiple different files in one viewer.

  I referenced these links when coming to this conclusion:

  https://stackoverflow.com/questions/45314066/store-files-in-mongodb-with-nodejs

  wojtekmaj/react-pdf#1212

  react-pdf-viewer/react-pdf-viewer#389

  diegomura/react-pdf-site#91

• Reduce loading time for document updates in editor

• Use a more accurate docx to pdf converter

• Ensure changes within title always register in document

Lessons Learned

• Can perform functions on a collection of data within mongoDB documents using the $function aggregation expression. However using the $function operator may slow down performance and should only be used if other pipline operators can not fulfill the needs of your application https://www.mongodb.com/docs/manual/reference/operator/aggregation/function/ https://www.mongodb.com/community/forums/t/how-to-update-an-sub-array-with-map-operation-by-index-in-array/143070/2
• Use text-overflow: ellipis to truncate text that has overflowed the boundaries of it’s container. Other settings like overflow:hidden are required https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Roadmap

• Fix delay in summary fetching when entering the editor→ somehow fetch them before the component loads
• Create a hook for modal functions instead of having to import context and create state every time
• revisit error and success message states in modal. Are they needed ? or can they be passed by the execution function

Contact

Tee O.

Portfolio: www.github.com/tdo95

(back to top)