Introduction to web development | MERN Stack

Qucik
introduction of
the basics
WEB-DEV
introduction
June 4, 2025
Geevarghese Regi
karivarkey

Let's Begin
Are you ready?
June 4, 2025
karivarkey
Disclaimer
• We will cover tons of things very quickly.
• We will only cover things in a need-to-know
basis and abstracted
• If you have any questions , just ask : )

Today's
Agenda
1
Introduction to the web
• Website , URL, IP, Endpoint ,
Request Response
2
3
karivarkey
Introduction to the “stacks”
• Frontend , Backend and Databases
• Full Stack development
Practical session on MERN
STACK
• Introduction on JS, node ,
node modules.
• Introduction in express and
mongo DB
• Creating a simple Express
app
The pace of the sessions are completely
dynamic to how hard the learning curve is

https://youtube.com
What is this?

https://youtube.com
What is this?
This is a URL or more
commonly as a Link to
a website
URL - Uniform
Resource Locator
consider this like a virtual
address for a website, this
is how a web browser knows
to open youtube when you
type it in

WTH IS A WEBSITE?
A website is like a digital book you open
on your phone, tablet, or computer.
• Each page of the book is a web
page.
• You use a browser (like Chrome) to
read it.
• The website lives on a computer
somewhere far away (called a
server), and your device just asks,
"Hey, can I see this page?"

Web Browser
2
What happens when you type in youtube.com in your browser
UNDER THE HOOD LET’S UNDERSTAND THE BASICS OF A
WEBSITE

Web Browser
ISP
(Internet Service
Provider)
2
WEBSITE

Web Browser
ISP
(Internet Service
Provider)
Youtube Server
2
WEBSITE

Web Browser
ISP
(Internet Service
Provider)
Youtube Server
2
WEBSITE
Your request to get data
from youtube.com will be
sent to your ISP
1

Web Browser
ISP
(Internet Service
Provider)
Youtube Server
2
WEBSITE
sent to your ISP
The ISP will transfer the
request to the correct
location of youtube.com
1 2

Web Browser
ISP
(Internet Service
Provider)
Youtube Server
2
WEBSITE
sent to your ISP
1 2
youtube.com accepts the
request sent by you and
sends a response back
3

Web Browser
ISP
(Internet Service
Provider)
Youtube Server
2
WEBSITE
sent to your ISP
1 2
3
ISP routes the request to your
computer and browser shows
the response
4

MISSION
PASSED
Now we know the basics of how a website works

Web Browser
ISP
(Internet Service
Provider)
Youtube Server
2
In detail about the request and responses
UNDER THE HOOD NOW SOME NIT PICKY DETAILS ABOUT THE
REQUESTS
sent to your ISP
1 2
3
ISP routes the request to your
computer and browser shows
the response
4

Web Browser Youtube Server
2
We will abstract the request response architecture
REQUESTS
You send a REQUEST to
youtube.com to give list of
videos to show in
homepage
1
youtube.com RESPONDs with
a list of videos to show in the
homepage
2

2
We will abstract the request response architecture
REQUESTS
The REQUEST contains
some essential information
like your email address
1
RESPONSE contains the data
to be shown
2

2
Let’s learn more about the request-response model (client-server model)
UNDER THE HOOD
REQUEST RESPONSE MODEL
This is the REQUEST-RESPONSE model
also called as the Client-Server model
Here the client(you) requests data from the
server(youtube) and expects a response
back
You can also use the dictionary meaning of
the word REQUEST and RESPONSE

GET request will
expect to GET some
data back from the
server
GET
TYPES OF REQUEST AND RESPONSES
eg : Fetching the
home page videos of
youtube
POST request does
not expect data back,
they only expects a
status of the request
POST
eg: Uploading a
video to youtube
This is used to fetch
information from a
server
This is used to give
information to a
server
TYPES OF REQUESTS

The REQUEST was
serviced sucessfully
20X
Indicates a
successful request
completion
RESPONSES usually contain the data which is
requested along with a status code
Error with the CLIENT
side
40X
Indicates that the
request sent from
client is invalid
200 - For a successful GET
201 - For a successful POST
404 - For trying to request something
that does not exist
403 - To show that you are not
authorized to access that response
TYPES OF RESPONSES

GET request will
expect to GET some
data back from the
server
GET
eg : Fetching the
home page videos of
youtube
POST request does
not expect data back,
they only expects a
status of the request
POST
eg: Uploading a
video to youtube
This is used to fetch
information from a
server
This is used to give
information to a
server
The REQUEST was
serviced sucessfully
20X
Indicates a
successful request
completion
RESPONSES usually contain the data which is
requested along with a status code
Error with the CLIENT
side
40X
Indicates that the
request sent from
client is invalid
200 - For a successful GET
201 - For a successful POST
404 - For trying to request something
that does not exist
403 - To show that you are not
authorized to access that response

There are many more types , we will
learn them as we progress along
We will not memorize all the codes and the errors , we will learn them
through experience and time

How will a server know what to do?
eg: When we click a like button how do we tell the server to like the video?
I will use the analogy of sending a letter to explain the concepts of
endpoints
A full request means , you write a letter to a friend and he replies back to
you
• Client will be the sender of the letter
• Server will be the receiver of the letter

ENDPOINTS
LET US DISSECT A URL
https://youtube.com/watch?=r1ckr0lI

This stand for
HyperText Transfer Protocol Secure
Specifies protocol to use
Consider this like which medium to send your letter
Inland or telegraph
ENDPOINTS

This stand for
Inland or telegraph
This the URL
This is like the address of the server , where to get
data from
ENDPOINTS

This stand for
Inland or telegraph
This the URL
This is like the address of the server , where to get
data from
This is the endpoint
Tells the server what to do
ENDPOINTS

1
2
3
Today's
Agenda
Request Response
STACK
node modules.
mongo DB
app

Entering real
deep things
here
FULL STACK
introduction
June 4, 2025
Geevarghese Regi
karivarkey

3
FRONTEND BACKEND DATABASE
More in depth about how website works
FrontEnd, BackEnd and Database
ARCHITECTURE
We now saw that there is 2 parts to a website a CLIENT and a SERVER
The client is like what the user uses ,
he interacts with the client.
this is called as FRONTEND
eg: the webpage of youtube
There server is what does the calculation
and processes the details needed for you
this is called as BACKEND
eg: Getting a list of your liked videos when
requested
We also have a DATABASE database is like the storage room but for storing data

2
Our Old diagram was
The REQUEST contains
some essential information
like your email address
1
RESPONSE contains the data
to be shown
2
ARCHITECTURE

Web Browser
(front end)
Youtube Server
(backend)
2
Now it is
ARCHITECTURE

Web Browser
(front end)
Youtube Server
(backend)
2
Youtube Storage
(database)
Now it is
ARCHITECTURE

Web Browser
(front end)
Youtube Server
(backend)
2
Youtube Storage
(database)
Now it is
ARCHITECTURE
Request

Web Browser
(front end)
Youtube Server
(backend)
2
Youtube Storage
(database)
Now it is
ARCHITECTURE
Request
Read Data
Write Data

Web Browser
(front end)
Youtube Server
(backend)
2
Youtube Storage
(database)
Now it is
ARCHITECTURE
Request
Read Data
Write Data
Response

FULL STACK
Full stack is a term used to indicate a person who
can create applications for Frontend (Client) and
Backend (Server) with knowledge about database
What is a
STACK?
Stack is used to refer to a set of
programing languages and
frameworks used by developers to
achive the request response model
MERN - MongoDB as database,
Express as a backend Framework ,
React for creating frontend,
Nodejs as a Runtime
MEAN - MongoDB as a database,
Express as a backend framework,
Angular for creating frontend, NodeJS
as a runtime
The stack used will vary from your
need of a database and this should be
considered just like knowing how to
play various sports

Let's Begin
Are you ready?
MERN
We will learn more about MERN stack and do a
practical project in MERN stack
We will build a full-stack application and
implement authentication using JWT token

3
M - MongoDB
What is M in MERN STACK
MERN
The M is used for MongoDB it is the database used by a MERN stack developer
There are different types of databases based on how data is stored
A DATABASE is a software which will allow us to store data/information.
They provide us with methods to search data , process data and provide safety for
data.
Yes we can use Microsoft Word to store text and search through it, but when the
length becomes very big , say 10 Million lines, normal search will not work,
advanced search mechanism is required.
Also databases provide integrity , data can be recovered if lost

In relational model data is stored as
relations
Think of this like storing data in a table
(excel sheet)
Relational
This has fixed number of columns (left-right) but can
easily expand in rows (downward)
i,e their structure is fixed.
(each row has one email and it’s password)
Object Based
This Stores data as Objects
Think of it as storing things inside a box.
We use a format called JSON
user : {
name: “Geevarghese”,
age: 20,
college: “RSET”
}
Here user is a data with
properties(attributes) of name , age and
college
This allows for flexibility , I can create a
user who has different attributes
user : {
name: “Jacob”,
age: 29,
college: “CUSAT”,
job: “Freelancer”
}

Just like the name suggest we store it as
key and value pair.
The key will never repeat but the values
can
eg: Dictionary - the word “sample” only
comes once
but the meaning of “sample” comes again
for the word “specimen”
Key-Value
Important to note that KEY can never repeat but
VALUES can repeat
MERN STACK
We utilize MongoDB which is an object
based storage and let us dive deep into
that

USER 2
USER 3
USER 1
USER 4
USER 5
What are objects and objectdatabase
OBJECTS
OBJECT DATABASE
Here each user is a document
🔤 Think of an object like a "descriptive card" about something
user : {
name: “Karivarkey”,
age:20,
profession: “Professional dumbass”
}
each document has it’s own format of data

USER 5
What are objects and objectdatabase
OBJECTS
OBJECT DATABASE
This format of storing the document is called a JSON (JavaScript Object Notation)
user : {
name: “Karivarkey”,
age:20,
profession: “Professional dumbass”
hobbies: [ “movies”,”singing”,”gaming”],
friends : {
name: “Kevin”,
age: 22,
job: “ Ultimate dumbass”
}
}
A document can have nested values or array of values

3
E- Express
What is E in MERN
MERN
The E is used for Express it is the backend framework used by a MERN stack developer
The backend is the middle man between the user and saved data
A BACKEND framework is a program/code that will perform the logic of your website
When a user is logging in , backend will accept email and password from user ,
fetch the stored password from database , check if they are correct and give an
appropriate response
A framework is a pre-built structure or toolkit that provides the foundation and
rules for building software faster and more efficiently.
Express is a framework which use JavaScript to create a backend server

3
R- React
What is R in MERN
MERN
The R is used for React it is the frontend framework used by a MERN stack developer
The frontend is what the user interacts with and is shown by the browser
A FRONTEND is what the user sees, it generates the content to be shown in the
browser (HTML , CSS , JS )
They will show the data from the backend and display it to the user.
This is responsible for the animation , colors and displaying the data of the website
React is a JavaScript library for building fast, interactive user interfaces—mainly
for websites.

3
N- NodeJS
What is N in MERN
MERN
The N in MERN stands for NodeJS
NodeJS is a runtime that allows us to run JavaScript outside of a browser
This allows us to code backend servers in JavaScript
NodeJS facilitates a full stack developer to use one single programming language
to build frontend and backend

Now as a FULL STACK DEV
We will make a webste, server and datbase and design
access flow between them
As a MERN stack developer we will learn more about Mongo, Express , React and Node
TODAY WE WILL LEARN JAVASCRIPT AND INSTALL NODEJS AND LEARN ABOUT MONGO AND
EXPRESS

1
2
3
Today's
Agenda
Request Response
karivarkey
STACK
node modules.
mongo DB
app

Let us Learn JS
JavaScript is a scripting language which will run
inside a web browser like firefox or chrome
This was created to make webpages more lively by
enabling them to script and code logic into it
JAVA != JAVASCRIPT
The original name for JS was Mocha then LiveScript then
became JavaScript for marketing purposes
To run this JS , we will need a web-browser

Let us Learn JS
1) Open your favorite web browser
2) Open up https://runjs.app/play
Your input will be on the left side Your output will be on the right side
Press this button or
Ctrl + Enter to run the input code

PROGRAMMING BASICS
We will need to learn some core basics of programming like
• Variables (let, const)
• Functions (function, arrow functions)
• Conditionals (if, else, switch)
• Loops (for, while, .map, .filter)
• Arrays & Objects (core for handling JSON)
• Promises + async/await

BASIC CONCEPTS OF JS
What are variables?
VARIABLES
Variables in programing is similar to Mathematics
Visualize variables like a box with a name where we
can store values
AG
E
Here you can see a box named age is having a value 26,
so when we say age+10 , it will be 36
Variables in JavaScript can hold numbers, letters,
characters, functions , etc

How to set variables in JS
VARIABLES
There are 2 ways to declare a variable
• One who’s value cannot change (called constants)
• One who’s value can change (variable)
Consider constants like putting value inside a box and sealing it , you cannot change it’s value
again.
Code snippet to declare variables in JS

How to conditionally do things
CONTROL FLOW
We will have to make lot of decisions based on a parameter
Eg : When user signs up , we have to check if an account already exist , we have to
check if the user is above a specific age
We have if-else statements in JS to solve our such if-else
doubts

How to conditionally do things
CONTROL FLOW
We will have to make lot of decisions based on a parameter
Eg : When user signs up , we have to check if an account already exist , we have to check if the
user is above a specific age
We have if-else statements in JS to solve our such if-
else control problems
This snippet shows an if else loop to check age of a
user

ASSIGNMENT - 1 (10 mins)
Declare 2 variable , one is age and one is name
if name is “Gee” and age is 36 console.log(“Access granted”), else
console.log(“Access rejected”)
Snippet to declare a variable
If Else snippet

SOLUTION
There are 2 solutions , one is using ‘&’ operator , one is using nested if
Using & Operator If Else snippet

What are functions?
FUNCTIONS
Functions are also similar to mathematics
Consider them to be a machine which accepts
input , processes it produces outputs
The above depicts a function which accepts a number
and checks if it is even or odd
INPUT
25 OUTPUT
odd
number

How to write a function in JS
FUNCTIONS
In programming the inputs are called as parameters
Below is the snippet to create a function in JS

How to write a function in JS
FUNCTIONS
Here is the snippet to
check if a number is odd
or even JS

What are loops?
LOOPS
Loops are statements that repeatedly execute
Eg : To print all number from 1 to n , to find sum
of first n number etc
Everything inside a loop statement will be
executed until a condition is met.
We will learn and use for loop
This snippet prints from 0 -4

What is async
ASYNC
Async Programming handles operations like fetching data without
blocking execution.
When an async statement is met , we
will not wait for that statement to
complete , it will be completed in it’s
own time (asynchronously)
We will more often use await to wait for functions to
complete exection
This snippet declares a function called
load, we have no idea when load might
complete and if this function is being ran ,
we will wait for data since await is being
called there

WE LEARNT JS! (or somewhat)
We now know the syntax of JS and won’t be confused
when you see some code
I don’t expect you to write JS code now , but I expect you
to understand the basics when a snippet is given
Why not test our brains out?

LET’S TAKE A QUICK QUIZ
https://quizizz.com/admin/quiz/
683ef7f9f136429982ffbf25

TIME TO START DOING THINGS
Let us create an account in
MonogDB and create a Database

Creating a MongoDB Account
1) Go to mongodb.com 2) Press Sign In at the top right

ACCEPT PRIVACY POLICY
4) Accept privacy policy
3) Proceed to sign in with Google

SKIP PERSONALIZATION
5) Click “skip personalization at the bottom”

CREATE CLUSTER
6) Fill in details as shown
1.Select free button
2.Give any name
NO NEED OF ANY OTHER CHANGES

CREATE DATABASE USER
7) Create User
PLEASE WRITE DOWN THE USERNAME AND PASSWORD WE NEED IT FOR LATER
Once user created ,
you can close that
popup by pressing x

ALLOW NETWORK ACCESS
8) Go to Network Access Panel and allow all IP

VIEW DEMO DATA
8) Go to clusters panel and view the demo data

CONGRATULATIONS!
We created an account in MongoDB
and created a database for ourself!
This is in the cloud, i.e the data is
stored with mongoDB and will not be
deleted even if you loose your
computer
Next we will create an Express App
which will connect with MongoDB

EXPRESS APP
Requirements
• NodeJS
• VSCode
1.https://nodejs.org/en/download
2.https://code.visualstudio.com/
download
Once installed
1) Search for powershell in windows
menu and run that as administrator
2) Enter the snippet shown below and
click A when asked
Set-ExecutionPolicy Unrestricted

CREATING AN EXPRESS APP
1) Create and open a folder for the express app (anywhere in your computer)
2) Click the title bar and enter “cmd” and press enter
3) In the command prompt , type in “code . “ and press enter (carefully check the syntax)

OPEN TERMINAL INSIDE VSCODE
1) Click view on the title bar > Then click “Terminal”
2) You will now have a terminal inside VSCODE

CREATING AN EXPRESS PROJECT
run the following inside the terminal opened inside vscode
1) Run the snippet
2) Then Run the snippet
3) Create a file called app.js

INSIDE APP.JS
Once written , save app.js
and open a terminal and then run
Open a browser and go to
http://localhost:3000

DISECTING APP.JS
No need to copy this to your code

VIOLA!
You created an express App!
Next , we will access mongoDb from our express app

LET US QUICKLY UPDATE MONGODB
INSTANCE
1.Go to mongodb dashboard
2.Go to browse collections
3.Click create database
• Database name - todo
• Collection name - users

LET US QUICKLY UPDATE MONGODB
INSTANCE
1.CREATE SOME DOCUMENTS INSIDE THE
DB

UPDATE APP.JS`
No need to copy this to your code

ANY
DOUBTS?
AND THAT’S ALL
FOR TODAY FOLKS

Summary Move the top voted ideas here so you can see the whole picture clearly.
Strengths Weaknesses
Opportunities Threats
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here
Transfer a
top idea here

Write any
additional notes
Add an action item here Action 2 Action 3 Action 4
Add notes here
1
2
Drag your photo under
the action item you
want to own.
3
Action Items As a final step, let's turn the ideas into actionable tasks, and take ownership to see them through!

The mind is just like a muscle
— the more you exercise it the
stronger it gets and the more it can
expand.
— Idowu Koyenikan
June 1, 2025
MDM Company

June 1, 2025
MDM Company
Icons and
Illustrations
Resource Page
Use these free recolorable icons and
illustrations in your Canva design.
Add your
idea here
Add your
idea here
Add your
idea here

Introduction to web development | MERN Stack

More Related Content

Similar to Introduction to web development | MERN Stack (20)

Recently uploaded (20)

Introduction to web development | MERN Stack