React Form Builder Integration in Existing MERN Website
Budget: ₹1,500 – ₹12,500 INR
Project Description:
We have an existing Ecommerce Web Application built in MERN (JavaScript) and a Form Builder UI project built in React (TypeScript).
The goal is to merge both so the Ecommerce system can also act as a Form Builder Platform, without removing any ecommerce functionality.
We only want to replace the frontend display logic — instead of showing products, the user’s created forms (as cards) will appear on the homepage.
The backend of the form builder doesn’t exist yet — we’ll integrate it into the ecommerce backend (Node + Express + MongoDB).
Objectives:
1. Users of the Ecommerce system should be able to create forms using the existing Form Builder UI (already available in TypeScript).
2. The created forms will be sent for admin approval. New and Older Admin Users can approve the form. Once approved, those forms will appear as cards on the Home Page (in place of product cards).
3. Enhanced "Blank Form" Button Flow after merging.
The current “Blank Form” button allows users to create a new form by entering only a name.
Update this flow to include additional inputs:
3.1 Add a New Button as "Add Interface" at the top of the Home Page/Menu Bar sinstead of "Blank Form" Button.
3.2 Add Existing Product Categories (from ecommerce DB), Photo Upload or Color Gradient Option
Along with the Name of the Form.
These new fields data should appear on the form cards displayed on the Home Page after admin approval. (As in Step 4)
4. Form Visibility Options, While publishing a form, users should get a “Visibility” toggle:
Public Form: Accessible by any user.
Private Form: Accessible only by the creator.
Add appropriate access control on both frontend and backend.
5. User Dashboard Integration
Add a new section “My Interface” under the user dashboard.
It should list all forms created by the logged-in user (approved or pending).
Technical Details:
Existing Stack (Ecommerce):
MERN (MongoDB, Express, React JS, Node JS)
Form Builder (UI only):
MERN + TypeScript (React TS)
Database: MongoDB
Frontend: React (JS/TS mix after integration)
Backend: Node.js + Express
Auth: JWT-based authentication (already in place)
Deliverables:
Integrated project (Form Builder merged into Ecommerce codebase)
Backend APIs for:
Form creation, admin approval, visibility control
Frontend updates:
Replace product cards with form cards
Updated "Add Interface" modal using existing flow (Just Button)
"My Interface" dashboard page
Proper routing and access control for public/private forms
Clean, modular code — future maintainability is important
Notes:
Form Builder currently has no backend, so backend endpoints will be created as part of this integration.
Existing ecommerce modules (auth, admin panel, product management) must not be removed — only extended for form-related features.
Form submissions will be handled via backend API (no need to store user inputs permanently).
We have an existing Ecommerce Web Application built in MERN (JavaScript) and a Form Builder UI project built in React (TypeScript).
The goal is to merge both so the Ecommerce system can also act as a Form Builder Platform, without removing any ecommerce functionality.
We only want to replace the frontend display logic — instead of showing products, the user’s created forms (as cards) will appear on the homepage.
The backend of the form builder doesn’t exist yet — we’ll integrate it into the ecommerce backend (Node + Express + MongoDB).
Objectives:
1. Users of the Ecommerce system should be able to create forms using the existing Form Builder UI (already available in TypeScript).
2. The created forms will be sent for admin approval. New and Older Admin Users can approve the form. Once approved, those forms will appear as cards on the Home Page (in place of product cards).
3. Enhanced "Blank Form" Button Flow after merging.
The current “Blank Form” button allows users to create a new form by entering only a name.
Update this flow to include additional inputs:
3.1 Add a New Button as "Add Interface" at the top of the Home Page/Menu Bar sinstead of "Blank Form" Button.
3.2 Add Existing Product Categories (from ecommerce DB), Photo Upload or Color Gradient Option
Along with the Name of the Form.
These new fields data should appear on the form cards displayed on the Home Page after admin approval. (As in Step 4)
4. Form Visibility Options, While publishing a form, users should get a “Visibility” toggle:
Public Form: Accessible by any user.
Private Form: Accessible only by the creator.
Add appropriate access control on both frontend and backend.
5. User Dashboard Integration
Add a new section “My Interface” under the user dashboard.
It should list all forms created by the logged-in user (approved or pending).
Technical Details:
Existing Stack (Ecommerce):
MERN (MongoDB, Express, React JS, Node JS)
Form Builder (UI only):
MERN + TypeScript (React TS)
Database: MongoDB
Frontend: React (JS/TS mix after integration)
Backend: Node.js + Express
Auth: JWT-based authentication (already in place)
Deliverables:
Integrated project (Form Builder merged into Ecommerce codebase)
Backend APIs for:
Form creation, admin approval, visibility control
Frontend updates:
Replace product cards with form cards
Updated "Add Interface" modal using existing flow (Just Button)
"My Interface" dashboard page
Proper routing and access control for public/private forms
Clean, modular code — future maintainability is important
Notes:
Form Builder currently has no backend, so backend endpoints will be created as part of this integration.
Existing ecommerce modules (auth, admin panel, product management) must not be removed — only extended for form-related features.
Form submissions will be handled via backend API (no need to store user inputs permanently).