This project is a toy project for training and quality assurance purposes

Web App

Boilerplate Webpack 5, React and Bootstrap 5 project with global Css and Css modules enabled.

Hosts File Config

In order to run this application in local, you'll need to modify your hosts file configuration. Then you will be able to access/serve your application at https://test.manaknightdev.com:3000

Windows

Please include the following line in your hosts file

127.0.0.1 test.manaknightdev.com

See How to edit your hosts file on Windows here

Mac

Please do the following steps

sudo nano /private/etc/hosts

add 127.0.0.1 test.manaknightdev.com to the end of the file and save

run sudo dscacheutil -flushcache to flush the DNS cache

you might need to run chmod +x .husky/pre-commit to have the linter activated on commits

App Setup

This project is setup to use yarn.

to get started.

run yarn

This will install the nodule modules

Dev Build

yarn run start

The Webpack build has a lot of outputs, if this is not intterupted then allow it to completely build for the first time... consecutive builds on "save" are faster after the first build.

In the event you run into any error with the build failing for this project you can downgrade your node version to 14 or 16

Staging Build

yarn run staging

Production Build

yarn run production

Task

• To login go to https://test.manaknightdev.com:3000/

• devtest@manaknightdev.com / Abcdef123

• Create the form page https://test.manaknightdev.com:3000/form as in screenshot_1

• Need to integrate API to load the table go to doc

• When we click on add button, it will open modal popup showing form. need to integrate the ADD FORM api go to doc

• When we click on a form on the list, it will open modal popup showing form with saved details of the form. need to integrate the EDIT FORM api go to doc

• Create delete modal and it can delete the form as well screenshot_2 go to doc

Important Detail

The popup modal that shows the form has two sections, the left panel and the right panel.

• The Left Panel: this is a list of template strings starting with three tilds and ending with three tilds => ~~~name~~~ when a template is clicked, it is added to the right panel which is a <textarea></textarea> as you see in screenshot_3.

• The Right Panel: this is a <textarea></textarea> where you can type in any text of your choice and also add templates by clicking on a template on the left panel as you see in screenshot_3.

API for getting Contract Forms

GET `/companies/${companyId}/contract-forms`

API for Adding Contract Forms

Request Body: {
company_id: companyId,
name: formName,
replacement_tags: typeof String,
status: 'active',
template: typeof string,
has_signature: true || false,
}

POST  `/contract-forms`

API for Editing Contract Forms

Request Body: {
company_id: companyId,
name: formName,
replacement_tags: typeof String,
status: 'active',
template: typeof string,
has_signature: true || false,
}

PUT  `/contract-forms`

DELETE `/contract-forms/${contractId}`