FlexForm

Intro

FlexForm is a WebApplication built using VueJs to create dynamic forms according to your needs in no time.
This Enables you to create large forms without the hustle to make different database tables for each form you make alongwith the difficulty to manage any changes it encounters to a simple precedure to get the desired Form keeping all the information just to you.

Vue FrontEnd

The frontend of FlexForm is build using Vue.js to create a single page web application.
This was acheived by building the frontend on top of a template and additional pages were added according to the design flow.

Directions to Start

Clone the project into your directory by using command

git clone https://github.com/Hafif-Ashiq/FlexForm.git
cd Frontend

Then run the basic setup below to start the project frontend on the local device

Build Setup

# install dependencies
npm install

# To change node version using nvm
nvm use 16

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

FlexForm API Backend

The backend of FlexForm is build using Django REST framework to create Dynamic tables/models in it using PostgreSQL as default settings. Other databases can be configured by extra changes to the settings / python code to work properly

Setup

First clone the project if not done before by using:

git clone https://github.com/Hafif-Ashiq/FlexForm.git

Then switch to the backend directory using

cd Backend

Next step is to install the dependencies using:

pip install -r requirements.txt

Once pip has finished downloading the dependencies
In order to run the application successfully, you'll have to change the database settings in settings.py according to your database connection for PostgreSQL connection

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': '<Database name here>'',
        'USER': '<database username here>'',
        'PASSWORD': '<database password here>',
        'HOST': '127.0.0.1',
        'PORT': '5432',
    }
}

To create a localhost connection port for the application to listen at
http://127.0.0.1:8000/
run

cd flexform
python manage.py runserver

To make migrations to database, run:

python manage.py makemigrations
python manage.py migrate

Different API URLs

The user can request different APIs using different URLs ass following:

For Swagger Documentation

http://localhost:8000/doc
http://localhost:8000/redoc

Create User Token

http://localhost:8000/api-token-auth/

User Registeration

http://localhost:8000/register/

User Login

http://localhost:8000/login/

Get all Users

http://localhost:8000/get-all-users

Get User

http://localhost:8000/get-user

Create,Read,Update,Delete Form

http://localhost:8000/form-api

Get Form

http://localhost:8000/get-form/<id>

Publish Form

http://localhost:8000/publish-form

Get Form Responses

http://localhost:8000/get-response/<id>

Post Form Responses

http://localhost:8000/post-response/<id>

Delete Form Responses

http://localhost:8000/delete-response

Approve Form Responses

http://localhost:8000/approve-response