🧩 Dynamic Form Builder

A full-stack form builder application that allows users to create multi-page forms with different question types and fill them out in a separate preview mode.

---

✨ Features

• ✅ Multi-page forms
• 📝 Multiple question types: Text, MCQ, Checkbox, File Upload
• 👥 User authentication system
• 💾 Dual database design: SQL.js (client-side) + PostgreSQL (server-side)
• 👀 Live preview mode
• 📤 JSON export for form responses

---

🧠 Tech Stack

Frontend: Vanilla JavaScript, HTML5, CSS3, SQL.js
Backend: Python Flask, PostgreSQL

---

⚙️ Quick Start

🧩 Prerequisites

• Python 3.8+
• PostgreSQL
• Modern web browser

🔧 Installation

# Clone the repository
git clone https://github.com/maneyd/form-builder.git
cd form-builder

# Install Python dependencies
pip install flask psycopg2-binary flask-cors

🗃️ Setup PostgreSQL

CREATE DATABASE flask_db;

CREATE TABLE users (
    userID TEXT PRIMARY KEY,
    password TEXT
);

INSERT INTO users VALUES ('admin', 'password123');

Update your database credentials in app.py and db.py.

🚀 Run the Application

python app.py

Then visit http://localhost:5000 in your browser.

---

🧭 Usage

1. Login with your credentials.
2. Create a new form or load an existing one.
3. Add pages and questions of different types.
4. Save and preview your form.
5. Fill out and export responses as JSON.

---

📁 Project Structure

static/
├── js/           # JavaScript modules
├── css/          # Stylesheets
└── db/           # SQL.js library
templates/        # HTML templates
JSON/             # Form and response data
app.py            # Flask server
db.py             # Database setup

---

🔌 API Endpoints

Method	Endpoint	Description
POST	/login	User authentication
POST	/add_form	Create a form
POST	/insert_page	Add a page to form
POST	/insert_item	Add a question
GET	/formData	Retrieve form data
POST	/getData-Builder	Save form data

---