Dynamic Form Builder

A full-stack dynamic form builder project using Django (backend) and React.js (frontend). This project allows admin users to create customizable forms and users to fill them dynamically. All data is stored in a PostgreSQL database.

---

Table of Contents

1. Folder Structure
2. Prerequisites
3. Environment Variables
4. Backend Setup (Django)
5. Frontend Setup (React)
6. Database Setup (PostgreSQL)
7. Running the Project Locally
8. Project Requirements
9. Notes for Production

---

Folder Structure

/dynamic-form-builder-app/ # Root project folder /dynamic-form-builder/ # Django project /formbuilder/ # Main app /core/ # Core utilities manage.py requirements.txt .env.example # Sample environment variables for Django /frontend/ # React app /src/ # Source code package.json .env.example # Sample environment variables for React README.md # Project documentation

---

Prerequisites

• Python 3.10+
• Node.js 18+ / npm 8+
• PostgreSQL 12+
• Git (optional but recommended)
• pgAdmin (optional, for GUI database management)

---

Environment Variables

Backend (.env in /dynamic-form-builder/)

Create a .env file in the Django project root based on .env.example:

SECRET_KEY=''secret_key'
DEBUG=True
DB_NAME='db_name'
DB_USER='db_username'
DB_PASSWORD='db_password'
DB_HOST='db_host'
DB_PORT=''db_port''

Note: Use a strong secret key in production and set DEBUG=False.

Frontend (.env in /dynamic-form-frontend/)
Create a .env file in the React project root based on .env.example:

env
REACT_APP_API_BASE_URL=http://127.0.0.1:8000/api/v1



## Backend Setup (Django)

Navigate to the backend folder:
#bash
cd dynamic-form-builder


Create a virtual environment:
#bash
python -m venv venv
source venv/bin/activate   # On Windows: venv\Scripts\activate


Install dependencies:
#bash
pip install -r requirements.txt


## Database Setup (PostgreSQL)
Create a PostgreSQL database and user (can use GUI like pgAdmin):

# sql
CREATE DATABASE formbuilder_db;
CREATE USER formbuilder_user WITH PASSWORD 'strongpassword';
GRANT ALL PRIVILEGES ON DATABASE formbuilder_db TO formbuilder_user;
Update the .env file with your database credentials.


Optionally, set a custom schema (formbuilder_schema) if needed (matches OPTIONS in settings.py):
#sql
CREATE SCHEMA formbuilder_schema;


## Apply Migrations

Apply migrations to set up the database schema:
#bash
python manage.py makemigrations
python manage.py migrate


## Start the Backend Server

Start the Django backend:
#bash
python manage.py runserver



## Frontend Setup (React)

Navigate to the frontend folder:
#bash
cd dynamic-form-frontend


Install dependencies:
#bash
npm install


Start the development server:
#bash
npm start
The React app will run on http://localhost:3000 by default and communicate with the Django backend.



## Running the Project Locally

Start the Django backend:
#bash
cd dynamic-form-builder
source venv/bin/activate   # Activate virtualenv
python manage.py runserver


Start the React frontend:
#bash
cd  dynamic-form-frontend
npm start


Visit the frontend at http://localhost:3000.

API base URL: http://127.0.0.1:8000/api/v1 (from .env).



## Project Requirements

Django 5.2.6
Django REST Framework
PostgreSQL
React.js
Python-Decouple (for environment variable management)
CORS Headers for Django
JWT Authentication via SimpleJWT


## Notes for Production
Set DEBUG=False in .env.
Configure ALLOWED_HOSTS in Django settings.
Use HTTPS for API requests.
Disable CORS_ALLOW_ALL_ORIGINS=True in production; explicitly list allowed origins.
Use a strong, unique SECRET_KEY.
Ensure database credentials are secure.
Serve static files via a production-ready server (e.g., Nginx, Apache).



This README provides all steps needed to set up and run the project locally, with environment variables, PostgreSQL setup, backend, and frontend configuration.