Before diving deep into the MERN Stack, you have to know the Technology Stack. There are a lot of Technology Stacks like the MERN Stack. So, a Technology Stack is which tech you are going to use for your application. Applications are built using three different categories of Technology.
What is Technology Stack?
Technology Stack is the combination of Front-end, Back-end, and Database. And each one of them has different tech, like for Front-end usually it’s – HTML, CSS, and JavaScript. You can use any framework or library like ReactJS or Angular. The same goes for Back-end and Database also.
- Front-end: This is the client-side part of the application that users interact with directly. It includes everything related to the user interface such as layouts, buttons, forms, and animations.
- Back-end: This is the server-side part of the application that handles business logic, authentication, authorization, and communication with the database.
- Database: This is where all the application data is stored, managed, and retrieved when needed.
Technology Stack can be custom where developers can choose the technologies depending on their project requirements or pre-built where the technologies have been pre-decided.
What is MERN Stack?
MERN – this keyword stands for MongoDB, ExpressJS, ReactJS, and NodeJS. MERN Stack is a predefined Technology Stack based on JavaScript.
- MongoDB: A NoSQL, document-oriented database used to store data in JSON-like format called BSON.
- ExpressJS: A lightweight web application framework for Node.js used to build APIs and handle HTTP requests.
- ReactJS: A front-end JavaScript library used to build fast, interactive, and reusable user interfaces.
- NodeJS: A JavaScript runtime environment that allows JavaScript to be executed on the server side.
As you can see, each character defines some tech in the MERN keyword – where the “R” represents ReactJS. Similar to MERN, we also have some other JavaScript-based Technology Stacks like MEAN and MEVN, where the character “A” represents Angular and “V” represents VueJS.
Express.js and Node.js work together as the core of the application’s middle layer, handling everything that happens between the user interface and the database. Node.js acts as the powerhouse, letting you run JavaScript code on the server side, while Express.js sits on top and helps organize tasks like routing requests, handling responses, and managing middleware. When you use the MERN Stack, you get to use JavaScript and JSON for both the Front-end and Back-end development, making the whole process smoother and more efficient.
How does the MERN Stack work?
MERN Stack architecture is very useful to create 3-tier architecture (Front-end, Back-end, and Database) applications, and the good thing is it’s entirely reliant on JavaScript and JSON.
Front-end Tier
The Front-end tier is built using ReactJS. React is responsible for rendering the user interface and handling user interactions. It communicates with the Back-end by sending HTTP requests (such as GET, POST, PUT, DELETE) to the server and updates the UI based on the responses received.
Back-end Tier
The Back-end tier is built using NodeJS and ExpressJS. Express handles routing, middleware, and API logic, while Node.js executes the server-side JavaScript code. This layer processes client requests, applies business logic, and communicates with the database.
Database Tier
The Database tier uses MongoDB to store application data. MongoDB stores data in collections and documents, making it flexible and scalable. The Back-end interacts with MongoDB to perform operations like creating, reading, updating, and deleting data.
How HTTP Requests Works?
In the MERN Stack, HTTP requests play a key role in communication between the Front-end and Back-end. When a user performs an action on the React application (like submitting a form or clicking a button), the Front-end sends an HTTP request to the Express server.
The Express server receives the request, processes it using middleware and route handlers, and then interacts with MongoDB if data needs to be fetched or stored. Once the operation is completed, the server sends an HTTP response back to the React Front-end, usually in JSON format.
React then uses this response to update the user interface accordingly. This request–response cycle continues throughout the application, enabling smooth and dynamic interaction between the user, server, and database.