The document is a beginner's guide to MERN stack development, outlining essential components including frontend technologies (HTML, CSS, JavaScript), backend logic (Node.js, Express.js), and database management (MongoDB). It highlights the advantages of using the MERN stack such as a unified language, flexibility, and scalability, making it suitable for a range of applications from startups to large enterprises. The presentation emphasizes the importance of consistent practice and learning to thrive in modern web development.

1. MERN STACK
DEVELOPMENT: A
BEGINNER'S GUIDE
Modern Web Application Development
Presentation By:
Mohit Shaharwale,
Vice Campus Organiser,
GDG-NBNSCOE
GDG NBNSCOE

2. WHAT IS A
TECH STACK ?
• A tech stack is a combination of technologies,
programming languages, frameworks, libraries,
databases, and tools used together to develop a
software application
• Think of it like a set of building blocks that work
together to create a complete software solution
• Analogous to a chef's toolkit - each tool serves a
specific purpose in creating a final dish
GDG NBNSCOE

3. IMPORTANCE IN
MODERN WEB
DEVELOPMENT
GDG NBNSCOE
• Provides a structured approach to
building applications
• Ensures compatibility and seamless
integration between different
technologies
• Helps in:
⚬ Efficient development
⚬ Scalability of applications
⚬ Faster time-to-market
⚬ Consistent performance
⚬ Easier maintenance and updates

4. COMPONENTS OF A
FULL-STACK
DEVELOPMENT
ENVIRONMENT
GDG NBNSCOE

5. (CLIENT SIDE)
FRONTEND
• Technologies that users directly interact
with
• Includes user interface and user
experience elements
• Examples: HTML, CSS, JavaScript,
Frontend Frameworks (React, Vue,
Angular)
GDG NBNSCOE

6. (SERVER-SIDE)
GDG NBNSCOE
BACKEND
• Handles server logic, database
interactions, and application core
functionality.
• Manages data processing, storage, and
security.
• Examples: Node.js, Python, Ruby, Java,
Server-side Frameworks

7. GDG NBNSCOE
DATABASE
• Stores and manages application data
• Types: Relational (SQL) and Non-
Relational (NoSQL)
• Examples: MySQL, PostgreSQL,
MongoDB, Firebase

8. GDG NBNSCOE
DEVOPS AND
DEPLOYMENT
TOOLS
• Version Control: Git
• Containerization: Docker
• Cloud Platforms: AWS, Azure, Google
Cloud
• Continuous Integration/Deployment:
Jenkins, GitLab CI

9. GDG NBNSCOE
TYPES OF FULL STACK
DEVELOPMENT
ENVIRONMENT
1. LAMP Stack
• L - Linux
• A - Apache
• M - MySQL
• P - PHP
3. MERN Stack
2. MEAN Stack
• M - MongoDB
• E - Express.js
• A - Angular
• N - Node.js

10. GDG NBNSCOE
WHY MERN STACK IS
POPULAR AMONG
DEVELOPERS
Unified Language (JavaScript)
Open-Source and Community Support
• All components use JavaScript
• Reduces context switching
• Easier learning curve
• Consistent coding style across stack
• Free to use
• Large, active community
• Constant updates and improvements
• Extensive libraries and resources
Flexibility and Scalability
• Suitable for small startups and large enterprises
• Easy to add or replace components
• Supports microservices architecture
• High performance and responsiveness

11. GDG NBNSCOE
• NoSQL document database
• Stores data in flexible, JSON-
like documents
• Designed for scalability and
performance
• Supports dynamic schemas
M - MongoDB
BREAKING DOWN THE
ACRONYM
• Minimal and flexible Node.js
web application framework.
• Simplifies server-side routing
and middleware integration.
• Lightweight and unopinionated.
E - Express.js
• JavaScript library for building user
interfaces.
• Developed and maintained by Facebook.
• Component-based architecture.
• Virtual DOM for efficient rendering.
• Supports single-page applications (SPAs).
R - React.js
• JavaScript runtime built on Chrome's
V8 JavaScript engine
• Allows server-side JavaScript
execution
• Event-driven, non-blocking I/O model
• Highly scalable for network
applications
N - Node.js

12. GDG NBNSCOE
MongoDB - Key
Features
• Data is stored in flexible, JSON-like
documents
• Each document can have different fields
• No need for predefined schema
• Allows for dynamic and evolving data
structures
a) Document-Oriented Database
• BSON (Binary JSON)
⚬ Binary-encoded serialization
⚬ More efficient than JSON
⚬ Supports additional data types
• Data Types Supported
⚬ Strings
⚬ Numbers (Integer, Float)
⚬ Dates
⚬ Binary data
⚬ Arrays
⚬ Nested objects
b) JSON-like Storage (BSON)
• Create (Insert)
• Read (Find)
• Update (Modify)
• Delete (Remove)
c) Basic MongoDB Operations

13. GDG NBNSCOE

14. GDG NBNSCOE

15. GDG NBNSCOE

16. GDG NBNSCOE

17. GDG NBNSCOE

18. Express.js - Key
Features
GDG NBNSCOE
• Lightweight core framework
• Allows developers to add only needed
features
• Unopinionated design
a) Minimal and Flexible
• Define routes for different HTTP methods
• Handle complex routing scenarios
• Support for parameterized routes
b) Routing Capabilities
• Functions that have access to request and
response
• Can modify request/response cycle
• Execute code, change request/response
• End request-response cycle
c) Middleware Support

19. GDG NBNSCOE

20. GDG NBNSCOE

21. Express.js - Key
Takeaways
GDG NBNSCOE
• RESTful API Development
• Microservices
• Backend for Single Page Applications
• Real-time Web Applications
• Proxy Servers
• Server-Side Rendering
a) Use Cases
• Master Node.js Fundamentals
• Understand HTTP Methods
• Learn Middleware Concepts
• Practice Building APIs
• Explore Advanced Routing
• Study Security Best Practices
b) Learning Path for Students

22. React.js - Key
Features
GDG NBNSCOE
• UI divided into independent, reusable
components
• Each component manages its own state and
props
• Promotes code reusability and modularity
a) Component-Based Architecture
• Lightweight copy of actual DOM
• Efficiently updates and renders
components
• Minimizes direct manipulation of browser
DOM
b) Virtual DOM
• Data flows in single direction: parent
to child
• Predictable state management
• Easier to debug and understand
application state
c) Unidirectional Data Flow

23. GDG NBNSCOE

24. GDG NBNSCOE

25. Node.js - Key
Features
GDG NBNSCOE
• Allows server-side JavaScript execution
• Uses V8 engine for high-performance
compilation
• Unified language across frontend and
backend
a) JavaScript Runtime Environment
• Based on event loop mechanism.
• Handles multiple concurrent connections.
• Non-blocking I/O operations.
b) Event-Driven Architecture
• Allows simultaneous multiple
operations.
• Improves application performance.
• Efficient resource utilization.
c) Non-Blocking I/O

26. GDG NBNSCOE

27. GDG NBNSCOE

28. PROJECT TIME :
HOSPITAL
MANAGEMENT SYSTEM
GDG NBNSCOE

29. CONLUSION
• Embrace the MERN stack as your gateway to
modern, full-stack web development.
• Stay curious and adaptable in the rapidly
evolving tech landscape.
• Practice consistently and build projects to
transform theoretical knowledge into practical
skills.
• Learn from your mistakes and view challenges
as opportunities for growth.
• Your passion and creativity are the ultimate
tools in creating innovative digital solutions.
GDG NBNSCOE

30. THANK
YOU
GDG NBNSCOE