Forem: Vaibhav Bahuguna

MongoDB Concepts

Vaibhav Bahuguna — Sun, 16 Mar 2025 15:12:28 +0000

🚀 Mastering MongoDB Concepts for Web Technologies

MongoDB is the backbone of MERN Stack applications, and understanding it is crucial for building scalable applications and acing interviews. Here’s a quick guide covering all essential concepts! 👇

🔹 1. MongoDB Basics

✔ NoSQL Database – Stores data in JSON-like BSON format.

✔ Collections & Documents – Similar to SQL tables & rows, but flexible.

🔹 2. CRUD Operations

✔ Create – db.users.insertOne({ name: "Alice" })

✔ Read – db.users.find({ age: { $gt: 20 } })

✔ Update – db.users.updateOne({ name: "Alice" }, { $set: { age: 30 } })

✔ Delete – db.users.deleteOne({ name: "Alice" })

🔹 3. Indexing for Performance

✔ Speed up queries using indexes:

  db.users.createIndex({ email: 1 });

🔹 4. Aggregation Framework

✔ Used for data analytics & reporting.

✔ Example: Count users by age

  db.users.aggregate([{ $group: { _id: "$age", count: { $sum: 1 } } }]);

🔹 5. Relationships: Embed vs. Reference

✔ Embed: Store related data in the same document (faster reads).

✔ Reference: Store ObjectIDs to avoid redundancy (normalized).

🔹 6. Transactions for Atomic Operations

✔ Use Mongoose transactions when updating multiple documents:

  const session = await mongoose.startSession();
  session.startTransaction();
  try {
    await User.updateOne({ _id: userId }, { balance: 100 }, { session });
    await session.commitTransaction();
  } catch (err) {
    await session.abortTransaction();
  } finally {
    session.endSession();
  }

🔹 7. MongoDB in MERN Stack

✔ Connect MongoDB to Node.js

  mongoose.connect("mongodb://localhost:27017/myDB");

✔ Build APIs with Express.js

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

🔹 8. MongoDB Optimization & Best Practices

✅ Use Indexes for faster queries.

✅ Use Aggregation for analytics and reporting.
✅ Use Projection to fetch only required fields.

✅ Use Pagination with .limit() and .skip().

✅ Choose between Embedding vs. Referencing wisely.

🔥 Common Interview Questions

🔹 How does MongoDB differ from SQL?

🔹 What is the use of indexing in MongoDB?

🔹 How would you design a scalable database in MongoDB?

🔹 How do transactions work in MongoDB?

💬 Have any doubts? Drop them in the comments! Let's discuss. 👇

My LeetCode Experience

Vaibhav Bahuguna — Mon, 17 Feb 2025 07:13:55 +0000

🔥 My LeetCode Experience: From Fibonacci to Dynamic Programming 🔥

When I first started tackling LeetCode problems, even the basics like Fibonacci and Two Sum felt like climbing a mountain. But with consistent practice and a structured approach, I began to see patterns, improve my problem-solving skills, and build confidence. Over time, I explored advanced topics like recursion, backtracking, dynamic programming (DP), union-find, and tree-based algorithms, solidifying my understanding of data structures and algorithms.

Here’s how I transformed my LeetCode journey from overwhelming to empowering—and how you can too!

🚀 My Process for Solving LeetCode Problems

1️⃣ Read the question twice

First, read to understand the problem.
Second, read to identify inputs, outputs, and edge cases.

2️⃣ Brainstorm multiple approaches

Think about brute force first, then optimize.
Consider time and space complexity for each approach.

3️⃣ Think end-to-end

Visualize the flow: inputs → processing → outputs.
Anticipate edge cases (e.g., empty inputs, large datasets).

4️⃣ Write a clear algorithm

Pseudocode or step-by-step plan before coding.
This helps avoid getting stuck mid-implementation.

5️⃣ Code the solution

Start with the simplest approach, then refine.
Keep the code clean and readable.

6️⃣ Analyze the approach

After solving, reflect: What worked? What didn’t?
Could the solution be more efficient?

7️⃣ Explore alternative solutions

Look at other submissions or discuss with peers.
Learn from optimized solutions to improve your skills.

🔥 Lessons Learned Along the Way

✅ Consistency beats intensity

Solving a few problems daily is better than cramming.
Small, consistent efforts compound over time.

✅ Pattern recognition is key

Most problems fall into familiar categories (e.g., sliding window, two pointers, DP).
Recognizing these patterns speeds up problem-solving.

✅ Failure isn’t the end—it’s a lesson

Debugging and learning from mistakes is part of the process.
Every error is an opportunity to grow.

💡 Why I Keep Going

A couple of months ago, seeing a wall of errors was frustrating. Today? It’s just another puzzle to solve. Progress isn’t always about getting the right answer immediately—it’s about learning how to think.

I used to struggle alone, thinking I had to figure out everything myself. But I’ve realized that struggling endlessly isn’t a badge of honor—learning is. Ask for help, debug, optimize, and repeat.

Every problem solved is a step forward, and I’m here for the grind. 💪🔥

🛠️ Tools and Resources That Helped Me

LeetCode Discuss Section: Great for understanding alternative approaches.
NeetCode: Structured problem sets and video explanations.
Cracking the Coding Interview: A classic book for mastering DSA.
Visualgo: Visualizing algorithms made concepts click for me.

🌟 My Progress So Far

148+ problems solved, ranging from Easy to Hard.
Concepts mastered:
- Dynamic Programming (Knapsack, Coin Change)
- Graph Traversal (BFS, DFS)
- Tree Algorithms (BST, Trie, Heaps)
- Sliding Window, Two Pointers, and more!

🚨 Final Thoughts

LeetCode isn’t just about acing interviews—it’s about building a problem-solving mindset. Whether you’re just starting or already deep into your journey, remember: progress takes time, but every step counts.

Keep grinding, keep learning, and most importantly, enjoy the process!

What’s your LeetCode journey been like? Share your tips, struggles, and wins in the comments below! Let’s grow together. 💬👇

Understanding Event Propagation in JavaScript

Vaibhav Bahuguna — Tue, 04 Feb 2025 16:12:13 +0000

JavaScript events play a crucial role in interactive web applications. Understanding event propagation helps developers manage how events travel through the DOM. Let's break down event propagation and its related concepts.

1. Event Propagation

Event propagation determines how events traverse the DOM tree. It consists of three phases:

Capturing Phase: The event starts from the window and moves down the DOM tree to the target element.
Target Phase: The event reaches the target element where it was triggered.
Bubbling Phase: The event bubbles up from the target element back to the window.

2. Event Bubbling

In the bubbling phase, the event starts from the target element and propagates upwards through its ancestors.
Example: Clicking a <button> inside a <div> first triggers the event on the button (target phase), then on the <div>, and so on.
To stop bubbling, use:

  event.stopPropagation();

3. Event Capturing (Trickling)

The opposite of bubbling, where the event moves from the window down to the target element.
Capturing can be enabled by setting the third parameter of addEventListener to true:

  element.addEventListener('click', handler, true);

4. event.target

event.target refers to the element on which the event originally occurred.
Example:

  element.addEventListener('click', (event) => console.log(event.target.tagName));

5. this.tagName

this.tagName points to the parent element on which the function is called, similar to event.currentTarget.

  element.addEventListener('click', function() {
    console.log(this.tagName);
  });

6. event.currentTarget

event.currentTarget refers to the element that is handling the event.
Example:

  element.addEventListener('click', (event) => console.log(event.currentTarget.tagName));

7. Event Capturing and Trickling

Capturing (or trickling) describes the initial phase where an event moves from the window down to the target element.
Enabled by setting useCapture to true in addEventListener.

Example Code

<div id="parent">
  <button id="child">Click Me</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  // Capturing phase
  parent.addEventListener('click', (event) => {
    console.log('Capturing - Parent:', event.currentTarget.tagName);
  }, true);
  child.addEventListener('click', (event) => {
    console.log('Capturing - Child:', event.currentTarget.tagName);
  }, true);
  // Order: parent → child

  // Bubbling phase
  parent.addEventListener('click', (event) => {
    console.log('Bubbling - Parent:', event.currentTarget, event.target);
  });
  child.addEventListener('click', (event) => {
    console.log('Target - Child:', event.currentTarget, event.target);
  });
  // Order: child → parent
</script>

Key Differences

Property/Method	Description
`event.target`	The element where the event originated.
`event.currentTarget`	The element to which the event handler is attached.
`event.stopPropagation()`	Stops the event from propagating further.
`event.preventDefault()`	Prevents the default behavior of an event (e.g., form submission).

Summary

Event propagation has three phases: capturing, target, and bubbling.
Bubbling is the default behavior where events move upward.
Capturing enables events to travel downward first.
event.target refers to the event's originating element.
event.currentTarget refers to the element handling the event.
Use addEventListener with true for capturing.

Mastering these concepts will help you handle JavaScript events efficiently! 🚀

.Store - E-Commerce Application

Vaibhav Bahuguna — Tue, 04 Feb 2025 15:46:08 +0000

🌟 Introduction

Welcome to .Store, an advanced, full-featured E-Commerce application built with the MERN Stack (MongoDB, Express, React, Node.js). Whether you're a developer looking for inspiration or a business owner seeking a scalable online store, this project has everything you need!

💻 Live Demo: Try it Now

This platform allows seamless product browsing, filtering, sorting, cart management, and secure payment processing—all with an intuitive and modern UI. Plus, administrators get full control with a robust dashboard for managing products, users, and orders.

🚀 Key Features

🛡️ Authentication & Security

🔹 User Authentication – Secure login and registration using JWT-based authentication

🔹 Password Encryption – User credentials are safely stored using bcrypt

🛍️ Shopping & Cart

🛒 Browse Products – Explore a variety of items with real-time search and filtering

🛍️ Cart Management – Add, remove, and update items in the cart

📦 Order Tracking – Keep an eye on your order history & status

💳 Payments & Transactions

💰 Integrated Payment Gateway – Secure online transactions using Stripe/PayPal

🎯 Real-Time Order Processing – Instant confirmation and updates for a seamless experience

📊 Admin Dashboard

🛠️ Product Management – Add, update, or delete products from an intuitive interface

📋 Order Control – Manage user orders and update statuses

📈 User Management – Keep track of customers and their activities

🔥 Modern UI & UX

🎨 Responsive Design – Fully optimized for mobile, tablet, and desktop

✨ Notifications – Real-time updates using Toastify

🧐 Advanced Search & Filters – Easily find what you need with dynamic filters

🛠️ Tech Stack & Tools

Frontend: React, Redux, Tailwind CSS, Bootstrap, Ant Design (antd)
Backend: Node.js, Express.js
Database: MongoDB
Payment Gateway: Stripe/PayPal
Other Libraries & Tools:
- JWT – Secure authentication
- Axios – API request handling
- Multer – File uploads (e.g., product images)
- Moment.js – Date/time formatting
- Colors – Enhanced terminal styling
- dotenv – Environment variable management

📌 Why You Should Check This Out

✅ Scalable Architecture – Built for performance & easy expansion

✅ Real-World Use Case – Implements best practices for modern eCommerce

✅ Open Source – Modify and contribute to improve it further!

🏆 Acknowledgments

📌 The product data used in this project was sourced from Zara for demonstration purposes only.

📌 Inspired by modern eCommerce giants like Amazon & Flipkart.

💬 Have feedback or suggestions? Drop a comment below!

🚀 Let’s build something amazing together!