Form builder

This is a form builder application, By using this, users can create dynamic forms like google forms.

Tech/Framework used

• React with Javascript
• Redux and Redux-saga
• Node with Express

Features

• On Create form page, there is a Add Question button and textbox to fill form name/title
• On Click of Add Question button, the modal popup opens with the below fields
  • Enter question (Textbox)
  • Select the answer type (Dropdown with options - Text, Checkbox and Radio)
    • If answer type is either Checkbox or Radio, then the text area will appear to enter each choice in separate lines.
  • Add and Cancel button

• On click of Add Button, the question is added to the form.
• After saving the form, the slug or unique URL for the form is generated
• On Listing Page, there are list of all the forms created with below fields
  • Form Name
  • Form URL
  • Created At (Date and Time)
  • Total Responses

• On the click of the URL, user can submit their response

• Form data and Responses are stored in the forms.json and responses.json files respectively, located inside /backend/data folder

Installation

To install dependencies for frontend and backend, follow below steps.

backend

cd backend
npm install

frontend

cd frontend
npm install

How to start

To start the project, you need to start backend as well as frontend.

Open Terminal:

In first tab (backend):

cd backend
npm start

In second tab (frontend):

cd frontend
npm start