abhibagul/DocuFlow

React website along with chrome plugin to help you easily make the documentations. It records your process, clicks, copy paste navigation etc and creates a step by step documentation to follow.

DocuFlow : Convertes any process into a step-by-step guide

React website along with chrome plugin to help you easily make the documentations. It records your process, clicks, copy paste navigation etc and creates a step by step documentation to follow.

Demo: https://docuflow.onrender.com/

Creates step-by-step guide Like this,

Features

• Records various actions and convert it into step by step documentation.
• Provides click position and (link on which it has been clicked on.)
• Edit the steps
• Publish documentation to make it public
• Sharable links are different then preview link
• Records copy, cut and paste actions.

How to use

Chrome plugin

• As the plugin is not sent to chrome store, you will need to manually install it.
• For that follow the link below: https://webkul.com/blog/how-to-install-the-unpacked-extension-in-chrome/

Frontend

1. npm install -y to install the required dependecies.
2. npm run build to create a build version of the front-end.
3. (If you want to modify the frontend you cannpm start the frontend and npm run dev for the backend)

Backend

1. Copy the build folder generated into the backend folder.
2. cd backend/ go in the backend folder.
3. npm install -y to install the dependencies
4. Create the .env file in the directory with the following details.
   JWT_SECRET=" [RANDOM STRING USED TO CREATE JWT TOKEN ]"
PORT=8000
API_DB_NAME="[ DB NAME ]"
API_LOGIN_PERIOD="2d"
API_MONGO_URI="[ add the uri for the mongo db ]"
API_MONGO_PASS="[ NO NEED REMOVED ]"
API_MONGO_USER="[ NO NEED REMOVED ]"
   
5. npm run dev to run on a local machine. For deployment use node ./src/server.js
6. It should be available on the port 8000.