Guide to develop MERN application, step by step. Part 1

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.

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.