Guide to develop MERN application, step by step. Part 1
Tags: webdev, typescript, mern, node
Published: 2022-03-04 18:38:30

## **Comprehensive guide to build a Full-stack Nodejs Application Part 1 (Stack and Architecture)**


 

> What is the MERN Stack
> Why we use MERN
> Pros n Cons of MERN
> MERN Application Architecture/plan
> What we are building

---
## **What is the MERN Stack?**
MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

1. MongoDB - document database
2. Express - Node.js web framework
3. React - a client-side JavaScript framework
4. Node - the premier JavaScript web server

Express and Node make up the middle (application) tier,. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform.
 
---

## **Why choose MERN Stack?**

The MERN stack’s main advantage in web development is that each line of code is written in JavaScript/Typescript. By using a single programming language, the MERN stack eliminates the need for context switching and greatly simplifies the entire development process, giving web developers the tools to create efficient web applications with far less effort.

---

## **Advantages of MERN Stack!**

1. UI rendering and performance
React JS is the best when it is about UI layer abstraction it provides you the freedom to build the application and organize the code however you want. 
2. Cost-Effective
As MERN Stack uses one language throughout that is JavaScript/Typescript so it will be beneficial for a company to hire JavaScript experts only rather than hiring different specialists for different technology. This move will save a lot of time and money.
3. Open Source
All technologies that are involved in MERN are open-source. This feature allows a developer to get solutions to queries that may evolve during development, from the available open portals. As a result, it will be beneficial for a developer.
4. Easy to switch between client and server
As everything is written in one language this is why MERN is simple and fast. And also it is easy to switch between client and server.

---

## **Disadvantages of MERN Stack!**

1. Productivity
Since React is just a library it uses many third-party libraries which provides lower developer productivity. And due to this upgrading, the React code requires more effort.
2. Large-Scale Applications
It becomes difficult with MERN to make a large project in which many developers are involved. MERN stack is best suited for single-page applications.
3. Error prevention:
If you want a technology stack that prevents common coding errors by its very design, then the MEAN stack is a better choice. As Angular uses Typescript, so prevents common coding errors at the coding stage itself. However, React lags behind here.

---

## **MERN App Architecture**
The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.

![MERN Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d7ub3zj3z1n8yqwslbj.jpeg)
## **What we are building**
_Front to back or back to front?? Doesn't matter as long as u have a plan_
A Full Stack project requires working on many technologies. But, without proper planning, nothing goes well during the project. You’ll face challenges every now and then if you don’t have a plan. Here’s the perfect roadmap for you to follow to yield great results.

- Frontend scope
We are developing Recyski, a digital waste trading platform that allows users and waste collectors to trade/recycle wastes. This is an alternative to the e-commerce example. These libraries are optional can be substituted with your preference:
> Redux for state management
> Bootstrap for responsive UI
> Fontawesome icons
> Google fonts

- Backend scope
Nodejs and Express will be useful in handling server side. After the entire MERN stack app is complete, you will learn how to refactor the app to make the backend completely serverless. The new backend will use MongoDB Realm instead of Express and Node.
> NodeJS and ExpressJS build the server-side/backend of the application.
> REST APIs 
> Database management
> User authentication and authorization is controlled here

- Database Server
MongoDB is a NoSQL database where each record is a document comprising of key-value pairs that are similar to JSON (JavaScript Object Notation) objects. MongoDB is flexible and allows its users to create schema, databases, tables, etc. Documents that are identifiable by a primary key make up the basic unit of MongoDB.