What is the WorkFlow?

A workFlow is the specific sequence of processes that are carried out for the smooth work process. It is all different for different stacks. It can be modified but a standard workflow is always there to explain the basic way to get work done.

(Note:- Workflow is not a coding term it’s used to make our code work efficiently. )

This helps us to organize code in a project and avoid the bulk of code in the same file and also reduces the repetition of code. The workFlow we use is Models view controller(MVC)

What is MVC?

MVC is the workflow based on three major components of the MERN stack. They are Models of views/routes and controllers.

• The Major three-component handles the particular task for carrying out the workflow.
• CONTROLLER
  • Controllers establish a connection between the router and models. 
  • As routers and models do not interact directly they carry instruction through controllers.
  •  This is the reason most functions and middleware objects are coded in the controller.which can be used anywhere.
• ROUTES
  • Routes handle all the routing process in the project.
  • This is used to create API and then can be used with different front end technologies. example:- react, angular, or basic HTML CSS js.
• MODELS
  • Models handle all the Schema required in the project
  • It can be used to create a connection between multiple schemas.
  • It handles the information and exchanges it with the database(MongoDB). Which stores all of the information.
• The basic Diagram Representing the MVC WorkFlow

Views can be changed with any Front-end technology.

TIP: This workflow can be Tested without creating  Views initially and focusing on the back-end of code and then moving on to the front-end part. This helps to create the architecture of the project and later the outlook can be formatted accordingly. 

Folder Structure for a MERN Application

Many people have this question: why folder structure matters?

⇒ So the answer to that is the Node js we work on has multiple folders and files and this becomes a mess as the size of the project grows.

⇒ The Folder structure provides us with the correct sense of file so that a particular file can be stored in a particular folder.

⇒ This lets the code be organized and can be easily readable and can be adapted to new changes.

⇒ The future upgrades and adding functionality and features have their space created already.

⇒ This also helps for the third person to understand the code and even it helps us to understand if we see the code after a few days’ gap.

STEPS:

1. Create the main project folder “abc”
2. Inside this folder create 3 more folders named router, controller and models
3. Create a new folder view. (optional for front-end)
4. Create a file named app.js inside the core directory i.e abc

This is the basic structure of our project.

All the routes file will be in routes folder, models, and schema in the models folder and all interactive function and middleware in controller folder.