Added Search functionality

Author: iamakr97

backend/.env

@@ -0,0 +1,12 @@
+ADMIN_MAIL_ID=[email protected]
+ADMIN_MAIL_PASS=hsabloewopnpzocd
+API_KEY=223911979549715
+API_SECRET=VhE_AOzw2M1hNGsJjkHbpVNFpik
+BASE_URL="http://localhost:3000"
+CLOUD_NAME=djtdg1hcq
+DATABASE_URL=mongodb+srv://iamakr97:[email protected]/?retryWrites=true&w=majority&appName=Cluster0
+JWT_SECRET=amitkumar
+PORT=4000
+PROFILE_URL=https://ui-avatars.com/api/?name=
+RAZORPAY_KEY_ID=rzp_test_r8Eveaq11tlbJr
+RAZORPAY_KEY_SECRET=GBj7MrDUwPiiq4gk1jFqL86Z

backend/Utils/fileUpload.js

@@ -3,7 +3,7 @@ const cloudinary = require('cloudinary').v2;
 exports.isFileTypeSupported = (type, supportedTypes) => {
     return supportedTypes.includes(type);
 }
-
+ 
 exports.uploadFileToCloudinary = async (file, folder, quality) => {
     try {
         const options = {};

backend/controllers/auth.js

@@ -7,7 +7,7 @@ const jwt = require('jsonwebtoken');
 require('dotenv').config();
 const { mailSender } = require('../Utils/mailSender');
 const emailTemplate = require('../template/OTP_mail');
-
+ 
 
 exports.sendOTP = async (req, res) => {
     try {

backend/controllers/search.js

@@ -0,0 +1,34 @@
+const Product = require('../models/productSchema');
+
+exports.searchProduct = async (req, res) => {
+    try {
+        const { query } = req.query;
+        if (!query) {
+            return res.status(400).json({
+                status: false,
+                message: 'Query is required'
+            });
+        }
+        const results = await Product.find({
+            $or: [
+                { title: { $regex: query, $options: 'i' } },
+                { description: { $regex: query, $options: 'i' } },
+                { category: { $regex: query, $options: 'i' } },
+                { brand: { $regex: query, $options: 'i' } }
+            ]
+        });
+
+        res.status(200).json({
+            success: true,
+            message: "Search Product find successfully",
+            results
+        });
+
+    } catch (error) {
+        res.status(500).json({
+            status: false,
+            message: "Internal Server Error",
+            error: error.message
+        });
+    }
+}

backend/routes/routes.js

@@ -16,6 +16,7 @@ const { addProduct, allProducts, featuredProducts, fetchProductDetails, getAllPr
 const { allCartItems, addToCart, removeFromCart } = require('../controllers/cartHandlers');
 const { checkout, paymentVerification } = require('../controllers/paymentsHandler');
 const { myOrders, allOrders, updateOrder } = require('../controllers/ordersHandler');
+const { searchProduct } = require('../controllers/search');
 
 router.post('/sendotp', sendOTP);
 router.post('/signup', signup);
@@ -48,4 +49,8 @@ router.get('/myOrders', auth, isUser, myOrders);
 router.get('/allOrders', auth, isAdmin, allOrders);
 router.post('/updateOrder/:orderId', auth, isAdmin, updateOrder);
 
+
+//search 
+router.get('/search', searchProduct);
+
 module.exports = router;

frontend/package-lock.json

@@ -11,6 +11,7 @@
     "dotenv": "^16.4.5",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
+    "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",

frontend/package.json

@@ -29,7 +29,7 @@ function App() {
     if (token) {
       const decodedToken = jwtDecode(token);
       const currentTime = Date.now() / 1000;
-      
+
       if (decodedToken.exp < currentTime) {
         localStorage.removeItem('token');
       } else {
@@ -60,7 +60,7 @@ function App() {
         <Route path='/user/address' element={<Address />} />
         <Route path='/user/addAddress' element={<AddAddress />} />
         <Route path='/user/payment' element={<PaymentPage />} />
-        <Route path='/admin/dashboard' element={<AdminDashboard/>} />
+        <Route path='/admin/dashboard' element={<AdminDashboard />} />
       </Routes>
       <Footer />
     </>

frontend/src/App.js

@@ -59,6 +59,39 @@
     color: var(--blue-color);
 }
 
+.search-product {
+    background-color: white;
+    width: 32rem;
+    margin: 0 auto;
+    position: absolute;
+    z-index: 1000;
+    left: 39%;
+}
+
+.search-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+    cursor: pointer;
+}
+
+.search-item:last-child {
+    border-bottom: none;
+}
+
+#product-image {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+}
+
+.search-item p {
+    margin: 0;
+    font-size: 14px;
+}
+
 @media (max-width: 1100px) {
     .nav-container {
         max-width: 90%;

frontend/src/Components/Navbar.css

@@ -1,43 +1,89 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react';
 import './Navbar.css';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import logo from '../Assets/logo.png';
 import { CiSearch } from "react-icons/ci";
 import { PiShoppingCart } from "react-icons/pi";
 import { FaRegUserCircle } from "react-icons/fa";
+import axios from 'axios';
+import debounce from 'lodash.debounce';
 
 function Navbar() {
+    const navigate = useNavigate();
     const [searchBox, setSearchBox] = useState('');
-    function searchHandler(e) {
-        e.preventDefault();
-        setSearchBox("");
-        // console.log(searchBox);
+    const [searchResults, setSearchResults] = useState([]);
+
+    // Function to make the API call
+    const searchProducts = async (query) => {
+        if (query === '') {
+            setSearchResults([]);
+            return;
+        }
+
+        try {
+            const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/search?query=${query}`);
+            setSearchResults(response.data.results);
+            console.log(response.data.results)
+        } catch (error) {
+            console.error('Error fetching search results:', error);
+        }
+    };
+
+    const debouncedSearch = useCallback(
+        debounce((query) => searchProducts(query), 500),
+        []
+    );
+
+    const searchHandler = (e) => {
+        const value = e.target.value;
+        console.log(value);
+        setSearchBox(value);
+        debouncedSearch(value);
+    };
+    function productCardClickHandler(id) {
+        setSearchBox('');
+        setSearchResults([]);
+        navigate(`/product/${id}`);
     }
+
     return (
-        <div className='nav-bar'>
-            <div className="nav-container">
-                <div className="left-nav">
-                    <Link to='/' > <img src={logo} alt="Urban Sole" className='logo' /> </Link>
-                </div>
-                <div className='search-box'>
-                    <form onSubmit={searchHandler}>
-                        <input
-                            className="search-input"
-                            type="text"
-                            placeholder='Search for Products'
-                            value={searchBox}
-                            onChange={(e) => setSearchBox(e.target.value)} 
-                        />
-                        <button className='search-btn'><CiSearch className='search-icon' /></button>
-                    </form>
-                </div>
-                <div className="right-nav">
-                    <Link to='/myAccount'><FaRegUserCircle className='nav-icons' /></Link>
-                    <Link to='/cart'><PiShoppingCart className='nav-icons' /></Link>
+        <>
+            <div className='nav-bar'>
+                <div className="nav-container">
+                    <div className="left-nav">
+                        <Link to='/' > <img src={logo} alt="Urban Sole" className='logo' /> </Link>
+                    </div>
+                    <div className='search-box'>
+                        <form onSubmit={(e) => e.preventDefault()}>
+                            <input
+                                className="search-input"
+                                type="text"
+                                placeholder='Search for Products'
+                                value={searchBox}
+                                onChange={searchHandler} 
+                            />
+                            <button className='search-btn'><CiSearch className='search-icon' /></button>
+                        </form>
+                    </div>
+                    <div className="right-nav">
+                        <Link to='/myAccount'><FaRegUserCircle className='nav-icons' /></Link>
+                        <Link to='/cart'><PiShoppingCart className='nav-icons' /></Link>
+                    </div>
                 </div>
             </div>
-        </div>
-    )
+
+            {searchResults.length > 0 && (
+                <div className='search-product' >
+                    {searchResults.map((product) => (
+                        <div key={product._id} className='search-item' onClick={()=>productCardClickHandler(product._id)}>
+                            <img src={product.image[0]} alt={product.title} id='product-image' />
+                            <p>{product.title}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </>
+    );
 }
 
-export default Navbar;
+export default Navbar;