Networking & Web Fundamentals

1️⃣ What is a Client?

The client is the user-facing part of an application.It sends requests to the server and receives responses from it.In MERN, the client is built using React.js.

📌 Example Clients:

Websites like Instagram, Facebook, and Twitter.Mobile apps that fetch data from an online server.

📝 Key Notes on Clients

 ✔ Runs in the web browser.✔ Displays UI elements like buttons, forms, and text.✔ Sends requests to the backend to fetch or update data.

2️⃣ What is a Server?

The server processes requests from the client and sends back responses.It performs operations like fetching, storing, or updating data in a database.In MERN, the backend is built using Node.js and Express.js.

📌 Example Servers:

Instagram’s backend, which stores user posts and comments.Google’s search engine backend, which processes search queries.

📝 Key Notes on Servers

✔ Runs on a web server (e.g., localhost or cloud).✔ Handles data processing and business logic.✔ Communicates with the database (MongoDB) to store or retrieve data.

3️⃣ How Do Client and Server Communicate?

1️⃣ The client makes a request (e.g., "Show me all posts").
2️⃣ The server processes the request and fetches data from the database.
3️⃣ The server sends a response back to the client.
4️⃣ The client receives the response and displays the data to the user.

🖼️ Diagram: How Client and Server Work Together

`[ Client (React.js) ] <-------> [ Server (Node.js + Express) ] <-------> [ Database (MongoDB) ]`

`The client requests data from the server.The server fetches data from the database and sends it back.The client then displays the data to the user.`

✨ Summary

Feature Client (Frontend)   Server (Backend)
Technology Used React.js    Node.js, Express.js
Main Role   Displays UI, makes requests Handles logic, processes data
Where It Runs   User’s browser    Web server (e.g., localhost, cloud)
Example Instagram website   Instagram’s backend handling posts

1️⃣ What is LAN? (Local Area Network)

A LAN (Local Area Network) is a network that connects computers and devices within a small area, such as:

A home
An office
A school

📝 Key Points about LAN

✔ Connects multiple devices using Wi-Fi or Ethernet cables.✔ Devices in a LAN can share files, printers, and internet connections.✔ A router or switch is used to manage the connections.

📌 Example of LAN:

In a school, all computers in the computer lab are connected via LAN.In an office, employees share files through a LAN network.

🖼️ Simple LAN Diagram

`[ Computer 1 ] --|[ Computer 2 ] --| --> (Router) --> Internet[ Printer ] --|`

2️⃣ What is HTTP? (HyperText Transfer Protocol)

HTTP (HyperText Transfer Protocol) is a set of rules for how web browsers and servers communicate over the internet.

📝 Key Points about HTTP

✔ It allows users to access websites.✔ It works on port 80 by default.✔ Websites using HTTP are not encrypted (unsafe).

📌 Example of HTTP in Action:

When you type http://www.google.com in a browser, your browser requests the webpage from Google’s server using HTTP.The server then sends back the page, and you see it on your screen.

🖼️ Simple HTTP Communication

[ Client (Browser) ] ---> HTTP Request ---> [ Server ] 

[ Server ] ---> HTTP Response ---> [ Client (Browser) ]

🚀 What is HTTPS?

HTTPS (HyperText Transfer Protocol Secure) is the secure version of HTTP.

✔ It encrypts data using SSL/TLS to protect user information.✔ Websites with HTTPS use port 443 instead of port 80.✔ Example: https://www.google.com (🔒 Secure website).

✨ Quick Comparison:

Feature LAN HTTP
Meaning Local network for connecting devices    Protocol for web communication
Used For    Sharing files, internet, printers in small areas    Accessing websites over the internet
Security    Private (limited to local area) Public (open to internet users)
Example Office network, school Wi-Fi    Web browsing (Google, Facebook)

`1️⃣ What is an IP Address? (Internet Protocol Address)`

`An IP address is a unique number assigned to every device connected to the internet. It helps computers identify and communicate with each other.`

📝 Key Points about IP Address

`✔ It acts like a home address for devices on the internet.✔ Websites, computers, and phones all have IP addresses.✔ Example of an IP address:`

`IPv4: 192.168.1.1IPv6: 2001:0db8:85a3:0000:0000:8a2e:0370:7334`

📌 Example of How IP Works

`When you type www.google.com, your browser translates it to Google’s IP address (e.g., 142.250.190.14) to load the website.`

`🖼️ Simple IP Address Concept`

[ Your Device ] ---> [ 142.250.190.14 (Google Server) ] ---> [ Google Website ]

2️⃣ What is a Domain Name?

A domain name is a human-friendly name that represents an IP address. Since IP addresses are hard to remember, domain names make it easier.

📝 Key Points about Domain Names

✔ A domain name is like a nickname for an IP address.✔ Instead of typing 142.250.190.14, you can type www.google.com.✔ Domain names have extensions like .com, .org, .net.

📌 Example of Domain Names and IPs

Domain Name IP Addresswww.google.com 142.250.190.14www.facebook.com 157.240.221.35

🖼️ Simple Domain Name Concept

[ You ] ---> [ www.google.com ] ---> [ 142.250.190.14 (Google Server) ] ---> [ Google Website ]

3️⃣ What is Web Hosting?

Web hosting is a service that stores and serves website files on the internet.

📝 Key Points about Web Hosting

✔ It is like renting space on a computer (server) to store your website.✔ Web hosting providers include GoDaddy, Bluehost, Hostinger, AWS, and Google Cloud.✔ Types of hosting:Shared Hosting (Cheap, multiple websites share one server).VPS Hosting (Private server space, better performance).Dedicated Hosting (Entire server for one website, expensive)

📌 Example of Web Hosting in Action

`When you visit www.example.com, the browser contacts the hosting server, retrieves website files, and displays the page.🖼️ Simple Web Hosting Concept`

[ You ] ---> [ www.example.com ] ---> [ Hosting Server (Files, Images, Database) ] ---> [ Website Loads ]

✨ Quick Summary

Feature IP Address  Domain Name Web Hosting
Meaning Unique identifier for devices   Human-friendly name for websites    Stores website files
Example 142.250.190.14  www.google.com  Hostinger, Bluehost
Purpose Identifies devices/websites Makes web addresses easy to remember    Stores websites for online access