{"id":23175872,"url":"https://github.com/pintu544/formbuilderfrontend","last_synced_at":"2025-04-05T01:21:10.148Z","repository":{"id":266631835,"uuid":"898885670","full_name":"pintu544/formbuilderfrontend","owner":"pintu544","description":"The form builder should allow users to create and edit forms with three specific question types: Categorize, Cloze, and Comprehension.","archived":false,"fork":false,"pushed_at":"2024-12-05T08:31:57.000Z","size":135,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T09:33:14.786Z","etag":null,"topics":["react-toastify","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://categoryformbuilder.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pintu544.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-05T08:14:43.000Z","updated_at":"2024-12-26T07:48:08.000Z","dependencies_parsed_at":"2024-12-05T09:40:48.555Z","dependency_job_id":null,"html_url":"https://github.com/pintu544/formbuilderfrontend","commit_stats":null,"previous_names":["pintu544/formbuilderfrontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fformbuilderfrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fformbuilderfrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fformbuilderfrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fformbuilderfrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pintu544","download_url":"https://codeload.github.com/pintu544/formbuilderfrontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247272799,"owners_count":20911811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-toastify","reactjs","tailwindcss"],"created_at":"2024-12-18T06:10:10.286Z","updated_at":"2025-04-05T01:21:10.133Z","avatar_url":"https://github.com/pintu544.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\n  \u003clink rel=\"stylesheet\" href=\"https://stackedit.io/style.css\" /\u003e\n\u003c/head\u003e\n\n\u003cbody class=\"stackedit\"\u003e\n  \u003cdiv class=\"stackedit__html\"\u003e\u003ch1 id=\"form-builder\"\u003e\u003cstrong\u003eForm Builder\u003c/strong\u003e\u003c/h1\u003e\n\u003cp\u003eA dynamic Form Builder application built using the \u003cstrong\u003eMERN Stack\u003c/strong\u003e (MongoDB, Express, React, Node.js) and \u003cstrong\u003eTailwind CSS\u003c/strong\u003e. This app enables users to create, edit, and preview forms with three specific question types: \u003cstrong\u003eCategorize\u003c/strong\u003e, \u003cstrong\u003eCloze\u003c/strong\u003e, and \u003cstrong\u003eComprehension\u003c/strong\u003e. Users can also fill the forms via a generated link, with their responses securely stored in the backend.\u003c/p\u003e\n\u003ch2 id=\"features\"\u003e\u003cstrong\u003eFeatures\u003c/strong\u003e\u003c/h2\u003e\n\u003ch3 id=\"form-editor-ui\"\u003e\u003cstrong\u003eForm Editor UI\u003c/strong\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eAdd multiple question types:\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eCategorize\u003c/strong\u003e: Allows categorization of items.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCloze\u003c/strong\u003e: Fill-in-the-blank style questions.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eComprehension\u003c/strong\u003e: Questions related to understanding a passage.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eAdd images to individual questions.\u003c/li\u003e\n\u003cli\u003eInclude a header image at the top of the form.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"form-preview-and-fill\"\u003e\u003cstrong\u003eForm Preview and Fill\u003c/strong\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eGenerate a sharable \u003cstrong\u003epreview/fill link\u003c/strong\u003e for the form.\u003c/li\u003e\n\u003cli\u003eUsers can fill the form, with their responses saved to the backend.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"data-management\"\u003e\u003cstrong\u003eData Management\u003c/strong\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eAll form data, including questions and user responses, are saved in \u003cstrong\u003eMongoDB\u003c/strong\u003e with proper schemas.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"tech-stack\"\u003e\u003cstrong\u003eTech Stack\u003c/strong\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: React.js, Tailwind CSS\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: Node.js, Express.js\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDatabase\u003c/strong\u003e: MongoDB\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHosting\u003c/strong\u003e: Hosted on Vercel/Netlify (frontend) and Render/another service (backend).\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"setup-instructions\"\u003e\u003cstrong\u003eSetup Instructions\u003c/strong\u003e\u003c/h2\u003e\n\u003ch3 id=\"prerequisites\"\u003e\u003cstrong\u003ePrerequisites\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eEnsure you have the following installed:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eNode.js\u003c/li\u003e\n\u003cli\u003eMongoDB\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"installation\"\u003e\u003cstrong\u003eInstallation\u003c/strong\u003e\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eClone the repository:\u003c/p\u003e\n\u003cp\u003ebash\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003egit clone [https://github.com/pintu544/formbuilderfrontend](https://github.com/pintu544/formbuilderfrontend) cd formbuilderfrontend\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eInstall dependencies for the frontend and backend:\u003c/p\u003e\n\u003cp\u003ebash\u003c/p\u003e\n\u003cp\u003e`# Frontend\u003cbr\u003e\ncd client\u003cbr\u003e\nnpm install\u003c/p\u003e\n\u003ch1 id=\"backend\"\u003eBackend\u003c/h1\u003e\n  \u003cli\u003e\n\u003cp\u003eClone the repository:\u003c/p\u003e\n\u003cp\u003ebash\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003egit clone [https://github.com/pintu544/formbuilderbackend](https://github.com/pintu544/formbuilderbackend) cd formbuilderbackend\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\nnpm install`\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eSet up environment variables:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eCreate a \u003ccode\u003e.env\u003c/code\u003e file in the \u003ccode\u003e/server\u003c/code\u003e directory and provide the following:\u003c/p\u003e\n\u003cp\u003eenv\u003c/p\u003e\n\u003cp\u003eCopy code\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eMONGO_URI=\u0026lt;Your MongoDB Connection URI\u0026gt; PORT=5000\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eStart the application:\u003c/p\u003e\n\u003cp\u003ebash\u003c/p\u003e\n\u003cp\u003eCopy code\u003c/p\u003e\n\u003cp\u003e`# Backend\u003cbr\u003e\ncd server\u003cbr\u003e\nnpm run start\u003c/p\u003e\n\u003ch1 id=\"frontend\"\u003eFrontend\u003c/h1\u003e\n\u003cp\u003ecd …/client\u003cbr\u003e\nnpm start`\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eAccess the app at \u003ccode\u003ehttp://localhost:3000\u003c/code\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"usage\"\u003e\u003cstrong\u003eUsage\u003c/strong\u003e\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eForm Creation\u003c/strong\u003e:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eNavigate to the form editor and add questions of the desired types.\u003c/li\u003e\n\u003cli\u003eUpload a header image and add images to questions if required.\u003c/li\u003e\n\u003cli\u003eSave the form.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eForm Preview/Fill\u003c/strong\u003e:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eGenerate a preview/fill link.\u003c/li\u003e\n\u003cli\u003eShare the link with users to fill out the form.\u003c/li\u003e\n\u003cli\u003eView saved responses in the backend database.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"folder-structure\"\u003e\u003cstrong\u003eFolder Structure\u003c/strong\u003e\u003c/h2\u003e\n\u003cp\u003egraphql\u003c/p\u003e\n\u003cp\u003eCopy code\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eform-builder/ ├── client/ # Frontend React application ├── server/ # Backend API with Express.js ├── .gitignore ├── README.md └── package.json\u003c/code\u003e\u003c/p\u003e\n\u003ch2 id=\"endpoints\"\u003e\u003cstrong\u003eEndpoints\u003c/strong\u003e\u003c/h2\u003e\n\u003ch4 id=\"forms-endpoints\"\u003e\u003cstrong\u003eForms Endpoints\u003c/strong\u003e\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eGET\u003c/strong\u003e \u003ccode\u003e/api/v1/forms?page_no=1\u0026amp;page_size=10\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eGET\u003c/strong\u003e \u003ccode\u003e/api/v1/forms/:id\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDELETE\u003c/strong\u003e \u003ccode\u003e/api/v1/forms/:id\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePOST\u003c/strong\u003e \u003ccode\u003e/api/v1/forms\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eGET\u003c/strong\u003e \u003ccode\u003e/api/v1/forms/client/:id\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"respondents-endpoints\"\u003e\u003cstrong\u003eRespondents Endpoints\u003c/strong\u003e\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eGET\u003c/strong\u003e \u003ccode\u003e/api/v1/respondents/:formId?page_no=1\u0026amp;page_size=10\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePOST\u003c/strong\u003e \u003ccode\u003e/api/v1/respondents/:formId/check-valid-response\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePOST\u003c/strong\u003e \u003ccode\u003e/api/v1/respondents/:formId\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eGET\u003c/strong\u003e \u003ccode\u003e/api/v1/respondents/response/:responseId\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"live-demo\"\u003e\u003cstrong\u003eLive Demo\u003c/strong\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eFrontend: \u003ca href=\"https://categoryformbuilder.netlify.app\"\u003eDeployed Link\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eBackend: \u003ca href=\"https://formbuilderbackend-n00t.onrender.com\"\u003eDeployed Link\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpintu544%2Fformbuilderfrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpintu544%2Fformbuilderfrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpintu544%2Fformbuilderfrontend/lists"}