search bar now working

backend/controllers/product.js

@@ -33,12 +33,12 @@ exports.getAllProducts = async (req, res) => {
           I.URL AS ProductImage,
           C.Name AS Category
       FROM Product P
-      LEFT JOIN
+      JOIN Image_URL I ON p.ProductID = i.ProductID
-          (SELECT ProductID, URL FROM Image_URL LIMIT 1) I ON P.ProductID = I.ProductID
       JOIN User U ON P.UserID = U.UserID
       JOIN Category C ON P.CategoryID = C.CategoryID;
     `);
 
+    console.log(data);
     res.json({
       success: true,
       message: "Products fetched successfully",

backend/controllers/search.js

@@ -0,0 +1,164 @@
+const db = require("../utils/database");
+
+exports.searchProductsByName = async (req, res) => {
+  const { name } = req.query;
+
+  if (name.length === 0) {
+    console.log("Searching for products with no name", name);
+  }
+
+  console.log("Searching for products with name:", name);
+
+  try {
+    // Modify SQL to return all products when no search term is provided
+    const sql = `
+      SELECT p.*, i.URL as image
+      FROM Product p
+      LEFT JOIN Image_URL i ON p.ProductID = i.ProductID
+      ${name ? "WHERE p.Name LIKE ?" : ""}
+      ORDER BY p.ProductID
+    `;
+
+    const params = name ? [`%${name}%`] : [];
+    console.log("Executing SQL:", sql);
+    console.log("With parameters:", params);
+
+    const [data] = await db.execute(sql, params);
+
+    console.log("Raw Database Result:", data);
+
+    if (data.length === 0) {
+      console.log("No products found matching:", name);
+      return res.status(404).json({
+        success: false,
+        message: "No products found matching your search",
+      });
+    }
+
+    // Group products by ProductID to handle multiple images per product
+    const productsMap = new Map();
+
+    data.forEach((row) => {
+      if (!productsMap.has(row.ProductID)) {
+        const product = {
+          ProductID: row.ProductID,
+          Name: row.Name,
+          Description: row.Description,
+          Price: row.Price,
+          images: row.image,
+        };
+        productsMap.set(row.ProductID, product);
+      } else if (row.image_url) {
+        productsMap.get(row.ProductID).images.push(row.image_url);
+      }
+    });
+
+    const products = Array.from(productsMap.values());
+
+    console.log("Processed Products:", products);
+
+    res.json({
+      success: true,
+      message: "Products fetched successfully",
+      data: products,
+      count: products.length,
+    });
+  } catch (error) {
+    console.error("Database Error:", error);
+    return res.status(500).json({
+      success: false,
+      message: "Database error occurred",
+      error: error.message || "Unknown database error",
+    });
+  }
+};
+
+// exports.searchProductsByName = async (req, res) => {
+//   const { name } = req.query;
+
+//   // Add better validation and error handling
+//   if (!name || typeof name !== "string") {
+//     return res.status(400).json({
+//       success: false,
+//       message: "Valid search term is required",
+//     });
+//   }
+
+//   console.log("Searching for products with name:", name);
+
+//   try {
+//     // Log the SQL query and parameters for debugging
+//     const sql = `
+//       SELECT p.*, i.URL AS image_url
+//       FROM Product p
+//       LEFT JOIN Image_URL i ON p.ProductID = i.ProductID
+//       WHERE p.Name LIKE ?
+//     `;
+//     const params = [`%${name}%`];
+//     console.log("Executing SQL:", sql);
+//     console.log("With parameters:", params);
+
+//     const [data] = await db.execute(sql, params);
+
+//     // Log raw data for debugging
+//     console.log("Raw Database Result:", data);
+
+//     if (data.length === 0) {
+//       console.log("No products found matching:", name);
+//       return res.status(404).json({
+//         success: false,
+//         message: "No products found matching your search",
+//       });
+//     }
+
+//     // Group products by ProductID to handle multiple images per product
+//     const productsMap = new Map();
+
+//     data.forEach((row) => {
+//       if (!productsMap.has(row.ProductID)) {
+//         // Create a clean object without circular references
+//         const product = {
+//           ProductID: row.ProductID,
+//           Name: row.Name,
+//           Description: row.Description,
+//           Price: row.Price,
+//           // Add any other product fields you need
+//           images: row.image_url ? [row.image_url] : [],
+//         };
+//         productsMap.set(row.ProductID, product);
+//       } else if (row.image_url) {
+//         // Add additional image to existing product
+//         productsMap.get(row.ProductID).images.push(row.image_url);
+//       }
+//     });
+
+//     // Convert map to array of products
+//     const products = Array.from(productsMap.values());
+
+//     // Log processed products for debugging
+//     console.log("Processed Products:", products);
+
+//     res.json({
+//       success: true,
+//       message: "Products fetched successfully",
+//       data: products,
+//       count: products.length,
+//     });
+//   } catch (error) {
+//     // Enhanced error logging
+//     console.error("Database Error Details:", {
+//       message: error.message,
+//       code: error.code,
+//       errno: error.errno,
+//       sqlState: error.sqlState,
+//       sqlMessage: error.sqlMessage,
+//       sql: error.sql,
+//     });
+
+//     return res.status(500).json({
+//       success: false,
+//       message: "Database error occurred",
+//       error: error.message || "Unknown database error",
+//     });
+//   }
+// };

backend/index.js

@@ -5,6 +5,7 @@ const db = require("./utils/database");
 
 const userRouter = require("./routes/user");
 const productRouter = require("./routes/product");
+const searchRouter = require("./routes/search");
 const { generateEmailTransporter } = require("./utils/mail");
 const {
   cleanupExpiredCodes,
@@ -34,6 +35,7 @@ checkDatabaseConnection(db);
 //Routes
 app.use("/api/user", userRouter); //prefix with /api/user
 app.use("/api/product", productRouter); //prefix with /api/product
+app.use("/api/search_products", searchRouter); //prefix with /api/product
 
 // Set up a scheduler to run cleanup every hour
 setInterval(cleanupExpiredCodes, 60 * 60 * 1000);

backend/routes/search.js

@@ -0,0 +1,14 @@
+// routes/product.js
+const express = require("express");
+const { searchProductsByName } = require("../controllers/search");
+const router = express.Router();
+
+// Add detailed logging middleware
+router.use((req, res, next) => {
+  console.log(`Incoming ${req.method} request to ${req.path}`);
+  next();
+});
+
+router.get("/search", searchProductsByName);
+
+module.exports = router;

backend/utils/database.js

@@ -4,7 +4,7 @@ const mysql = require("mysql2");
 const pool = mysql.createPool({
   host: "localhost",
   user: "root",
-  database: "marketplace",
+  database: "Marketplace",
 });
 
 //Export a promise for promise-based query

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.0.9",
+        "axios": "^1.8.4",
         "lucide-react": "^0.477.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -1770,6 +1771,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1824,6 +1831,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1898,7 +1916,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -1993,6 +2010,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2153,6 +2182,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -2182,7 +2220,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -2283,7 +2320,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2293,7 +2329,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2331,7 +2366,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -2344,7 +2378,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -2732,6 +2765,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -2748,6 +2801,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2780,7 +2848,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2831,7 +2898,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
       "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -2856,7 +2922,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -2931,7 +2996,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3002,7 +3066,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3015,7 +3078,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -3031,7 +3093,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3895,12 +3956,32 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4251,6 +4332,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.9",
+    "axios": "^1.8.4",
     "lucide-react": "^0.477.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

frontend/src/App.jsx

@@ -13,6 +13,7 @@ import Transactions from "./pages/Transactions";
 import Favorites from "./pages/Favorites";
 import ProductDetail from "./pages/ProductDetail";
 import ItemForm from "./pages/MyListings";
+import SearchPage from "./pages/SearchPage"; // Make sure to import the SearchPage
 
 function App() {
   // Authentication state - initialize from localStorage if available
@@ -634,6 +635,16 @@ function App() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/search"
+            element={
+              <ProtectedRoute>
+                <div className="container mx-auto px-4 py-6">
+                  <SearchPage />
+                </div>
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/settings"
             element={

frontend/src/components/Navbar.jsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import UserDropdown from "./UserDropdown";
 import { Search, Heart } from "lucide-react";
 
 const Navbar = ({ onLogout, userName }) => {
   const [searchQuery, setSearchQuery] = useState("");
+  const navigate = useNavigate();
 
   const handleSearchChange = (e) => {
     setSearchQuery(e.target.value);
@@ -12,8 +13,14 @@ const Navbar = ({ onLogout, userName }) => {
 
   const handleSearchSubmit = (e) => {
     e.preventDefault();
-    console.log("Searching for:", searchQuery);
+
-    // TODO: Implement search functionality
+    // if (!searchQuery.trim()) return;
+
+    // Navigate to search page with query
+    navigate({
+      pathname: "/search",
+      search: `?name=${encodeURIComponent(searchQuery)}`,
+    });
   };
 
   return (
@@ -41,13 +48,19 @@ const Navbar = ({ onLogout, userName }) => {
                 <input
                   type="text"
                   placeholder="Search for books, electronics, furniture..."
-                  className="w-full p-2 pl-10 pr-4 border border-gray-300 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                  className="w-full p-2 pl-10 pr-4 border border-gray-300 rounded-md focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                   value={searchQuery}
                   onChange={handleSearchChange}
                 />
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <Search className="h-5 w-5 text-gray-400" />
                 </div>
+                <button
+                  type="submit"
+                  className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 hover:text-green-500"
+                >
+                  Search
+                </button>
               </div>
             </form>
           </div>
@@ -61,6 +74,7 @@ const Navbar = ({ onLogout, userName }) => {
             >
               <Heart className="h-6 w-6" />
             </Link>
+
             {/* User Profile */}
             <UserDropdown onLogout={onLogout} userName={userName} />
           </div>

frontend/src/pages/Home.jsx

@@ -39,7 +39,6 @@ const Home = () => {
         setError(error.message);
       }
     };
-
     fetchProducts();
   }, []);
 
@@ -112,16 +111,34 @@ const Home = () => {
       </div> */}
 
       {/* Recent Listings */}
-      <div>
+      <div className="relative py-4">
         <h2 className="text-xl font-semibold text-gray-800 mb-4">
-          Recent Listings
+          Recommendation
         </h2>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
+
+        <div className="relative">
+          {/* Left Button - Overlaid on products */}
+          <button
+            onClick={() =>
+              document
+                .getElementById("RecomContainer")
+                .scrollBy({ left: -400, behavior: "smooth" })
+            }
+            className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+          >
+            ◀
+          </button>
+
+          {/* Scrollable Listings Container */}
+          <div
+            id="RecomContainer"
+            className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
+          >
             {listings.map((listing) => (
               <Link
                 key={listing.id}
                 to={`/product/${listing.id}`}
-              className="bg-white border border-gray-200 hover:shadow-md transition-shadow"
+                className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
               >
                 <div className="relative">
                   <img
@@ -131,10 +148,10 @@ const Home = () => {
                   />
                   <button
                     onClick={(e) => toggleFavorite(listing.id, e)}
-                  className="absolute top-2 right-2 p-1 bg-white rounded-full shadow-sm"
+                    className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm"
                   >
                     <Heart
-                    className={`h-5 w-5 ${
+                      className={`h-6 w-6 ${
                         listing.isFavorite
                           ? "text-red-500 fill-red-500"
                           : "text-gray-400"
@@ -144,23 +161,21 @@ const Home = () => {
                 </div>
 
                 <div className="p-4">
-                <div className="flex justify-between items-start mb-2">
                   <h3 className="text-lg font-medium text-gray-800 leading-tight">
                     {listing.title}
                   </h3>
-                  <span className="font-semibold text-green-600">
+                  <span className="font-semibold text-green-600 block mt-1">
                     ${listing.price}
                   </span>
-                </div>
 
-                <div className="flex items-center text-sm text-gray-500 mb-3">
+                  <div className="flex items-center text-sm text-gray-500 mt-2">
                     <Tag className="h-4 w-4 mr-1" />
                     <span>{listing.category}</span>
                     <span className="mx-2">•</span>
                     <span>{listing.condition}</span>
                   </div>
 
-                <div className="flex justify-between items-center pt-2 border-t border-gray-100">
+                  <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
                     <span className="text-xs text-gray-500">
                       {listing.datePosted}
                     </span>
@@ -172,6 +187,111 @@ const Home = () => {
               </Link>
             ))}
           </div>
+
+          {/* Right Button - Overlaid on products */}
+          <button
+            onClick={() =>
+              document
+                .getElementById("RecomContainer")
+                .scrollBy({ left: 400, behavior: "smooth" })
+            }
+            className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+          >
+            ▶
+          </button>
+        </div>
+      </div>
+
+      {/* Recent Listings */}
+      <div className="relative py-4">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">
+          Recent Listings
+        </h2>
+
+        <div className="relative">
+          {/* Left Button - Overlaid on products */}
+          <button
+            onClick={() =>
+              document
+                .getElementById("listingsContainer")
+                .scrollBy({ left: -400, behavior: "smooth" })
+            }
+            className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+          >
+            ◀
+          </button>
+
+          {/* Scrollable Listings Container */}
+          <div
+            id="listingsContainer"
+            className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
+          >
+            {listings.map((listing) => (
+              <Link
+                key={listing.id}
+                to={`/product/${listing.id}`}
+                className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
+              >
+                <div className="relative">
+                  <img
+                    src={listing.image}
+                    alt={listing.title}
+                    className="w-full h-48 object-cover"
+                  />
+                  <button
+                    onClick={(e) => toggleFavorite(listing.id, e)}
+                    className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm"
+                  >
+                    <Heart
+                      className={`h-6 w-6 ${
+                        listing.isFavorite
+                          ? "text-red-500 fill-red-500"
+                          : "text-gray-400"
+                      }`}
+                    />
+                  </button>
+                </div>
+
+                <div className="p-4">
+                  <h3 className="text-lg font-medium text-gray-800 leading-tight">
+                    {listing.title}
+                  </h3>
+                  <span className="font-semibold text-green-600 block mt-1">
+                    ${listing.price}
+                  </span>
+
+                  <div className="flex items-center text-sm text-gray-500 mt-2">
+                    <Tag className="h-4 w-4 mr-1" />
+                    <span>{listing.category}</span>
+                    <span className="mx-2">•</span>
+                    <span>{listing.condition}</span>
+                  </div>
+
+                  <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
+                    <span className="text-xs text-gray-500">
+                      {listing.datePosted}
+                    </span>
+                    <span className="text-sm font-medium text-gray-700">
+                      {listing.seller}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          {/* Right Button - Overlaid on products */}
+          <button
+            onClick={() =>
+              document
+                .getElementById("listingsContainer")
+                .scrollBy({ left: 400, behavior: "smooth" })
+            }
+            className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+          >
+            ▶
+          </button>
+        </div>
       </div>
     </div>
   );

frontend/src/pages/ProductDetail.jsx

@@ -133,11 +133,11 @@ const ProductDetail = () => {
     <div className="max-w-6xl mx-auto px-4 py-8">
       <div className="mb-6">
         <Link
-          to="/"
+          to="/search"
           className="flex items-center text-green-600 hover:text-green-700"
         >
           <ArrowLeft className="h-4 w-4 mr-1" />
-          <span>Back to listings</span>
+          <span>Back</span>
         </Link>
       </div>
 

frontend/src/pages/SearchPage.jsx

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from "react";
+import { Filter, Grid, Heart, Tag, X } from "lucide-react";
+import { useLocation, Link } from "react-router-dom";
+import axios from "axios";
+
+const SearchPage = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const nameParam = queryParams.get("name") || "";
+  const initialSearchQuery = location.state?.query || nameParam || "";
+
+  const [products, setProducts] = useState([]);
+  const [filteredProducts, setFilteredProducts] = useState([]);
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [priceRange, setPriceRange] = useState({ min: 0, max: 1000 });
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  useEffect(() => {
+    fetchProducts(initialSearchQuery);
+  }, [initialSearchQuery]);
+
+  const fetchProducts = async (query) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await axios.get(
+        `http://localhost:3030/api/search_products/search`,
+        {
+          params: { name: query },
+        },
+      );
+
+      if (response.data.success) {
+        const transformedProducts = response.data.data.map((product) => ({
+          id: product.ProductID,
+          title: product.Name,
+          description: product.Description || "",
+          price: product.Price || 0,
+          category: product.Category || "Uncategorized",
+          condition: product.Condition || "Used",
+          image: product.images,
+          seller: product.SellerName || "Unknown Seller",
+          isFavorite: false,
+        }));
+
+        setProducts(transformedProducts);
+        setFilteredProducts(transformedProducts);
+      } else {
+        setError(response.data.message || "Failed to fetch products");
+        setProducts([]);
+        setFilteredProducts([]);
+      }
+    } catch (err) {
+      console.error("Error fetching products:", err);
+      setError(err.response?.data?.message || "Error connecting to the server");
+      setProducts([]);
+      setFilteredProducts([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleFavorite = (id, e) => {
+    e.preventDefault();
+    setProducts((prev) =>
+      prev.map((product) =>
+        product.id === id
+          ? { ...product, isFavorite: !product.isFavorite }
+          : product,
+      ),
+    );
+  };
+
+  const filterProducts = () => {
+    let result = products;
+    result = result.filter(
+      (product) =>
+        product.price >= priceRange.min && product.price <= priceRange.max,
+    );
+    setFilteredProducts(result);
+  };
+
+  const applyFilters = () => {
+    filterProducts();
+    setIsFilterOpen(false);
+  };
+
+  const resetFilters = () => {
+    setPriceRange({ min: 0, max: 1000 });
+    setFilteredProducts(products);
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex flex-col md:flex-row gap-6">
+        <div
+          className={`
+          fixed inset-0 z-50 bg-white transform transition-transform duration-300
+          ${isFilterOpen ? "translate-x-0" : "translate-x-full"}
+          md:translate-x-0 md:relative md:block md:w-72
+          overflow-y-auto shadow-lg rounded-lg
+        `}
+        >
+          <div className="md:hidden flex justify-between items-center p-4 border-b">
+            <h3 className="text-lg font-semibold">Filters</h3>
+            <button onClick={() => setIsFilterOpen(false)}>
+              <X className="text-gray-600" />
+            </button>
+          </div>
+
+          <div className="p-4 space-y-4">
+            <div className="bg-gray-50 rounded-lg p-3">
+              <h3 className="font-semibold text-gray-700 mb-3">Price Range</h3>
+              <div className="space-y-2">
+                <div className="flex space-x-2">
+                  <input
+                    type="number"
+                    placeholder="Min"
+                    value={priceRange.min}
+                    onChange={(e) =>
+                      setPriceRange((prev) => ({
+                        ...prev,
+                        min: Number(e.target.value),
+                      }))
+                    }
+                    className="w-full p-2 border rounded text-gray-700"
+                  />
+                  <input
+                    type="number"
+                    placeholder="Max"
+                    value={priceRange.max}
+                    onChange={(e) =>
+                      setPriceRange((prev) => ({
+                        ...prev,
+                        max: Number(e.target.value),
+                      }))
+                    }
+                    className="w-full p-2 border rounded text-gray-700"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="flex space-x-2">
+              <button
+                onClick={applyFilters}
+                className="w-full bg-green-500 text-white p-3 rounded-lg hover:bg-green-600 transition-colors"
+              >
+                Apply Filters
+              </button>
+              <button
+                onClick={resetFilters}
+                className="w-full bg-gray-200 text-gray-700 p-3 rounded-lg hover:bg-gray-300 transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 mt-4 md:mt-0">
+          <h2 className="text-2xl font-bold text-gray-800">
+            {filteredProducts.length} Results
+            {searchQuery && (
+              <span className="text-lg font-normal text-gray-600">
+                {" "}
+                for "{searchQuery}"
+              </span>
+            )}
+          </h2>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+            {filteredProducts.map((listing) => (
+              <Link
+                key={listing.id}
+                to={`/product/${listing.id}`}
+                className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow block"
+              >
+                <img
+                  src={listing.image}
+                  alt={listing.title}
+                  className="w-full h-48 object-cover rounded-t-lg"
+                />
+                <div className="p-4">
+                  <h3 className="text-lg font-medium text-gray-800">
+                    {listing.title}
+                  </h3>
+                  <p className="text-green-600 font-semibold">
+                    ${Number(listing.price).toFixed(2)}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchPage;