MERN: A Full-Stack Development

Abstract

In this modern world, we all are attracted to learning various technologies. So in this paper, we work and find out such top technology which used in the corporate world. So you will be familiar with the flow of these modern web technologies. Keywords: Back-End, Database, Digital Marketing, Domain and Hosting, Front-End, Full-Stack Development, Git and Github, Google Analytics, Heroku, Linux, MERN stack, Netlify, VPS, etc.

Introduction

I. INTRODUCTION

This document is covering the journey of a full-stack development from a frontend to deploying a site. We cover all the basic technology which we used in the final year project. Many of us do not know about full-stack development. They don’t know what is the actual process or technology learned by full-stack developers. Our small research helps all those people who are not aware of all this stuff. We are going through this process and we know how full-stack developers work and what type of technology they know. Also, our project is based on this technology. We are gathering information from here and there and thinking and researching on all this stuff and our main focus is on the JavaScript-based stack.

Full-stack web development is a subset of web development that encompasses all of the responsibilities involved in creating websites for intranet or internet hosting.

It helps to find out a perfect solution for all the front-end, testing, mobile application back-end, etc. full-stack developer work on all this, and also it will take care of the entire procedure of a project.  There are so many full-stack development frameworks available in the market like LAMP stack, MEAN stack, and MERN stack. In this, we can understand one by one and also our main focus on the MERN stack.

II. FRONT-END DEVELOPMENT

Front-end development is nothing but creating user interfaces for the website. It is learning UI with the help of HTML CSS, JavaScript. So we create a user-friendly interface.

The client-side of the website is an e-commerce store that always runs in any browser or over the internet. The frontend tech stack is a collection of loosely defined tools that developers use to create the front end.

A. HTML (HyperText Markup Language) and CSS

It is one of the standard mark-up languages for creating a web page. It describes the structure of web pages. It consists of a series of elements. These elements tell the browser how to display the content and this element represents by tags.

It is a language which use to style the hypertext created by HTML. For example style the color, background, font, spacing, etc.

CSS styles that content. Bootstrap is a useful framework for HTML and CSS management.

B. JavaScript

It is one of the most popular programming languages. We can use JavaScript in the frontend as well as in the backend.  For time-saving and boost in programming, there is some framework used by developer like jQuery, ReactJs, etc. We create UI by Front-End Technology like Html and CSS but it is not interactive. To create the interactive website we need JavaScript.

It is a programming language that allows you to make web pages interactive. There are some Libraries available that help for faster and easier web development; there are various JavaScript libraries (such as jQuery, React.js, and Zepto.js) and frameworks (such as Angular, Vue, Node.js).

C. Front-end Framework

As we know that everyone wants quick and fast work so boost and save our development time we use some framework. For example Bootstrap, Material-UI, Angular JS and ReactJS, etc.

A database provides a place for your web application's data to be stored. Databases are split into two types: relational and non-relational (the latter being broken into multiple categories), each with its own set of advantages and disadvantages.

1. Bootstrap: It is the most popular front-end framework and easy to use. It is a free and open-source framework. Developer’s mainly used to styling the web pages.  Most of the developers use Bootstrap for CSS.
2. React.JS: There are so many JavaScript frameworks but we consider here only React.JS because it is easy to use than other frameworks like Angular.JS, Vue.js, etc. React.JS is managed by and developed by Facebook Community.
3. Material-UI: It provides a  library to React or in other words, we can say that Frontend framework for React and help to React in Styling. Developers don’t need to write a code from starting or scratch.

III. BACK-END DEVELOPMENT

It is also known as server-side development. It is works in the background and the users don't aware of these contains. We can say it is behind-the-scene activity. This happens or occurs when the user clicks or performs any action on a website created by Frontend technology. It mainly focuses on databases, backend logic, APIs, and Servers. It is called backend development. In the backend development, we can use various programming languages for example JavaScript, python, PHP, Ruby, etc., and its framework.

In our project, we mainly focus on JavaScript so we are going to use JavaScript as a backend language. A database provides a place for your web application's data to be stored.

A. Node.js

It is an open-source and backend JavaScript runtime environment. This is created in the chrome V8 engine. The use of Node.js is to run or execute the JavaScript code outside the web browser. We can aware of one thing that we use NodeJs as backend but it helps to run the frontend as well as backend code. It is not a programming language. It is based on JavaScript. This technology is mostly used by those developers who use or prefer JavaScript as a backend language.

B. Express.js

Express.js or we can say Express, is a backend Node.js framework. It is free and open-source software. It is used for creating web applications and APIs (Application Programming Interface). It is one of the most used backend frameworks by the developer. It is based on JavaScript. The primary use of Express is creating and building APIs means it handle or accept the request and sent the appropriate response to the user.

IV. DATABASE

It is a collection of information or data in an organized manner. Data is generally stored in a computer system. A database is typically controlled or managed by a database management system (DBMS). This stored data is easily accessed, managed, modified by the user. There are some most widely used database software or DBMSs include MySQL, MongoDB, Microsoft SQL Server, FileMaker Pro, Oracle Database, dBAS, etc. But in our case, we mainly focus on MongoDB. The main reason behind this is MongoDB used JavaScript. So we try to use this database. There are two types of databases one is relational and another one is a non-relational database. A database provides a place for your web application's data to be stored. Databases are split into two types: relational and non-relational (the latter being broken into multiple categories), each with its own set of advantages and disadvantages. The following are the most widely used databases in web development: MySQL (relational), PostgreSQL (relational), MongoDB (non-relational, document).

A. Relational Database

A relational database is a type of electrical database based on the relational model. A special type of system that helps to manage relational databases is called a relational database management system. Most of the relational database systems used SQL for managing the database. A relational database system is also called RDBMS because the data is stored in the row and columns format that is called the table.

Standard relational databases authorize users to maintain predefined data relationships. The most popular examples of relational databases include Oracle Database, Microsoft SQL Server, MySQL, etc.

B. Non-relational database

A non-relational database is exactly the opposite of a relational database. It is a database that does not use in the tabular format. In this type of database, we use a storage model like JSON format instead of traditionally use database format. Non-relational databases use a storage model that is optimized for specific requirements.  The main difference between relational or traditional relational databases is that store their data in a tabular form.

A non-relational database is also called NoSQL. Non-relational databases examples are MongoDB, Couchbase and Apache HBase, Apache Cassandra, Redis, etc. NoSQL is used for Rapid Application Development.  The most developer selects NoSQL as a database because NoSQL is more flexible data storage and also has limited structure limitations.

V. WEB STACK

It is a collection of all those software required for Web development. A Web stack contains a minimum of an operating system (OS), a programming language (JavaScript), database software (MongoDB) and a Web server is an ordered collection of software that performs a particular task. In our project, we select MERN as our stack.

Using well-known stacks will enable us to create and maintain similar products with the same architecture. Now we see some widely used or most popular stacks.

It is an open-source and backend JavaScript runtime environment. This is create in the chrome V8 engine. The use of NodeJs is to run or execute the JavaScript code outside the web browser. We can aware of one thing that we use NodeJs as backend but it helps to run the frontend as well as backend code. It is not a programming language. It is based on JavaScript. This technology is mostly used by those developers who use or prefer JavaScript as a backend language..

A. MERN

MERN complete with MongoDB, Express, React, Node. These four key technologies that make up our stack perform our task with help of this. MERN is one of the most widely used web stacks. It is easy to use and also use in Mobile development with help of React Native.

In the MERN stack we use the same technology only difference is we use react instead of angular  MongoDB, React, Express and Node. React.js is an open-source JavaSript library. It uses JavaScript, JSX (Javascript XML). Its offers better productivity. It offers far better documentation. It supports the mobile application.

React.js is a favorite development stack for all developers. React.js is a JavaScript framework used for creating dynamic client-side applications. Using the help of React.js we can build up any complex application through simple components. We connect them to data on our backend server. 

MongoDB is used to store the website data of back-end applications in JSON format. ExpressJS is framework of NodeJS.  Express.js is a back-end application that runs on top of Node.js. ReactJS is a library that facilitates creating the user interface components of single-page web applications. NodeJS provides the runtime environment for JavaScript on the back-end web application It can help to execute code outside the browser.

B. MEAN

The term MEAN stack stands for or to a collection of JavaScript-based technologies. In which there abbreviation like MERN but the main difference is Angular used instead of React to develop web applications. From client to server to database, MEAN is referring as full-stack JavaScript.

MEAN stack provides the same features as MERN. MERN can also provide use of the power of modern single-page applications, as it does not require refreshing a web page s.  Most of the traditional web applications use this stack.

In the mean stack, we use MongoDB, Angular, Express, and Node. Angular is a JavaScript framework. It uses Typescript language. It offers low productivity. Its learning curve is steep. It does not support mobile applications.

C. LAMP

LAMP stands for Linux, Apache, MySQL, and PHP, and also instead of PHP we use Python in this stack. These stacks provide together a proven set of software for delivering high-performance web applications based on PHP and Python.

VI. MERN STACK

Now we see in detail about MERN stack development, because we use MERN stack in our Project. It is one of the collections of the several web stack also used in the MEAN stack (MongoDB Express Angular Node), The main difference is we used Angular.js in the MEAN stack where we use React.js in the MERN stack.

We generally used Angular.js as frontend framework. It is replaced with React.js. In other variants, we also called MEVN (MongoDB, Express, Vue, Node). In which we include Vue.js. The entire above are used frontend JavaScript framework and it will work.              

A. What is the MERN Stack?

MERN stands for MongoDB, Express, React, Node. With these technologies that make up the stack.

1. MongoDB - document database
2. Express(.js) - Node.js web framework
3. React(.js) - a client-side JavaScript framework
4. Node(.js) – NODE.js is a JavaScript based web server

In the MERN stack, Express and Node are used in the middle (application) order of architecture. Express.js is a server-side web framework. Where Node.js is the popular JavaScript based server platform. In which we used React.js. in which frontend stack you choose, ME(RVA)N is the best approach to working with JavaScript language.

B. How Does the MERN Stack Work?

MERN stack work based on the other Stack. In which the MERN architecture permits you to easily construct a 3-tier architecture (frontend, backend, database). We entirely used JavaScript and JSON.

C. React.js Front End

The main component in the MERN stack is React.js. The JavaScript frontend framework is used for creating dynamic client-side applications. In that React.js help developer builds a complex application with a complex interface. React.js is easy to connect with servers. It is based on simple Components.   Also, render them as HTML.  React’s is the best choice for handling stateful, data-driven interfaces with minimal code and minimal pain.  It will satisfy and it would be expected from a modern web framework. It will help to handle and give you great support for forms, error handling, events, lists.

1. Features of Express.js

a. It is easy to learn and explore. It is mostly combined with basic HTML and JavaScript concepts and also has some extra and additional concepts. But, we remember one thing while using this sometimes it is required to get extra knowledge of the Javascript library.

b. The basic concept of the React framework is COMPONENTS. These components can be created once and then we can use them in multiple applications.No need to write code repeatedly.

c. Express.js helps to boost the web application. Express uses virtual DOM which compares the components’ previous states and after that compare and update.

d. We can use it for both web and mobile app development. React Native is a framework that is based on React.js. It is used to create web applications.

e. React is a library. It will give you the tools to build your application fastly. With the help of this library, a developer can design according to him or her. And also choose any function as per the choice of him.

f. Developer knows React easily runs on the server. With the help of this code, we can run our application on both browsers and servers. It means you can create pages on the server.  

D. Express.js and Node.js Server Tier

Now after the level down of the Express.js server, it will be a side framework, running inside a Node.js server. Express.js is indeed exactly what it is. Express.js also helps in URL Routing. It will help in handling HTTP requests and responses.

By making these HTTP Requests it gives GETs or POSTs from your React.js front-end. With the help of this, you can connect to Express.js functions that power your application. It turns to use MongoDB’s Node.js drivers. Either call-back for using Promises, to access or update data in your MongoDB database.

1. Features of Express.js

a. It makes Node.js web application development fast.

b. Easy to configure and helps to customize.

c. Express.js allows you to define the routes of your application based on HTTP. And also support with URLs.

d. It includes various middleware modules. In that, you can use request and response tasks.

e. Express.js helps you to handle middleware.

f. Easy to connect with databases and help to create a REST API

E. MongoDB Database Tier

In that case, MongoDB comes into the scenario.  It created in your React.js front end can be sent to the Express.js server. Where they can be processed and (assuming they’re valid) stored directly in MongoDB. For later retrieval. After, if you’re building in the cloud or stored in the cloud you need Atlas.

1. Features of MongoDB

a. It has Document-Oriented storage.

b. Has a single master and spreading data around several clusters. with built-in replication support.

c. It is easy to use. Although databases ship with limited support.  MongoDB has drivers for every language.

d. Provide horizontal scalability.

e. Robust, flexible, and scale-able.

F. Why choose the MERN stack?

We choose MERN because we start with MongoDB, the document database at the root of the MERN stack. MongoDB was designed to store JSON data. We use everything from its command-line interface to its query language. It will be built on JSON and JavaScript.  MongoDB works extremely well with Node.js It helps to make storing, manipulate, and represent JSON data. At every level of the architecture of your application is incredibly easy. For cloud-native applications, MongoDB Atlas helps and is easy to use. By giving you an auto-scaling MongoDB cluster on the cloud provider of your choice It is as easy as a few button clicks.

Express.js and React.js make the JavaScript application MERN full-stack. Express.js is a server-side application framework. It wraps HTTP requests and responses. It makes it easy to map URLs to server-side functions. React.js is a front-end JavaScript framework. This helps to build interactive user interfaces in HTML. And also help to communicate with a remote server.

JSON data always flow from front to back. JSON data make applications fast and also helps to Debug. You only have to know one basic programming language.JSON document structure, to understand the whole architecture.

MERN is the stack of choice for all web developers. This helps to move quickly, particularly for those with React.js experience.

G. MERN Use Cases

1. Efficiency: Efficient code is more. It takes less time can be developed with MERN Stack.
2. Testing: It helps to Test an application and also makes it easy to test.
3. Implementation: A hybrid code formatting called React.js is JSX. It helps to implement ideas more quickly and easily.
4. JavaScript-based: We write every code in JavaScript, so there is no need for context switching.

VII. ADVANTAGES OF MERN STACK

A. UI Rendering and Performance

React JS is the best when developers think about styling or UI layer abstraction. React.js is only a library, which provides you the freedom of use and helps to build the application. Also, help organize the code however you want. So, developers choose it. It is better than the other framework like Angular in terms of UI rendering and performance.

B. Cost-Effective

As MERN Stack we use one language. JavaScript is that one language. It will be beneficial for a company to hire JavaScript developers. They choose rather than hiring different specialists for different technology. This will help to save a lot of time as well as money.

C. Open Source

MERN is a are open-source. This technology allows a developer to get solutions to queries. that may evolve during development. It will help to be beneficial for a developer.

D. Easy to Switch Between Client and Server

We know that everything is written in one language this is why MERN is considered fast and simple. Also, it is easy to switch between server and client.

VIII DEPLOYMENT

Software deployment is the process of running the application on a server. It means all others are using our application over the internet. Application deployment also refers to the process of making the application work on a target device, whether it be a test server, production environment, or our application user’s computer or mobile device.

A. Linux and Cyber Security

It is an open-source operating system (OS). We must learn this operating system because this OS is the most secure system. An operating system is a system that directly maintains a system's hardware and its resources. For example CPU, memory, storage, etc. The OS is communicating medium between applications and hardware. It makes the connections between all of your software and the physical resources that connect to the system.

It is the practice of protecting our system from unknown networks and programs from digital attacks. Their main motto is accessing, changing, or destroying sensitive information from our database. They want money or extort money from users; or website owners.

B. Domain and Hosting

Now we see domain and hosting, both are different things. They're connected. We need both a domain name as well a web hosting account to create a website. So users easily found and use our product and service over the internet This means that you can't build a website without any one of them

C. VPS

VPS (Virtual Private Server) is a hosting service that uses help to host our site over the internet. This technology provides you with private resources on a server. For example, you host your site on Digital Ocean.

VPS provides you with more resources like RAM, disk space, CPU cores, etc. Shared or cloud hosting will also provide you with VPS.

It is the practice of protecting our system from unknown networks and programs from digital attacks. Their main motto is accessing, changing, or destroying sensitive information from our database. They want money or extort money from users; or website owners..

D. Google Analytics

It is a web analytics service provided by Google in which they provide you statistics and basic analytical tools of your website.  With the help of these analytics, you change in search engine optimization (SEO) and marketing.

E. Git and Github

Git is free and open-source software in which they work on the based version control system. This helps us to manage and handle our website code. In this, our projects boost with speed and efficiency.

It is a version control platform for code hosting. It helps us to work together on projects from anywhere.

IX. DIGITAL MARKETING

Digital Marketing also called an online marketing. It is the promotion of brands or our websites to connect with customers using the internet and other forms of digital platforms. Digital marketing means marketing through email, social media, and web-based platforms. Also text and multimedia messages as a marketing channel.

We can also call Internet Marketing.

A. Search Engine Optimization (SEO)

SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration, content relevance, and link popularity so its pages can become easily findable, more relevant.

B. Social Media Marketing

This marketing strategy is the use of social media platforms. Using this we connect with your audience to build your brand. And also help to increase sales, and drive website traffic. The most popular and used social media platforms are Facebook, Instagram, Twitter YouTube, etc.

This type of marketing strategy is used to engage, retain and attract, and clients. We create and share relevant articles and videos, on social media. This strategy helps to grow the business and helps to promote brand awareness, and keeps your business top of mind.

C. Email Marketing  and Affiliate Marketing

This type of marketing included sending a commercial message typically to a group of people, using electronic mail platform. And this way we are sent every mail to a current and potential customer. And is considered email marketing. It includes advertisements, request business, and other related information.

Affiliate marketing is that type of marketing strategy in which involves an advertising model in which a company pays others. For example bloggers are affiliated. They advertise our products and services through blogs. And they generate sales through their article.  The main place for Affiliate is on their website and blog app.

X. SUMMARY

So now we are aware about all this technologies, which involved in MERN STACK. We have also learned how giant React.js is in today’s tech world. And our MERN VS MEAN concludes that the selection of stack completely depends upon the functional requirement of the system to be developed.

At the current situation  web development technologies are going through exemplary modify and change with time, it is also inevitable that expectations of users are aloft. Consequently, developers work hard day and night with their full efficacy to provide a website with having better user experience, lesser loading time, and mobile friendliness.

Conclusion

The given research paper is helpful to all of the web developers and they are aware of the full-stack development. Do we try to explain what full-stack development is? What types of technologies are used in this stack. While we are working on our project we choose this full-stack path. We try our best to provide you with the one-and-one latest web technology. Hope our research paper will help all those who want to become full-stack web developers. Each developer may have their preferences for web stacks. When it comes to selecting a web stack, you should consider some factors like your project\\\'s requirements, Costs of development and upkeep, consider scalability, Security of the tools, etc. And finally we all are familiar with these modern technologies.

References

[1] Web Docs: Django Web Framework available on: [2] Bass, B.M. (1990), “From transactional to transformational leadership: learning to share the vision”, Organizational Dynamics, Vol. 18 No. 3, pp. 19-31. [3] Bin, B.S. and Park, J.K. (2002), “An empirical study on the success factors of a small business startingup”, The Asia Pacific journal of Small Business, Vol. 24 No. 3, pp. 135-158 [4] Nodejs.org. 2020. Nodejs. Accessed on 28 April 2020 [online] Available at: https://nodejs.org/ [5] Jyoti Shetty, Deepika Dash, Akshaya Kumar Joish, Guruprasad C “Review Paper on Web Frameworks, Databases and Web Stacks” 2020 IRJET-V7141078 [6] techopedia: Web Stack. Available at:

Copyright

Copyright © 2022 Yogesh Baiskar, Priyas Paulzagade, Krutik Koradia, Pramod Ingole, Dhiraj Shirbhate. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.