Frontend : ReactJS, Typescript
UI Framework : Material UI
Notification library : react-hot-toast
Backend: NodeJS, Express and Typescript
Database : MongoDB (NoSql)
- Register and Login the user.
- Creating the new form.
- Opening the created forms.
- Editing the form : a.Adding Questions: Click on the question type you want to add Question Types: multiple choice, checkboxes, short answer, paragraph, date and time. from the toolbar. Enter your question text and set any additional options (e.g., choices for multiple-choice questions). b.Editing Questions: Click on a question to edit its text or options. Use the "Required" toggle at the bottom right of each question to make it mandatory or optional. c.Adding, removing and editing the option d.Copying the existing question e.Deleting the question
- User can drag and drop the questions to reorder the questions
- When ever user do above operations the tool box typically adjusts its position beside the question box you are actively editing.
- After scrolling, the toolbox typically adjusts its position beside the question box you are actively editing.
- User can view the form by clicking the Eye icon from form header
- User can click on Save button to save the form
- User can delete the form by clicking the delete icon from form header
- User can share the link of a document to ge the response
- User can see who all have responded in the response tab, live update happens here table will be updated as soon as user response to the form
BE code: https://github.com/sudeepmanasali/GFC-BE-APP
Project Live : https://gf-clone-c266a.web.app/
Username: admin@gmail.com
Password: password
Demo: https://youtu.be/4wCl91Rrpww
Screen shots
Sign up form
Sign in form
Homepage with guide
Home page, forms with Folder view
Home page, forms with Table view
Edit form page, with scrollable tool box
Form view
Response Table
Viewing user response
Deleting the form
Share the link of the form to collect response
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.