A “stack” can refer to any combination of programming languages and technologies. There are two main types of stacks – technology stacks and application stacks. The MERN stack is a technology stack, which entails a cross-disciplinary approach in a software development process.

The MERN stack has gained traction in recent times. The MERN stack is primarily used to design top-end web applications. The MERN stack is a JS-based stack which facilitates the smooth flow of web development processes.

The MERN stack consists of 4 technologies which make up its name:

• MongoDB – Used as a document-based NoSQL database.
• Express – It’s a minimalist web framework for Node.js
• React – It’s a JS front-end library for UI development.
• Node.js – It is a JavaScript runtime built on Chrome’s V8 JavaScript engine used for allowing JS to run server-side.

Let’s dive into the nitty-gritty of building a CRUD app, taking the example of a TODO app, using MERN stack without further ado.

Application Setup

The absolute prerequisite for creating any application using the MERN stack is to setup node.js in the system. The command $ node-v can be used to check if node.js is already installed and its current version.

A react project is then to be created using the script create-react-app. This script is executed using the npx command without any other installation requirements and by simply writing the command $ npx create-react-app mean-todo-app. This command leads to the creation of a to-do app project directory structure along with a default template and the necessary dependencies in React.

To change into this folder, we simply need to type the command $cd mern-todo-app prior to starting web server development with the script $ npm start

1.  Adding bootstrap to the react project-  Once the basic things are setup we need to add the Bootstrap framework to the project because it will be essential to use CSS classes while building the interface. Executing the command $ npm install bootstrap inside the project folder will add bootstrap the library and CSS file of bootstrap in App.js can be imported using bootstrap/dist/css/bootstrap.min.cs 

2. Setting up the React Router- Once the CSS file is imported the project react router DOM needs to be added. This can be done via the command $ npm install react-router-dom. Once this package is installed, routing configuration is to be added.

A new route element will be added for each of the routes required by the application. Also, the attributes components will be utilized to set the route configuration. The routing path is set using the attribute path of the component.

3. Component creation-  A new directory needs to be created for making components. Also, one needs to make new files as per the requirement. Adding react component to the directory is essential for the proper implementation of these components.

4. Navigation and Layout creation- Using the bootstrap library, we can create a basic layout and navigation menu for the app. The CSS classes in the bootstrap library can implement the web application UI. 

After this is done, we can check the changes in the web browser. It would be good to create a navigation bar that shows some options like Create To-do and To-do list for this application.

Backend Setup

Once the application is set up, we need to understand how to build the backend. This requires knowledge of building server using node.js/Express and also setup MongoDB to connect the database from the server Node.js/Express using the Mongoose library.

HTTP endpoints to cover scenarios like retrieving to-do lists for items using HTTP GET requests or to retrieve a particular To-do item using the ID must be created.

Functionality to support the creation of new to-do items in the database using HTTP POST and item updates must also be considered.

1. Initiating the backend-  A package.json file needs to be set up in the project folder and dependencies are to be added to this json file. The Express framework packages are mandatory in this regard and must be included as dependencies.

CORS also provides Express middleware which offers a greater degree of flexibility. The CORS mechanism allows restricted resources on web pages to request endpoints outside the domain. Body parser, a Node.js middleware, is also essential to be added to the dependency file. Lastly, the Mongoose framework is to be considered for accessing MongoDB in an Object-Oriented way.

Finally, the global package needs to be installed by implementing the command $ npm install –g nodemon. This will automatically start the server.

2. MongoDB installation- Once the server has been set up, Node.js/Express should be used to set up a MongoDB database. This requires MongoDB to be installed in the system if an installation has not been done already. Also, one must provide read-write permissions for the directory in the DB.

3. Creating a database in MongoDB- Creating a database in MongoDB entails connecting to the database server using a MongoDB client. The Mongoose schema is then required to access the database from OOP-based frameworks.

4. Server endpoint creation- This step deals with creating a complete server implementation in the server.js file. This is facilitated using the To-Do schema created and added for implementing API endpoints.

Linking Front and Backend

The third step is to connect the front-end with the backend. This allows the user to create the to-do items as well as get an overview of the to-do lists. The communication is handled by means of HTTP requests that are directed to server endpoints created in the step above.

Axios are also installed along with finishing the to-do component implementation task. All that needs to be done now is to get the application ready for use.

Wrapping up steps

This section details the final steps required to build the CRUD application using MERN stack. Emphasis on put on steps to complete the front-end to easily allow users to edit to-do items and get them to complete when the task is done.

1. Linking the “Edit To-do” component- The link for the to-do component will be present in the output returned by the component itself. The to-do active at the time of query will have its ID present in the URL itself. On the application of the CSS class, the test information of a to-do item is displayed including texts crossed out.

2. “Edit To-do” component implementation- To implement the Edit To-do functionality in the edit-todo.component.js file, an Axios library is to be created first. Then a class constructor needs to be added to set the initial state. The state object created will have four properties which will represent an individual to-do items. 

The component will require a lifecycle method to retrieve to-do items from the backend as well as to update active to-do items. Axios will be used again to send HTTP GET requests to request the backend to retrieve information. 

ID is used as a URL parameter to allow access to the required information. This will allow the user to check the availability of to-do items for editing and make the required changes.

A Final Word

MERN stack development offers a plethora of benefits like:

• The MERN stack covers the entire development cycle from Front-end to Back-end using JS.
• It supports MVC architecture for the smooth development process.
• It allows developers to know only JS and JSON for development.
• Has an extensive set of testing tools.
• Has good open-source community support.

Chapter247 Infotech, is a custom software development company with more than 6 years of experience in creating customized software to suit customer needs. Our stellar track record in custom Web and Mobile application development by utilizing MERN stack development techniques speaks for itself and through the testimony of clients like FedEx, Fertile Frog, Cushion Kingdom, SSA Stores, Renotech, DropDesk, Fixer, Tessa and QIPOST.

Contact us for specialized web development services using MERN stacks to suit your business needs and see your venture prosper.