This device is not compatible.
You will learn to:
Use the Axios library to connect React components to the Node.js server.
Connect the Node.js server to the database and retrieve data from MongoDB.
Use React state management hooks to share data between functional components.
Build accessible drag-and-drop experiences into an application.
Skills
Web Development
API Development
Front-end Development
Prerequisites
Basic understanding of Node.js
Basic understanding of MongoDB
Basic understanding of JavaScript
Basic understanding of React components and state management
Technologies
React
MongoDB
Express
Node.js
Project Description
In this project, we’ll build a custom form maker using the MERN stack. The application will allow users to create custom forms, get responses, and perform other CRUD operations on them.
We’ll use the Express framework for Node.js to develop the backend API, which will interact with the MongoDB database to create, fetch, and store forms. After setting up the backend, we’ll implement the frontend components and add the functionalities to create, view, edit, and delete forms. We’ll also add the functionality to rearrange the different fields of the form by dragging them during the form creation. Moreover, we’ll allow authors to view the form responses.
The application’s components are styled with prewritten CSS code and Bootstrap to provide an initial template for a custom form maker application.
The final layout of the application will look as follows:
Project Tasks
1
Introduction
Task 0: Get Started
2
Create the Backend for Form Management
Task 1: Set Up the Node.js Server and MongoDB Connection
Task 2: Create a Form Model
Task 3: Create Form Routes
3
Develop the AuthorView Page of the Form
Task 4: Implement the Header Component
Task 5: Develop the AuthorView Page
Task 6: Implement the FormPreview Component
Task 7: Implement the AddFormField Component
Task 8: Implement the EditFieldModal Component
4
Form Management
Task 9: Develop the FormsList Page
Task 10: Develop the UserView Page
Task 11: Implement the FormResponsesModal Component
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.