​

Mentee : Swatishree Mahapatra

​

Mentor : Anshul Malik

CODE4GovTECH 2023

Midpoint Showcase

Creating a seamless UI for Doc Generator

​

​

Table of Contents

1. Introduction
2. Project Description
3. Impact of Project
4. Project Goals
5. Milestones Achieved
6. Live Demo
7. Learnings from project
8. Next Steps

What is Doc Generator?

​

​

Introduction

​

​

​

The Doc-Generator is an easily integrable and reusable tool built on open-source software. It provides seamless generation of single and bulk documents in various available formats, ensuring interoperability.

How does Doc Generator work?

​

​

Introduction

​

​

​

• Doc-Generator incorporates a Templater, the backend which receives the following input:

- Template input that is used for document generation,

- Template type like PDFMake (which is a JS library that can create and customize PDF documents),

- Data input that has to be converted to the specified format, and

- Engine type

• The input is then processed and the rendered template is passed to an output plugin that can convert the data to various formats, such as .doc, .pdf, HTML etc. The plugin model shall ensure customization and extensibility.
• The obtained file can then be uploaded to various storage platforms such as CDN, Google Drive, S3 etc. To enhance file sharing convenience, the Doc-Generator can generate shortened URLs for the uploaded documents.

Project Description

Currently, the project entirely lacks a User Interface that would have given a platform for the users to give the input or obtain the output document which will be the major focus area throughout my contribution period of C4GT.

Creating a powerful UI for Doc Generator

​

​

Project Goals & Impact

​

​

​

​

​

​

​

• Enhance the user interface of the doc generator service to provide instant feedback for rendered documents.

​

​

​

This real-time feedback will allow users to preview and interact with the document as it is being generated, improving the overall user experience and productivity.

​

• A monitoring feature that includes: Monitoring the status and progress of document generation, providing insights into the status of batch requests, and create new batch jobs

​

​

It will allow users to track and monitor various aspects of the doc generator service, thereby boosting the usability of the feature.

​

Impact:

Impact:

​

​

Milestones Achieved

1. Understand DocGenerator and Templater
2. Design Document, Wireframing, Prototyping
3. Feature implementation

o Landing Page

o Document generation page (work in progress)

o User Dashboard

o Additional: Authentication and User Profile

• UI style enhancements
• Additional: UX improvements

​

​

Demo of Progress so far…

​

​

Project Learnings:

​

​

• Understanding DocGenerator, requirements of UI, and defining approaches of implementation.

​

• Learning and working with Figma to implement the prototype of UI.

​

• Understanding and setting-up Next.js as the frontend tech stack

​

• Developing the complex components of Landing page and Real-time document rendering feature.

​

​

​

Next Steps:

​

​

• Completing the Real-time rendering feature within this weekend.

​

• Development of User dashboard and monitoring feature.

​

• Continuing work on UI style improvements after function completion

​

• Establishing a robust design prototype to continue development of other pages even after the C4GT period.

​

THANK YOU!

Swatishree Mahapatra

Ph: 9348257557

Email: swatishree1508@gmail.com

GitHub username: Ace_15

THANK YOU!