📌 What You Are Building

A shopping UI where users can:

View products
Filter them instantly
Search and sort without reloading the page

👉 Exactly like Amazon / Flipkart product listing page

🧱 Project Structure

1️⃣ Data (Products)

You’ll usually store products in JSON / Array

const products = [
  {
    id: 1,
    name: "iPhone 13",
    price: 70000,
    category: "Electronics",
    rating: 4.5,
    image: "img1.jpg"
  },
  {
    id: 2,
    name: "T-Shirt",
    price: 999,
    category: "Clothes",
    rating: 4.2,
    image: "img2.jpg"
  }
];

2️⃣ UI Layout

Search bar 🔍
Category buttons 📂
Sort dropdown ⬇️
Product grid 🛍️

⚙️ Core Features (How it Works)

🔎 1. Search Filter

function searchProducts(keyword) {
  return products.filter(product =>
    product.name.toLowerCase().includes(keyword.toLowerCase())
  );
}

👉 Filters products based on text input

📂 2. Category Filter

function filterByCategory(category) {
  return products.filter(product => product.category === category);
}

👉 Example: Only show “Electronics”

💰 3. Price Filter

function filterByPrice(maxPrice) {
  return products.filter(product => product.price <= maxPrice);
}

⭐ 4. Rating Filter

function filterByRating(minRating) {
  return products.filter(product => product.rating >= minRating);
}

🔃 5. Sorting

function sortProducts(products, order) {
  if (order === "low-high") {
    return products.sort((a, b) => a.price - b.price);
  } else {
    return products.sort((a, b) => b.price - a.price);
  }
}

🔄 6. Dynamic Rendering (MOST IMPORTANT)

function displayProducts(data) {
  const container = document.getElementById("product-list");
  container.innerHTML = "";  data.forEach(product => {
    container.innerHTML += `
      <div class="product">
        <img src="${product.image}" />
        <h3>${product.name}</h3>
        <p>₹${product.price}</p>
        <p>⭐ ${product.rating}</p>
      </div>
    `;
  });
}

👉 This updates UI without page reload

🎯 How Everything Connects

When user interacts:

Types → Search runs
Clicks category → Filter runs
Selects sort → Sorting runs

👉 Combine filters:

let filtered = products;filtered = searchProducts(keyword);
filtered = filterByCategory(category);
filtered = filterByPrice(price);displayProducts(filtered);

🧠 Skills You Demonstrate

This project shows recruiters:

✅ Real-world UI logic
✅ Strong JavaScript fundamentals
✅ Array methods (filter, sort)
✅ DOM manipulation
✅ Event handling
✅ Clean UI updates

🚀 Bonus Features (To Make It 🔥)

Add these to stand out:

🧾 Pagination
❤️ Wishlist (LocalStorage)
🛒 Add to Cart
🌙 Dark Mode
🔥 API products (FakeStore API)

💼 How to Explain in Interview

👉 Say this:

“I built a dynamic product filtering system similar to Amazon where users can filter products by category, price, and rating. I used JavaScript array methods like filter() and sort(), and updated the DOM dynamically without reloading the page.”

🇮🇳 Amazon India 🌍 Amazon Global

🛒 E-commerce Product Filter (Full Explanation)