NextJS Tutorial #16 - Static vs Dynamic Server Components
https://youtu.be/o3fzTKCHnpA

Count Vowels in String | Regex Shortcut - JavaScript Interview Question #dsa #interview #coding
https://youtube.com/shorts/FlInEjKOq6g?feature=share

DSA #24 - Core Data Structures | Stack – Introduction
https://youtu.be/aVI87AHOUM0

Remove All Spaces from String | Regex - Javascript Interview #dsa #interview #coding
https://youtube.com/shorts/5ym7bMLsNAI?feature=share

NextJS Tutorial #18 - Loading, Error & 404 Pages
https://youtu.be/yY6mO-cx5Nw

React and JavaScript Developer Mock Interview | FRESHER | Real Interview Questions
https://youtu.be/pAitCb3BxdQ

DSA #25 - Core Data Structures | Stack Implementation
https://youtu.be/LG5Ehs18DRs

Now, let's move to the next topic in Web Development Roadmap:

*⚛️ Simple CRUD UI in React*

Now you learn how real apps work.

👉 CRUD = Create, Read, Update, Delete

Every real application uses CRUD.

Examples
- Add task → Create
- View tasks → Read
- Edit task → Update
- Delete task → Delete


*🔹 What is CRUD in React*

CRUD means managing data using UI.

React handles CRUD using:
✅ State
✅ Events
✅ Components

 

*🧠 Why CRUD is Important*
- Used in dashboards
- Used in admin panels
- Used in e-commerce apps
- Top interview question

If you know CRUD → you can build real apps.
 

*🧩 Example Project: Todo List CRUD*
We will build:
✔ Add item
✔ Show item
✔ Delete item
✔ Update item

 

*✍️ Step 1: Setup State*
State stores list data.
import { useState } from "react";
function App() {
const [items, setItems] = useState([]);
return <div></div>;
}
export default App;
✔ items → list data
✔ setItems() → update list

 

*➕ Step 2: Create (Add Item)*
Add new item to list.
const [input, setInput] = useState("");
const addItem = () => {
setItems([...items, input]);
setInput("");
};
UI
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button onClick={addItem}>Add</button>
 

*👀 Step 3: Read (Show Items)*
Display list using map.
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
 

*❌ Step 4: Delete Item*
Remove item from list.
const deleteItem = (index) => {
const newItems = items.filter((_, i) => i !== index);
setItems(newItems);
};
UI
<button onClick={() => deleteItem(index)}>Delete</button>
 

*✏️ Step 5: Update Item (Edit)*
Update existing data.
const updateItem = (index) => {
const newValue = prompt("Update item");
const updated = [...items];
updated[index] = newValue;
setItems(updated);
};
UI
<button onClick={() => updateItem(index)}>Edit</button>
 

*✅ Complete CRUD UI Example*
import { useState } from "react";
function App() {
const [items, setItems] = useState([]);
const [input, setInput] = useState("");
const addItem = () => {
if (!input) return;
setItems([...items, input]);
setInput("");
};
const deleteItem = (index) => {
setItems(items.filter((_, i) => i !== index));
};
const updateItem = (index) => {
const newValue = prompt("Update item");
if (!newValue) return;
const updated = [...items];
updated[index] = newValue;
setItems(updated);
};
return (
<div>
<h2>Todo CRUD</h2>
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button onClick={addItem}>Add</button>
<ul>
{items.map((item, index) => (
<li key={index}>
{item}
<button onClick={() => updateItem(index)}>Edit</button>
<button onClick={() => deleteItem(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default App;
 

*🧠 How CRUD Works Internally*
- User action → event triggers
- State updates
- React re-renders UI

This is React’s core workflow.

 

*⚠️ Common Beginner Mistakes*
- Mutating state directly
- Forgetting key in list
- Not copying arrays before update
- Confusing state updates

 

*🧪 Mini Practice Task*
- Build a simple student list CRUD
- Add student name
- Edit student name
- Delete student
- Show total count


*✅ Mini Practice Task – Solution ⚛️*

This covers:
✔ Add student
✔ Edit student
✔ Delete student
✔ Show total count

 

*🧩 Complete Working Example*
import { useState } from "react";
function App() {
const [students, setStudents] = useState([]);
const [input, setInput] = useState("");

// ➕ Add Student
const addStudent = () => {
if (!input.trim()) return;
setStudents([...students, input]);
setInput("");
};

// ❌ Delete Student
const deleteStudent = (index) => {
const updated = students.filter((_, i) => i !== index);
setStudents(updated);
};

// ✏️ Edit Student
const editStudent = (index) => {
const newName = prompt("Enter new name");
if (!newName || !newName.trim()) return;
const updated = [...students];

updated[index] = newName;
setStudents(updated);
};

return (
<div style={{ padding: "40px", fontFamily: "Arial" }}>
<h2>Student CRUD</h2>
{/* Input Section */}
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Enter student name"
/>
<button onClick={addStudent}>Add</button>
{/* Total Count */}
<p>Total Students: {students.length}</p>
{/* Student List */}
<ul>
{students.map((student, index) => (
<li key={index}>
{student}
<button onClick={() => editStudent(index)}>Edit</button>
<button onClick={() => deleteStudent(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default App;
 

*🧠 What You Learned*
✅ Managing list using state
✅ Adding data using spread operator
✅ Updating array safely
✅ Filtering data to delete
✅ Rendering list with .map()
✅ Showing dynamic count

 

*⚠️ Interview Insight*
If interviewer asks:
👉 Why use [...students] before updating?

Answer: Because React state must not be mutated directly. We create a new copy to trigger re-render.

*Double Tap ♥️ For More*

NextJS Tutorial #19 - Page & Layout SEO Metadata | Open Graph, Twitter
https://youtu.be/KmSVE47mHFI

Implement Debounce - Javascript Interview #dsa #interview #coding
https://youtube.com/shorts/x3RMM51Twzg?feature=share

DSA #26 - Core Data Structures | Valid Parentheses Using Stack
https://youtu.be/Jz07KyhZK5E

Now, let's move to the next topic in Web Development Roadmap:

*⚛️ React Hooks (useEffect & useRef)*

👉 Now you learn how React handles side effects and DOM access. These hooks are heavily used in real projects and interviews.

*🧠 What are React Hooks*
Hooks let you use React features inside functional components.

Before hooks → class components required
After hooks → functional components can do everything

✅ *Common hooks*
- useState → manage data
- useEffect → handle side effects
- useRef → access DOM or store values

*🔄 Hook 1: useEffect (Side Effects)*

❓ *What is useEffect*

useEffect runs code when:
✅ Component loads
✅ State changes
✅ Props change
✅ Component updates

Simple meaning 👉 Perform actions outside UI rendering.

📌 *Why useEffect is needed*

Used for:
- API calls
- Fetch data from server
- Timer setup
- Event listeners
- Page load logic

*✍️ Basic Syntax*
import { useEffect } from "react";
useEffect(() => {
// code to run
}, []);

*🚀 Run only once (on page load)*

useEffect(() => {
console.log("Component mounted");
}, []);

👉 Empty dependency array → runs once.

*🔄 Run when state changes*

useEffect(() => {
console.log("Count changed");
}, [count]);

👉 Runs whenever count updates.


*⏱️ Real Example — Timer*

import { useState, useEffect } from "react";
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(t => t + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <h2>{time}</h2>;
}

✔ Runs timer automatically
✔ Cleans memory using return

*🎯 Hook 2: useRef (Access DOM / Store Values)*

❓ *What is useRef*

useRef gives direct access to DOM elements. Also stores values without re-rendering.

Simple meaning 👉 Reference to element or value.

📌 *Why useRef is used*

- Focus input automatically
- Access DOM elements
- Store previous value
- Avoid re-render

*✍️ Basic Syntax*
import { useRef } from "react";
const inputRef = useRef();

*🎯 Example — Focus input automatically*
import { useRef } from "react";
function InputFocus() {
const inputRef = useRef();
const handleFocus = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} />
<button onClick={handleFocus}>Focus</button>
</div>
);
}

✔ Button click focuses input.

*⚖️ useState, useEffect, and useRef — What's the difference?*

- useState: Stores changing data that triggers re-renders.
- useEffect: Runs side effects (e.g., API calls, timers).
- useRef: Accesses DOM elements or stores values without re-rendering.

*⚠️ Common Beginner Mistakes*
- Forgetting dependency array in useEffect
- Infinite loops in useEffect
- Using useRef instead of state
- Not cleaning side effects

*🧪 Mini Practice Task*
- Print message when component loads using useEffect
- Create timer using useEffect
- Focus input automatically using useRef
- Store previous value using useRef

*✅ Mini Practice Task – Solution ⚛️*

*🟦 1️⃣ Print message when component loads (useEffect)*
import { useEffect } from "react";
function App() {
useEffect(() => {
console.log("Component loaded successfully");
}, []); // runs only once
return <h2>Check console</h2>;
}
export default App;
✅ Runs once when page loads.

*⏱️ 2️⃣ Create timer using useEffect*
import { useState, useEffect } from "react";
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime((t) => t + 1);
}, 1000);
return () => clearInterval(interval); // cleanup
}, []);
return <h2>Time: {time}</h2>;
}
export default Timer;
✅ Increases every second
✅ Clears interval to prevent memory leak

*🎯 3️⃣ Focus input automatically using useRef*

import { useRef } from "react";
function FocusInput() {
const inputRef = useRef();
const handleFocus = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} placeholder="Enter text" />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
}
export default FocusInput;

✅ Click button → input gets focus.


*🔄 4️⃣ Store previous value using useRef*

import { useState, useEffect, useRef } from "react";
function PreviousValue() {
const [count, setCount] = useState(0);
const prevCount = useRef();
useEffect(() => {
prevCount.current = count;
});
return (
<div>
<h2>Current: {count}</h2>
<h2>Previous: {prevCount.current}</h2>
<button onClick={() => setCount(count + 1)}> Increase </button>
</div>
);
}
export default PreviousValue;

✅ Stores previous state without re-rendering.

*🧠 What You Learned*
✅ Run code on component load
✅ Handle side effects safely
✅ Access DOM using useRef
✅ Store values without re-render
✅ Clean up side effects

➡️ *Double Tap ♥️ For More*

DSA #27 - Core Data Structures | Next Greater Element using Stack - Brute Force vs Optimized
https://youtu.be/K9yheNOvRus

Happy Holi Everyone 😊

DSA #28 - Core Data Structures | Queue Data Structure Explained | FIFO
https://youtu.be/2_rC5_TV3wg

Now, let's move to the next topic in Web Development Roadmap:

🌐 *Backend Basics — Node.js & Express*

Now you move from frontend (React) → backend (server side).

Frontend = UI, Backend = Logic + Database + APIs.

🟢 *What is Node.js* ❓
- Node.js is a JavaScript runtime that runs outside the browser.
- Built on Chrome V8 engine, allows JavaScript to run on server.

🧠 *Why Node.js is Popular*
- Same language (JS) for frontend + backend
- Fast and lightweight
- Large ecosystem (npm)
- Used in real companies

⚡ *How Node.js Works*
- Single-threaded, event-driven, non-blocking I/O
- Handles many requests efficiently, good for APIs, real-time apps, chat apps

*📦 What is npm*
- npm = Node Package Manager
- Used to install libraries, manage dependencies, run scripts

Example: npm install express

🚀 *What is Express.js* ❓
- Express is a minimal web framework for Node.js.
- Makes backend development easy, clean routing, easy API creation, middleware support

*🧩 Basic Express Server Example*
- Install Express: npm init -y, npm install express
- Create server.js:
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello Backend");
});
app.listen(3000, () => {
console.log("Server running on port 3000");
});
- Creates server, handles GET request, sends response, listens on port 3000

*🔄 What is an API*
- API = Application Programming Interface
- Frontend talks to backend using APIs, usually in JSON format

*🧠 Common HTTP Methods (Backend)*
- GET: Fetch data
- POST: Send data
- PUT: Update data
- DELETE: Remove data

*⚠️ Common Beginner Mistakes*
- Forgetting to install express
- Not using correct port
- Not sending response
- Confusing frontend and backend

*🧪 Mini Practice Task*
- Create basic Express server
- Create route /about
- Create route /api/user returning JSON
- Start server and test in browser

✅ *Mini Practice Task – Solution* 🌐

*🟢 Step 1️⃣ Install Express*
Open terminal inside project folder:
npm init -y
npm install express

✔ Creates package.json
✔ Installs Express framework

📄 *Step 2️⃣ Create server.js*

Create a file named server.js and add:

const express = require("express");
const app = express();

// Home route
app.get("/", (req, res) => {
res.send("Welcome to my server");
});

// About route
app.get("/about", (req, res) => {
res.send("This is About Page");
});

// API route returning JSON
app.get("/api/user", (req, res) => {
res.json({ name: "Deepak", role: "Developer", age: 25 });
});

// Start server
app.listen(3000, () => {
console.log("Server running on http://localhost:3000");
});

*▶️ Step 3️⃣ Start the Server*
Run in terminal:
node server.js

You should see: Server running on http://localhost:3000

*🌍 Step 4️⃣ Test in Browser*
Open these URLs:
- http://localhost:3000/ → Welcome message
- http://localhost:3000/about → About page text
- http://localhost:3000/api/user → JSON response

*Double Tap ♥️ For More*

NextJS Tutorial #24 - PATCH Method | Backend and Frontend
https://youtu.be/Fn5oHMadoAY