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: 6 days 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 (19 days ago)
• Default Branch: main
• Last Pushed: 2024-12-05T08:31:57.000Z (19 days ago)
• Last Synced: 2024-12-05T09:29:33.148Z (19 days ago)
• Topics: react-toastify, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://categoryformbuilder.netlify.app
• Size: 132 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• 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