Introduction to MERN stack
application.
Prof. Sunita D Rathod
Introduction
● The MERN Stack is a popular JavaScript-based technology stack used for
developing full-stack web applications.
● It enables developers to build both the front-end and back-end of an
application using JavaScript.
React Express [Link] MongoDB
UI / browser API/middleware runtime database
Overview of MERN stack
MERN is a full-stack JavaScript framework made up of four technologies:
M — MongoDB is the database. Instead of tables and rows, it stores data as
flexible JSON-like documents, making it natural to work with in JavaScript.
E — [Link] is a lightweight web framework that runs on [Link]. It handles
your API routes, processes incoming HTTP requests, and connects your frontend
to the database.
N — [Link] is the JavaScript runtime that powers the server. It lets you run
JavaScript outside the browser — so your entire stack (front and back) is written
in one language.
R — React is the frontend library that builds the user interface. It runs in the
browser, fetches data from Express via HTTP/JSON, and renders it as a
dynamic UI.
Components of MERN Stack
Technology Purpose
MongoDB NoSQL database used to store application data in
JSON-like documents.
[Link] Web application framework for [Link] used to build
RESTful APIs and handle server-side logic.
[Link] Front-end JavaScript library used to create interactive user
interfaces.
[Link] JavaScript runtime environment that executes server-side
code.
Architecture of MERN Stack
React (Frontend)
HTTP Requests
[Link] + [Link] (Backend Server)
Database Operations
MongoDB (Database)
MERN Stack Working
1. The user interacts with the React-based user interface.
2. React sends requests to the Express/[Link] server.
3. The server processes the requests and performs business logic.
4. MongoDB stores or retrieves the required data.
5. The server sends the response back to React.
6. React updates the user interface with the received data.
Features of MERN Stack
● Full-stack development using JavaScript.
● Open-source technologies.
● Fast and scalable application development.
● Reusable React components.
● Flexible document-based database.
● RESTful API support.
● Easy integration with third-party services.
Advantages of MERN Stack
● Single programming language (JavaScript) across the entire application.
● Rapid development and deployment.
● Strong community support.
● High performance and scalability.
● Easy maintenance and debugging.
● Suitable for cloud-based applications.
Applications Built Using MERN
● E-commerce websites
● Social media platforms
● Content Management Systems (CMS)
● Online learning portals
● Project management systems
● Healthcare management systems
● Banking and finance applications
Summary
The MERN Stack is a powerful and efficient framework for developing modern
web applications.
By combining MongoDB, [Link], React, and [Link], developers can create
scalable, dynamic, and high-performance applications using a single programming
language, JavaScript, throughout the entire development process.