RohanShrestha01 / form-builder

A Full Stack MERN app for building dynamic forms with drag and drop interface & to track and view the responses received in the created form.

Form Builder

A Full Stack MERN app for building dynamic forms with drag and drop interface & to track and view the responses received in the created form.

https://easyformbuilder.netlify.app/

(Profile picture upload only works in local development as costs money in deployed server.)

Installation

You need to install pnpm first as pnpm workspace is used for this monorepo.

npm install -g pnpm

Clone the project

git clone https://github.com/RohanShrestha01/form-builder.git

then navigate into the project

cd form-builder

Now, Install the packages

pnpm i

then build the shared validation package

pnpm -F @form-builder/validation build

Also, create .env file with the help of .env.example file for both client and server. You can use Brevo for free SMTP server and MongoDB Atlas for database.

Run the project with command

pnpm dev

Built with

• Frontend: React, TypeScript, Tailwind, React Hook Form, Zod, ShadcnUI, React Router, DND Kit, Tanstack Query, Tanstack Table, Tiptap, React Dropzone, React Easy Crop, Zustand
• Backend: Node, Express, TypeScript, Nodemailer, Multer, JWT
• Database: MongoDB, Mongoose

Features

• JWT Authentication along with Protected Routes, Refresh Tokens, reuse detection and rotation.
• Logout, Change password and delete account functionalities.
• Email sending functionality after signup and while resetting password using Nodemailer.
• Profile picture upload with drag n drop and crop functionality.
• Implemented error logging mechanisms for easier troubleshooting and maintenance.
• Implemented proper error handling and user feedback mechanisms.
• Dynamic forms can be created using different form elements by dragging and dropping.
• CRUD operations and search functionality on the form.
• Functionality to submit the form and view the responses on the form.
• Included various form elements like WYSIWYG editor, Calendar, Date Range Picker etc.

API

Auth

• POST /api/v1/auth/signup
• POST /api/v1/auth/login
• GET /api/v1/auth/refresh
• GET /api/v1/auth/logout
• POST /api/v1/auth/forgot-password
• PATCH /api/v1/auth/reset-password/:token

User

• PATCH /api/v1/user/change-password
• PATCH /api/v1/user/profile
• GET /api/v1/user/profile
• DELETE /api/v1/user/delete-account

Form

• GET /api/v1/forms?page=0&pageSize=10&sort=-name&search=form
• GET /api/v1/forms/:id
• POST /api/v1/forms
• PATCH /api/v1/forms/:id
• PATCH /api/v1/forms/bulk-delete
• DELETE /api/v1/forms/:id

Form Response

• GET /api/v1/forms/:id/responses
• POST /api/v1/forms/:id/responses