L - 1 Introduction to Web development and

MERN
13 June 2025
11:46

Web development detailed notes

L-1

Internet

The Internet is a global network of interconnected computers and devices that communicate with
each other to share information, resources, and services.

Request Response

The Request-Response Cycle is the basic process by which a client (like a web browser)
communicates with a server to get data (like a web page)
Eg- Explain kitchen restaurant analogy

Web development

Web development is the process of building and maintaining websites and web applications that
run on the internet.

Web development technologies

 Front-End Development – What users see (HTML, CSS, JavaScript)
 Back-End Development – What happens behind the scenes (servers, databases, logic)
 Full-Stack Development – Combines both front-end and back-end

Frontend

Front-end development is the part of web development that focuses on what users see and interact
with in their web browser

Frontend Technologies
 HTML Structure
 CSS Styling
 JavaScript interactivity

Back-end development

Back-end development is the part of web development that focuses on what happens behind the
scenes — the server, database, and logic that power a website or web application.
 The back-end is like the kitchen in a restaurant.
 Customers don’t see it, but it’s where all the important work happens: cooking the food,
managing inventory, and handling special orders.

In Web terms
  When a user fills out a form or clicks “Buy Now,” that request goes to the back-end.
 The back-end processes the request, fetches or stores data in a database, and sends back a
response to the front-end.

What does the back-end handle

 User Authentication : Logging in with username and password
 Data Storage and retrieval :
 Business logic
 Communication : to send data and receive request from client

Back-end technologies
 Language : Node.js, python, PHP, Java etc
 Database: SQL, MongoDB
 Server : Apache, Nginx
 API : REST, GraphQL (To connect front-end and backend)

WHY MERN
 Single Language JS - this makes learning and working fast.
 Fast and Real Time interaction: React enables fast updates without reloading the page (using
Virtual DOM).
o Component Based Development :- Reusable
 No SQL flexibility with MongoDB : - MongoDB stores data in a document-based format
(JSON-like), perfect for modern apps with flexible data.
o Example: A user profile might have different fields (like Instagram bio vs LinkedIn
bio) — MongoDB handles this easily.
 MERN apps can scale from small startups to big enterprises.
 Open Source and large community support and Job Market
 Fast, lightweight server with Express + Node
 Real Time Examples: - Facebook, Amazon, Whatsapp

Why MongoDB
MongoDB is a NoSQL database that stores data in flexible, JSON-like documents instead of rows
and tables (like in SQL databases).

Analogy : Storing Information in a Library

 Traditional (SQL) Library:
o All books are listed in a strict table format.
o You must define exactly which columns (title, author, year, etc.) exist.
o If you want to add a new field like “ISBN” or “translator,” you need to change the
whole structure for every book.
 MongoDB (NoSQL) Library:

Why
 Flexible Schema
o No need to pre-define columns.
o Perfect for apps where data can vary — like social networks or marketplaces.
 High Performance & Speed
o MongoDB handles large volumes of data very efficiently.
o It’s optimized for read and write operations common in modern apps.
o Example: Real-time apps like chat apps, notifications, or live tracking systems
benefit from MongoDB’s speed.
  Easy to Scale Horizontally
o MongoDB supports sharding (splitting data across multiple servers).
o It scales better than many traditional SQL systems, which can be harder to
distribute.
 Stores Data in JSON Format
o Since MongoDB uses JSON-like format, it works natively with JavaScript, especially
in MERN stack.
 No need to convert data formats between front-end and back-end.
 Best to use
o Social Media App : Flexible user profiles, post formats
o E-commerce : Products have varied attributes (size, color, deals)
o Chat App : fast read/write operations, flexible message data.
o Content management : pages and components vary greatly

NOTE : Choose MongoDB when you need a flexible, fast, scalable, and developer-friendly database
— especially for modern JavaScript-based apps like those built with the MERN stack.

Drawbacks
 No Strong Data Relationships (No Joins like SQL)
o MongoDB doesn't support complex joins like traditional relational databases (e.g.,
MySQL).
o Relationships between data are harder to manage and can lead to data duplication.
Example:
In a school database:
 In SQL: You can easily link Students ↔ Classes ↔ Teachers using foreign keys.
 In MongoDB: You might have to embed or duplicate data across collections, which can
become hard to manage.

 While flexibility is a benefit, it can also lead to inconsistent data structures if not managed
carefully.
o Different documents in the same collection can have completely different fields.
 Not Ideal for Complex Transactions
o Banking systems where you must update multiple records together (withdraw from
one account and deposit into another).
 MongoDB can use more RAM than SQL systems due to its storage engine and how it indexes
data.
 Limited Querying Capabilities Compared to SQL
o While MongoDB has a powerful query language, some advanced queries (e.g.,
group by with joins) are more complex or slower than in SQL.

NOTE : MongoDB is great for flexible, fast, and scalable web apps, but it’s not ideal for apps with
strict relationships, heavy transactions, or complex analytics. Careful planning is needed to avoid
performance and data consistency issues

What is Transactions
 A transaction is a group of one or more database operations (like insert, update, delete)
that are treated as a single unit of work. The key rule is: either all the operations succeed,
or none of them do.
o Simple Analogy: Bank Transfer
 Imagine you’re transferring ₹100 from Account A to Account B.
  If both steps succeed, the transaction is successful.
 Key Properties of Transactions
o A (Atomicity) - All operations in transaction happen or none at all
o C (Consistency) - The database remains in a valid state before and after
o I (Isolation) - Transactions don't interfere with each other
o D (Durablity) - the result stays even if system crashes
 If something goes wrong we can use rollback
o This undo all changes made during transaction
 Important for
o Banking system, E-commerce operations, Inventory system.
o A transaction is a set of database actions that are executed together to ensure data
is always accurate, consistent, and reliable — even when something goes wrong.

EG

const mongoose = require('mongoose');

async function placeOrder(userId, orderData, paymentData) {

const session = await mongoose.startSession(); // 1. Start a session
session.startTransaction(); // 2. Start the transaction

try {
// 3. Save the order
const order = await Order.create([{
user: userId,
items: orderData.items,
total: orderData.total
}], { session });

// 4. Update inventory
for (const item of orderData.items) {
await Product.updateOne(
{ _id: item.productId },
{ $inc: { stock: -item.quantity } },
{ session }
);
}

// 5. Save payment
await Payment.create([{
user: userId,
orderId: order[0]._id,
amount: orderData.total,
method: paymentData.method
}], { session });

// 6. Commit if all succeeded

await session.commitTransaction();
session.endSession();
return { success: true, message: 'Order placed successfully!' };
 } catch (error) {
// ❌ Rollback if anything fails
await session.abortTransaction();
session.endSession();
return { success: false, message: 'Order failed!', error };
}
}

In a MERN app, transactions in MongoDB help ensure that multiple related operations — like
placing an order, updating inventory, and recording payment — all happen safely and reliably. If one
fails, everything is rolled back to protect your data.

Express.js
Express.js is a minimal and flexible web framework for Node.js that helps you build web servers
and APIs quickly and efficiently.
 It's like a powerful set of tools to help developers handle requests, routes, middleware, and
more — without writing everything from scratch.
 You can start cooking fast without building everything from scratch.

Why Express.js
 Simple & Minimal
o Very lightweight — you start with just the basics and add what you need.
o Easy to get started with a few lines of code.
const express = require('express');
const app = express();

app.get('/', (req, res) => {

res.send('Hello World!');
});

app.listen(3000);

 Powerful Routing System

o Lets you define routes for different URLs (pages or API endpoints).
app.get('/users', (req, res) => { /* return list of users */ });
app.post('/login', (req, res) => { /* handle login */ });

 Middleware Support
o Middleware functions let you modify requests and responses, or handle things like
authentication, logging, etc.
o app.use(express.json()); // middleware to parse JSON
 Huge Community & Ecosystem
o Tons of npm packages built specifically for Express
o Easy to integrate with MongoDB, React, authentication libraries (like Passport.js),
etc.
 Perfect for APIs
o Express is great for building RESTful APIs (backend for mobile apps, SPAs, etc.).
 Works seamlessly with MongoDB (via Mongoose), React (as the frontend), and Node.js
(runtime).
NOTE : Express.js is the most popular and beginner-friendly Node.js framework. It's fast, flexible, and
ideal for building REST APIs and web servers — especially in the MERN stack.
 Express.js gives you ready-to-use tools: pots, pans, spices, recipe book.

React

React is a JavaScript library developed by Facebook for building user interfaces, especially for
single-page applications (SPAs). It lets you create reusable UI components and manage dynamic
data efficiently on the front-end.

why React is one of the most popular front-end technologies:

 Component-Based Architecture
o Break the UI into reusable pieces (components).
o Makes code more organized, readable, and reusable.
 Virtual DOM for Speed
o React uses a Virtual DOM to efficiently update only the parts of the UI that changed.
o Improves performance for dynamic apps.
 Fast Development with JSX
o You write UI in a syntax called JSX (JavaScript + HTML), making code readable and
efficient.
 One-Way Data Flow
o Data flows from parent to child, which makes it predictable and easy to debug.
 Strong Community & Ecosystem
o Tons of libraries, tutorials, job opportunities.
o Supported by Facebook and major tech companies.
 Great for SPAs & Modern Web Apps
o Ideal for apps where users stay on one page and interact dynamically.
o Examples: Instagram, Facebook, Gmail
 Works Well with Back-End APIs
o Easily connects to REST APIs or GraphQL for data fetching.

Common Alternatives to React

Framework/Library Key Features Best For
Angular Full-featured MVC framework by Large enterprise apps with
Google complex architecture
Vue.js Progressive, simple syntax, and easy Lightweight apps, small to mid-
to learn size projects
Svelte No virtual DOM, compiles to vanilla Extremely fast apps, less
JS boilerplate
Next.js Framework on top of React for SSR, Blogs, e-commerce, or SEO-
routing, SEO focused apps

Drawbacks of React
 Boilerplate and setup : Setting up React + Webpack manually can be complex
 Fast changing ecosystem : libraries and best practices changes frequently.
 Not a full framework : Needs additional tools for routing, state, etc. (e.g. React Router,
Redux)
  Learning curve : JSX, hooks, and component lifecycle can be confusing
 SEO Limitation : Pure client-side React isn’t SEO-friendly without SSR (e.g., use Next.js)

When to Use React

React is ideal for:
 Single-page applications (SPAs)
 Dashboards
 Interactive forms
 Reusable components
 Real-time interfaces (chat, notifications)
 Progressive Web Apps (PWAs)

Node.Js

Node.js is a JavaScript runtime built on Chrome’s V8 engine that lets you run JavaScript on the
server — outside the browser.
 Node.js lets you build fast, scalable server-side applications using JavaScript — the same
language you use on the front end.
 Why Node.js
o You can use the same language (JavaScript) for front-end and back-end (React +
Node = MERN stack).
o Non-blocking I/O & Asynchronous
 Node.js uses an event-driven, non-blocking model, which means it handles
many requests at once without waiting.
 Great for real-time apps, APIs, and apps with high I/O (like file uploads,
chats, video streaming).
Example: A chat app where 10,000 users are online — Node handles that more
efficiently than traditional blocking servers.
 Huge Package Ecosystem (npm)
o Node has npm (Node Package Manager), the largest ecosystem of open-source
libraries.
o You can install anything quickly — authentication, file handling, APIs, and more.
 npm install express mongoose cors
 Ideal for REST APIs, microservices, and GraphQL servers.
 Since both front-end and back-end use JSON and JavaScript, data flows smoothly.
 Example :
o Netflix - High-performance streaming backend
o PayPal - Unified JavaScript stack for full-stack apps
o Uber - Real-time ride tracking
o LinkedIn

Other Alternatives : Django, Spring Boot, Go Lang

Drawbacks of Node
 Node is single-threaded; heavy computation can block the event loop
 Managing many async calls can get messy (though async/await helps)
 Minimum inbuilt features : You need to add libraries for things like routing, auth, etc.
 No structure by default — harder for beginners to organize code
 Concurrency via event loop, not threads : Limits true multi-core CPU usage without extra
tools like worker threads
NOTE : It’s fast, light, and can serve many customers at once with simple orders (like chats or API
calls). But it's not ideal for complex, multi-course meals (heavy computation like video encoding).

Feature MERN (React) MEAN (Angular)

Frontend Framework React (library) Angular (full framework)
Learning Curve Easier, uses plain JS Steeper, requires TypeScript
Flexibility High Medium
Community Support Very large Large, more enterprise-focused
Ecosystem Integration React + Redux + Tailwind etc. Angular ecosystem only
Ideal For Fast-moving startups, SPAs, SaaS Enterprise apps with strict needs