🔤 R - REST API 🌍

REST stands for Representational State Transfer 
A REST API is used to allow applications to communicate over HTTP 🌐

In simple words 
REST API lets 
frontend and backend talk to each other 🧠

Without REST APIs ❌ 
• Frontend cannot get data 
• Backend cannot serve clients 
• No real web applications 

🧠 Core Principles of REST
• Client Server architecture 
• Stateless requests 
• Resource based URLs 
• Standard HTTP methods 

📦 Common HTTP Methods in REST
• GET - fetch data 👀 
• POST - create data ➕ 
• PUT - update data ✏️ 
• DELETE - remove data 🗑️ 

🌍 Real World Examples
• Fetching posts on social media 
• Logging in users 
• Submitting forms 
• Accessing mobile app data 

🔄 How REST API Works
Client sends HTTP request 📤 
Server processes logic 🧠 
Server returns JSON response 📩 

💻 Example: Simple REST API using Express

app.get("/users", (req, res) => {
  res.json({ users: [] });
});

app.post("/users", (req, res) => {
  res.send("User created");
});

✅ Version Control with Git & GitHub 🗂️

Version control is a must-have skill in web development! It lets you track changes in your code, collaborate with others, and avoid "it worked on my machine" problems 😅

📌 What is Git? 
Git is a distributed version control system that lets you save snapshots of your code.

📌 What is GitHub? 
GitHub is a cloud-based platform to store Git repositories and collaborate with developers.

🛠️ Basic Git Commands (with Examples)

1️⃣ git init 
Initialize a Git repo in your project folder.

git init

2️⃣ git status 
Check what changes are untracked or modified.

git status

3️⃣ git add 
Add files to staging area (preparing them for commit).

git add index.html
git add.     # Adds all files

4️⃣ git commit 
Save the snapshot with a message.

git commit -m "Added homepage structure"

5️⃣ git log 
See the history of commits.

git log

🌐 Using GitHub

6️⃣ git remote add origin 
Connect your local repo to GitHub.

git remote add origin https://github.com/yourusername/repo.git

7️⃣ git push 
Push your local commits to GitHub.

git push -u origin main

8️⃣ git pull 
Pull latest changes from GitHub.

git pull origin main

👥 Collaboration Basics

🔀 Branching & Merging

git branch feature-navbar
git checkout feature-navbar
# Make changes, then:
git add.
git commit -m "Added navbar"
git checkout main
git merge feature-navbar

🔁 Pull Requests 
Used on GitHub to review & merge code between branches.

🎯 Project Tip: 
Use Git from day 1, even solo projects! It builds habits and prevents code loss.

🔤 S - Sessions 🎫

Sessions are used to store user data across multiple requests 🧠

In simple words 
A session helps the server 
remember the user after login 🔐

Without sessions ❌ 
• User must login again and again 
• No user state tracking 
• Poor user experience 

🧠 What Sessions Store
• User login status 👤 
• User ID 🆔 
• Preferences ⚙️ 
• Temporary data 📦 

🌍 Real World Examples
• Staying logged in after login 
• Keeping items in cart 
• Remembering user settings 
• Accessing private pages 

🔄 How Sessions Work
User logs in 👤 
Server creates a session 🎫 
Session ID is stored in cookie 🍪 
Server uses session ID to identify user 🔁 

💻 Example: Session in Express

const session = require("express-session");

app.use(
  session({
    secret: "mySecret",
    resave: false,
    saveUninitialized: true
  })
);

app.get("/login", (req, res) => {
  req.session.user = "Ravi";
  res.send("Logged in");
});

🔤 T - Testing 🧪

Testing is used to check whether your code works as expected ✅

In simple words 
Testing helps developers 
find bugs before users do 🧠

Without testing ❌ 
• Hidden bugs 
• Unexpected crashes 
• Poor user experience 

🧠 Why Testing Is Important
• Improves code quality ✨ 
• Prevents future bugs 🐛 
• Makes refactoring safe 🔁 
• Builds developer confidence 💪 

🧪 Types of Testing
• Unit testing - tests small parts of code 
• Integration testing - tests modules together 
• End to end testing - tests full user flow 

🌍 Real World Examples
• Checking login functionality 
• Verifying API responses 
• Testing payment flow 
• Ensuring UI buttons work 

🔄 Basic Testing Flow
Write feature ✍️ 
Write test for it 🧪 
Run tests ⚙️ 
Fix bugs if tests fail 🔧 

💻 Example: Simple Test using Jest

function sum(a, b) {
  return a + b;
}

test("adds two numbers", () => {
  expect(sum(2, 3)).toBe(5);
});

🔤 U - UX 🎨

UX stands for User Experience 
It focuses on how users feel while using an application 🧠

In simple words 
UX is about 
making apps easy, smooth, and enjoyable to use 😊

Without good UX ❌ 
• Users get confused 
• Users leave the app 
• Low engagement and retention 

🧠 What UX Includes
• Easy navigation 🧭 
• Clear layouts 📐 
• Fast loading pages ⚡ 
• Readable text 📖 
• User friendly interactions 🤝 

🌍 Real World Examples
• Simple signup forms 
• Clear buttons and icons 
• Smooth animations 
• Helpful error messages 

🔄 Good UX Flow
User opens app 📱 
Understands interface quickly 👀 
Completes task easily ✅ 
Feels satisfied and returns 🔁 

💻 Example: UX Improvement Idea

Bad UX: Long forms with no hints  
Good UX: Short forms with labels and feedback

🔤 V - Version Control 🗂️

Version Control is used to track and manage changes in code 🧠

In simple words 
Version control helps developers 
save code history and collaborate safely 🤝

Without version control ❌ 
• Code loss 
• No rollback option 
• Team collaboration becomes difficult 

🧠 What Version Control Does
• Tracks code changes 📜 
• Maintains history ⏳ 
• Enables collaboration 👥 
• Helps recover old versions 🔄 

🌍 Popular Version Control Tools
• Git 
• GitHub 
• GitLab 
• Bitbucket 

🔄 How Version Control Works
Developer makes changes ✍️ 
Changes are committed 📌 
Code is pushed to repository ☁️ 
Other developers pull updates 🔁 

💻 Example: Basic Git Commands

git init
git status
git add .
git commit -m "Initial commit"
git push origin main

🔤 W - WebSockets ⚡

WebSockets are used for real time communication between client and server 🌐

In simple words 
WebSockets keep a persistent connection open 
So data can flow instantly both ways 🔁

Without WebSockets ❌ 
• Constant polling 
• Delayed updates 
• Poor real time experience 

🧠 What WebSockets Are Used For
• Chat applications 💬 
• Live notifications 🔔 
• Online gaming 🎮 
• Live dashboards 📊 
• Stock price updates 📈 

🌍 Real World Examples
• WhatsApp live chat 
• Live comments on streams 
• Multiplayer games 
• Real time tracking apps 

🔄 How WebSockets Work
Client opens connection ⚡ 
Server accepts connection 🖥️ 
Both send and receive data anytime 🔄 
Connection stays open 📡 

💻 Example: Simple WebSocket using JavaScript

const socket = new WebSocket("ws://localhost:3000");

socket.onopen = () => {
  socket.send("Hello Server");
};

socket.onmessage = (event) => {
  console.log(event.data);
};

🔤 X - XSS ⚠️

XSS stands for Cross Site Scripting 
It is a security vulnerability found in web applications 🔐

In simple words 
XSS happens when 
malicious noscripts are injected into a website 🧠

If XSS is not handled ❌ 
• User data can be stolen 
• Sessions can be hijacked 
• Website trust is lost 

🧠 Types of XSS Attacks
• Stored XSS – malicious noscript stored in database 
• Reflected XSS – noscript comes from user input 
• DOM based XSS – client side manipulation 

🌍 Real World Examples
• Fake popups stealing data 
• Session cookie theft 
• Redirecting users to malicious sites 

🔄 How XSS Works
Attacker injects noscript 💉 
Browser executes it 🧠 
User data gets exposed 🔓 

💻 Example: Vulnerable Code

<div>
  Hello ${userInput}
</div>

🚀 Monolith vs Microservices

Both are software architecture styles. 
But they scale and operate differently.

1️⃣ Monolith 🏢

Entire application is built as a single unit.

➤ How: One codebase, one deployment 
➤ Wins: Simple to develop & deploy 
➤ Risk: Hard to scale specific components 

If one part fails → entire system can be affected.

Used in:
Small to medium applications


2️⃣ Microservices 🧩

Application is divided into independent services.

➤ How: Each service handles one business function 
➤ Wins: Scalable, flexible, fault isolation 
➤ Risk: Complex communication & management 

If one service fails → others can still run.

Used in:
Large-scale systems (Netflix, Amazon, Uber)

💡 Key Difference

Monolith → Single unified application 
Microservices → Multiple independent services 

Monolith = Simple but tightly coupled 
Microservices = Scalable but complex 

Choose based on team size and system scale.