https://github.com/pintu544/formbuilderfrontend
The form builder should allow users to create and edit forms with three specific question types: Categorize, Cloze, and Comprehension.
https://github.com/pintu544/formbuilderfrontend
react-toastify reactjs tailwindcss
Last synced: about 1 year ago
JSON representation
The form builder should allow users to create and edit forms with three specific question types: Categorize, Cloze, and Comprehension.
- Host: GitHub
- URL: https://github.com/pintu544/formbuilderfrontend
- Owner: pintu544
- Created: 2024-12-05T08:14:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-05T08:31:57.000Z (over 1 year ago)
- Last Synced: 2025-02-10T09:33:14.786Z (over 1 year ago)
- Topics: react-toastify, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://categoryformbuilder.netlify.app
- Size: 132 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Form Builder
A dynamic Form Builder application built using the MERN Stack (MongoDB, Express, React, Node.js) and Tailwind CSS. This app enables users to create, edit, and preview forms with three specific question types: Categorize, Cloze, and Comprehension. Users can also fill the forms via a generated link, with their responses securely stored in the backend.
Features
Form Editor UI
- Add multiple question types:
-
Categorize: Allows categorization of items.
-
Cloze: Fill-in-the-blank style questions.
-
Comprehension: Questions related to understanding a passage.
- Add images to individual questions.
- Include a header image at the top of the form.
Form Preview and Fill
- Generate a sharable preview/fill link for the form.
- Users can fill the form, with their responses saved to the backend.
Data Management
- All form data, including questions and user responses, are saved in MongoDB with proper schemas.
Tech Stack
-
Frontend: React.js, Tailwind CSS
-
Backend: Node.js, Express.js
-
Database: MongoDB
-
Hosting: Hosted on Vercel/Netlify (frontend) and Render/another service (backend).
Setup Instructions
Prerequisites
Ensure you have the following installed:
- Node.js
- MongoDB
Installation
-
Clone the repository:
bash
git clone [https://github.com/pintu544/formbuilderfrontend](https://github.com/pintu544/formbuilderfrontend) cd formbuilderfrontend
-
Install dependencies for the frontend and backend:
bash
`# Frontend
cd client
npm install
Backend
-
Clone the repository:
bash
git clone [https://github.com/pintu544/formbuilderbackend](https://github.com/pintu544/formbuilderbackend) cd formbuilderbackend
-
npm install`
-
Set up environment variables:
-
Create a .env file in the /server directory and provide the following:
env
Copy code
MONGO_URI=<Your MongoDB Connection URI> PORT=5000
-
Start the application:
bash
Copy code
`# Backend
cd server
npm run start
Frontend
cd …/client
npm start`
-
Access the app at http://localhost:3000.
Usage
-
Form Creation:
- Navigate to the form editor and add questions of the desired types.
- Upload a header image and add images to questions if required.
- Save the form.
-
Form Preview/Fill:
- Generate a preview/fill link.
- Share the link with users to fill out the form.
- View saved responses in the backend database.
Folder Structure
graphql
Copy code
form-builder/ ├── client/ # Frontend React application ├── server/ # Backend API with Express.js ├── .gitignore ├── README.md └── package.json
Endpoints
Forms Endpoints
-
GET /api/v1/forms?page_no=1&page_size=10
-
GET /api/v1/forms/:id
-
DELETE /api/v1/forms/:id
-
POST /api/v1/forms
-
GET /api/v1/forms/client/:id
Respondents Endpoints
-
GET /api/v1/respondents/:formId?page_no=1&page_size=10
-
POST /api/v1/respondents/:formId/check-valid-response
-
POST /api/v1/respondents/:formId
-
GET /api/v1/respondents/response/:responseId
Live Demo
- Frontend: Deployed Link
- Backend: Deployed Link