Mohit Decodes

*🌐 Frontend Development Concepts You Should Know*

Frontend development focuses on building the user interface (UI) of websites and web applications—the part users see and interact with in the browser. It combines design, structure, interactivity, and performance to create responsive and user-friendly web experiences.

*1️⃣ Core Technologies of Frontend Development*

Frontend development is built on three foundational technologies:
- *HTML (HyperText Markup Language)*: provides the structure of a webpage
- *CSS (Cascading Style Sheets)*: controls the visual appearance and layout
- *JavaScript*: adds interactivity and dynamic behavior to web pages

*2️⃣ Important Frontend Concepts*

- *Responsive Design*: ensures websites work properly across devices
- *DOM (Document Object Model)*: represents the structure of a webpage as objects
- *Event Handling*: frontend applications respond to user actions
- *Asynchronous Programming*: fetch data without reloading pages

*3️⃣ Frontend Frameworks & Libraries*

- *React*: popular JavaScript library for building component-based UI
- *Angular*: full frontend framework for large-scale applications
- Vue.js: lightweight framework known for simplicity and flexibility

*4️⃣ Styling Tools*

- *CSS Frameworks*: Tailwind CSS, Bootstrap, Material UI
- *CSS Preprocessors*: Sass, Less

*5️⃣ Frontend Development Tools*

- *VS Code*: code editor
- *Git*: version control
- *Webpack / Vite*: module bundlers
- *NPM / Yarn*: package managers
- *Chrome DevTools*: debugging

*6️⃣ Performance Optimization*

- lazy loading
- code splitting
- image optimization
- caching strategies
- minimizing HTTP requests

*7️⃣ Typical Frontend Development Workflow*

1. UI/UX Design
2. HTML Structure
3. Styling with CSS
4. Add JavaScript Interactivity
5. Integrate APIs
6. Test and debug
7. Deploy application

*8️⃣ Real-World Frontend Projects*

- Responsive Portfolio Website
- Weather App
- To-Do List Application
- E-commerce Product Page
- Dashboard UI

*Double Tap ♥️ For More*

❤2

47 views06:58

Mohit Decodes

Angular NgRx Full Course 2026 | Beginner to Advanced
https://youtu.be/HmzLEvY4AxU

❤2

43 views11:16

Mohit Decodes

NextJS Tutorial #32 - Read Data from MongoDB in Next.js | GET API
https://youtu.be/8ANeJKzhoTI

YouTube

NextJS Tutorial #32 - Read Data from MongoDB in Next.js | GET API

In this video, we learn how to read data from MongoDB using a GET API in a Next.js application.

You will create an API route, connect the MongoDB database, and use the .find() method to fetch documents from the collection. We also convert the cursor into…

❤1

35 views15:17

Mohit Decodes

NextJS Tutorial #33 - Insert Data into MongoDB in Next.js | POST API
https://youtu.be/ZYCzPfrH7X4

YouTube

NextJS Tutorial #33 - Insert Data into MongoDB in Next.js | POST API

In this video, we learn how to insert data into MongoDB using a POST API in a Next.js application.

You will create a POST API route, read request data using req.json(), and insert the data into a MongoDB collection using the insertOne() method. Finally,…

👍1

36 views15:18

Mohit Decodes

Check All Numbers Positive - Javascript Interview #dsa #interview #coding
https://youtube.com/shorts/VwgH9lN3k8k?feature=share

YouTube

Check All Numbers Positive - Javascript Interview #dsa #interview #coding

Check if all numbers in an array are positive using JavaScript.In this short video, you will learn how to traverse an array and verify that every element is ...

❤1

32 views15:40

Mohit Decodes

*🗄️ Database Integration — MongoDB with Node.js*

Now you move from temporary data (arrays) → real database storage.

Backend apps must store data permanently.

That's where databases come in.

*🧠 What is a Database*

A database stores data persistently.

*Examples:*
- E-commerce: Products, orders
- Social media: Users, posts
- Banking app: Transactions

*Without database → data disappears when server restarts.*

*🍃 What is MongoDB*

MongoDB is a NoSQL database.

*Instead of tables → it stores documents (JSON-like data).*

*Example document:*

{
  "name": "Deepak",
  "role": "Developer",
  "age": 25
}

*Collection = group of documents*
*Database = group of collections*

*📦 Why MongoDB is Popular*

✅ *JSON-like data*
✅ *Flexible schema*
✅ *Works perfectly with JavaScript*
✅ *Scales easily*

*Common in MERN stack.*

*MERN = MongoDB + Express + React + Node*

*🔗 Connecting MongoDB with Node.js*

We use a library called Mongoose.

*Install:*

npm install mongoose

*⚡ Step 1 — Connect Database*

*Example:*

const mongoose = require("mongoose");

mongoose.connect("mongodb://127.0.0.1:27017/myapp")
.then(() => console.log("MongoDB Connected"))
.catch(err => console.log(err));

*Now Node server is connected to MongoDB.*

*🧩 Step 2 — Create Schema*

*Schema defines data structure.*

*Example:*

const userSchema = new mongoose.Schema({
  name: String,
  age: Number
});

*📄 Step 3 — Create Model*

*Model allows database operations.*

const User = mongoose.model("User", userSchema);

*➕ Step 4 — Create Data*

app.post("/users", async (req, res) => {
  const user = new User({
    name: req.body.name,
    age: req.body.age
  });

  await user.save();
  res.json(user);
});

*🔍 Step 5 — Fetch Data*

app.get("/users", async (req, res) => {
  const users = await User.find();
  res.json(users);
});

*❌ Step 6 — Delete Data*

app.delete("/users/:id", async (req, res) => {
  await User.findByIdAndDelete(req.params.id);
  res.json({ message: "User deleted" });
});

*✏️ Step 7 — Update Data*

app.put("/users/:id", async (req, res) => {
  const user = await User.findByIdAndUpdate(
    req.params.id,
    req.body,
    { new: true }
  );
  res.json(user);
});

*🔄 Full Backend Flow Now*

*React → API request*
*Express → Handles route*
*Mongoose → Talks to MongoDB*
*MongoDB → Stores data*

*⚠️ Common Beginner Mistakes*

- *Forgetting to install mongoose*
- *Not using async/await*
- *Wrong MongoDB URL*
- *Not validating schema*

*🧪 Mini Practice Task*

*Build Product API with MongoDB*

*Routes:*
- POST /products
- GET /products
- PUT /products/:id
- DELETE /products/:id

*Fields:*
name
price
category

✅ *Mini Practice Task – Solution*

This solution implements:

✔ POST /products → Add product
✔ GET /products → Fetch products
✔ PUT /products/:id → Update product
✔ DELETE /products/:id → Delete product

🟢 *Step 1 — Install Required Packages*

npm init -y
npm install express mongoose cors

📄 *Step 2 — Create server.js*

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");

const app = express();

app.use(cors());
app.use(express.json());

/* ---------------- DATABASE CONNECTION ---------------- */

mongoose.connect("mongodb://127.0.0.1:27017/productdb")
.then(() => console.log("MongoDB connected"))
.catch(err => console.log(err));

/* ---------------- PRODUCT SCHEMA ---------------- */

const productSchema = new mongoose.Schema({
name: String,
price: Number,
category: String
});

const Product = mongoose.model("Product", productSchema);

/* ---------------- ROUTES ---------------- */

/* CREATE PRODUCT */
app.post("/products", async (req, res) => {

const product = new Product({
name: req.body.name,
price: req.body.price,
category: req.body.category
});

await product.save();

res.json(product);
});

/* GET PRODUCTS */
app.get("/products", async (req, res) => {

const products = await Product.find();

res.json(products);
});

/* UPDATE PRODUCT */
app.put("/products/:id", async (req, res) => {

const product = await Product.

32 views07:52

Mohit Decodes

findByIdAndUpdate(
req.params.id,
req.body,
{ new: true }
);

res.json(product);
});

/* DELETE PRODUCT */
app.delete("/products/:id", async (req, res) => {

await Product.findByIdAndDelete(req.params.id);

res.json({ message: "Product deleted" });
});

/* ---------------- START SERVER ---------------- */

app.listen(3000, () => {
console.log("Server running on port 3000");
});

▶️ *Step 3 — Run Server*

node server.js

You should see:

MongoDB connected
Server running on port 3000

🌐 *Step 4 — Test API*

Using Postman / Thunder Client

➕ *Add Product*

POST

http://localhost:3000/products

Body:

{
"name": "Laptop",
"price": 800,
"category": "Electronics"
}

📥 *Get Products*

GET

http://localhost:3000/products

✏️ *Update Product*

PUT

http://localhost:3000/products/:id

Body:

{
"price": 900
}

❌ *Delete Product*

DELETE

http://localhost:3000/products/:id

🧠 *What You Learned*

✔ Connecting MongoDB with Node.js
✔ Creating schema & model
✔ Creating CRUD API
✔ Using async/await with database
✔ REST API with database storage

*➡️ Double Tap ♥️ For More*

❤1

34 views07:52

Mohit Decodes

DSA #31 - Core Data Structures | Linked List Basics - Node, Insert & Traverse
https://youtu.be/w4UaJihXtbM

YouTube

DSA #31 - Core Data Structures | Linked List Basics - Node, Insert & Traverse

DSA Phase-3 Core Data Structures tutorial focusing on Linked List basics.
In this video you will learn what a Linked List is, how it differs from arrays, and how nodes are structured in a linked list.

We will also implement basic operations like insertion…

❤1

33 views11:25

Mohit Decodes

NextJS Tutorial #34 - Update Data in MongoDB with Next.js | PUT / PATCH API
https://youtu.be/ORegPhCSUyA

YouTube