Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/rohanshrestha01/form-builder
dnd-kit express-rate-limit expressjs mongodb mongoose monorepo multer nodejs nodemailer pnpm-workspace react-hook-form reactjs shadcn-ui tailwindcss tanstack-react-query tanstack-table tiptap typescript zod zustand
Last synced: 30 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/rohanshrestha01/form-builder
- Owner: RohanShrestha01
- Created: 2023-07-11T08:35:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-13T17:45:27.000Z (4 months ago)
- Last Synced: 2024-10-14T00:21:40.471Z (30 days ago)
- Topics: dnd-kit, express-rate-limit, expressjs, mongodb, mongoose, monorepo, multer, nodejs, nodemailer, pnpm-workspace, react-hook-form, reactjs, shadcn-ui, tailwindcss, tanstack-react-query, tanstack-table, tiptap, typescript, zod, zustand
- Language: TypeScript
- Homepage: https://easyformbuilder.netlify.app
- Size: 458 KB
- Stars: 32
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://pnpm.io/installation) first as pnpm workspace is used for this monorepo.
```bash
npm install -g pnpm
```
Clone the project
```bash
git clone https://github.com/RohanShrestha01/form-builder.git
```
then navigate into the project
```
cd form-builder
```
Now, Install the packages
```bash
pnpm i
```
then build the shared validation package
```bash
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](https://www.brevo.com/) for free SMTP server and [MongoDB Atlas](https://www.mongodb.com/atlas/database) for database.
Run the project with command
```bash
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