Feature: Clean Shop URL + Firestore-Based Product Loading Objective Implement clean URL routing ("/shop/{shopName}") and dynamically load shop data and its products from Firestore using "ownerId". --- Database Structure (Firestore) Collection: "shops" { "shopName": "xyz", "ownerId": "abc123" } Collection: "products" { "title": "Product 1", "ownerId": "abc123" } --- Requirements 1. URL Handling (Frontend) - Support clean URL: /shop/{shopName} - Extract "shopName": const shopName = window.location.pathname.split("/").pop(); --- 2. Fetch Shop from Firestore - Query "shops" collection using "shopName": import { collection, query, where, getDocs } from "firebase/firestore"; const shopQuery = query( collection(db, "shops"), where("shopName", "==", shopName) ); const shopSnapshot = await getDocs(shopQuery); if (shopSnapshot.empty) { // Handle shop not found console.log("Shop not found"); return; } const shopData = shopSnapshot.docs[0].data(); const ownerId = shopData.ownerId; --- 3. Fetch Products by ownerId const productQuery = query( collection(db, "products"), where("ownerId", "==", ownerId) ); const productSnapshot = await getDocs(productQuery); const products = productSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); --- 4. Render Products - Display all products returned from query - Ensure UI updates dynamically after fetch --- Hosting / Routing (Netlify) Add "_redirects" file: /shop/* /shop.html 200 This ensures: - "/shop/xyz" loads "shop.html" - URL remains clean --- Data Constraints Option A (Current) - "shopName" must be unique Option B (Recommended) Add "slug" field: { "shopName": "XYZ Store", "slug": "xyz", "ownerId": "abc123" } Then query: where("slug", "==", shopName) --- Edge Cases - Shop not found → show 404 UI - No products → show empty state - Case sensitivity → normalize: shopName.toLowerCase() --- Performance Considerations - Firestore queries are indexed by default for simple "where" - Avoid fetching all products and filtering on frontend - Always use Firestore query with "where("ownerId", "==", ownerId)" --- Final Flow 1. User visits: /shop/xyz 2. Extract "shopName" 3. Query "shops" → get "ownerId" 4. Query "products" using "ownerId" 5. Render results --- Expected Outcome - Clean, SEO-friendly URLs - Efficient Firestore queries - No dependency on query parameters ("?id=") - Scalable structure for multi-shop system