added the searching but search results are not visible because of UI, tested on postman

client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
+    "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/components/Search.jsx

@@ -1,12 +1,57 @@
-import { GoSearch } from "react-icons/go";
+import React, { useState } from 'react';
+import axios from 'axios';
+import { GoSearch } from 'react-icons/go';
 
 const Search = () => {
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]); // State to hold search results
+
+    const handleInputChange = (e) => {
+        setQuery(e.target.value);
+    };
+
+    const handleKeyPress = async (e) => {
+        if (e.key === 'Enter') {
+            // Make API call
+            try {
+                const response = await axios.get(`http://localhost:5000/api/items/search`, {
+                    params: { q: query }
+                });
+                setResults(response.data); // Update results state with API response
+            } catch (error) {
+                console.error("Error fetching items:", error);
+            }
+        }
+    };
+
     return (
+        <div>
             <div className="search me-5">
-            <GoSearch style={{margin:"0px 20px 0px 10px"}}/>
-                <input type="search" placeholder="Search for products, brands and more" aria-label="Search" />
+                <GoSearch style={{ margin: "0px 20px 0px 10px" }} />
+                <input
+                    type="search"
+                    placeholder="Search for products, brands and more"
+                    aria-label="Search"
+                    value={query}
+                    onChange={handleInputChange}
+                    onKeyPress={handleKeyPress}
+                />
+            </div>
+
+            <div className="results">
+                {results.length > 0 ? (
+                    results.map((item) => (
+                        <div key={item._id} className="result-item">
+                            <h3>{item.name}</h3>
+                            {/* Add any additional item properties you want to display */}
+                        </div>
+                    ))
+                ) : (
+                    <p>No results found.</p>
+                )}
             </div>
-    )
-}
+        </div>
+    );
+};
 
-export default Search;
+export default Search;

server/DB/connectDB.js

@@ -1,6 +1,6 @@
 const mongoose = require('mongoose')
 
-// const connectionString ="mongodb+srv://anish8427singhchandel:842799@myntra-cluster.oo9kwdh.mongodb.net/myntra-DB?retryWrites=true&w=majority&appName=myntra-Cluster"
+// const connectionString ="mongodb+srv://anuj:1234@cluster0.0hqyp.mongodb.net/myntra?retryWrites=true&w=majority"
 
 const connectDB=(url)=>{
     return mongoose.connect(url)

server/app.js

@@ -8,17 +8,18 @@ const {router} = require('./router/items')
 require('dotenv').config();
 
 app.use('/',router);
+app.use('/api/items',router);
 
 
-const port = process.env.PORT || 5000;
-const start = async () => {
-    try {
-        await connectDB(process.env.MONGO_URI)
-        app.listen(port, () => {
-            console.log('server connected to PORT 5000 and DB')
-        })
-    } catch (error) {
-        console.log("error occurred : ",error)
+    const port = process.env.PORT || 5000;
+    const start = async () => {
+        try {
+            await connectDB(process.env.MONGO_URI)
+            app.listen(port, () => {
+                console.log('server connected to PORT 5000 and DB')
+            })
+        } catch (error) {
+            console.log("error occurred : ",error)
+        }
     }
-}
-start();
+    start();

server/controllers/items.js

@@ -1,62 +1,98 @@
-const Item = require('../models/items')
+const Item = require('../models/items');
 const Bag_Item = require('../models/bagItems');
 
-const addItems  = async(req,res) => {
+// Existing functions...
+
+const addItems = async (req, res) => {
     try {        
-        const item=await Item.create(req.body);
-        res.status(201).json(item)
+        const item = await Item.create(req.body);
+        res.status(201).json(item);
     } catch (error) {
-        console.log("error occured : /n",error)
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
     }
-}
+};
 
-const addToBag  = async(req,res) => {
+const addToBag = async (req, res) => {
     try {        
-        // console.log(req.body)
-        const bagItem=await Bag_Item.create(req.body);
-        res.status(201).json(bagItem)
+        const bagItem = await Bag_Item.create(req.body);
+        res.status(201).json(bagItem);
     } catch (error) {
-        console.log("error occured : /n",error)
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
     }
-}
+};
 
-const getInitialItems = async(req, res) => {
+const getInitialItems = async (req, res) => {
     try {
         const initialItems = await Item.find({});
-        return res.status(200).json(initialItems)
+        return res.status(200).json(initialItems);
     } catch (error) {
-        console.log("error occured : /n",error)
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
     }
-}
+};
 
-const getBagItems = async(req, res) => {
+const getBagItems = async (req, res) => {
     try {
         const bagItems = await Bag_Item.find({});
         return res.status(200).json(bagItems);
     } catch (error) {
-        console.log("error occured : /n",error)
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
     }
-}
+};
 
-const deleteFormBag = async(req, res) => {
+const deleteFromBag = async (req, res) => {
     try {
-        // console.log(req.params)
-        const deletedBagItem = await Bag_Item.findOneAndDelete({_id:req.params.id});
+        const deletedBagItem = await Bag_Item.findOneAndDelete({ _id: req.params.id });
         return res.status(200).json(deletedBagItem);
     } catch (error) {
-        console.log("error occured : /n",error)
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
     }
-}
+};
 
-const updateItem = async(req,res) => {
+const updateItem = async (req, res) => {
     try {
-        // console.log(req.params)
-        const updatedItem = await Item.findOneAndUpdate({_id:req.params.id},req.body,{new:true,runValidators:true});
+        const updatedItem = await Item.findOneAndUpdate({ _id: req.params.id }, req.body, { new: true, runValidators: true });
         return res.status(200).json(updatedItem);
     } catch (error) {
-        console.log("error occured : /n",error)
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
     }
-}
+};
+
+// New search function
+const searchItems = async (req, res) => {
+    const query = req.query.q; // Get the search query from request
+    try{
+        // search for items in the database
+        // const items = await Item.find({
+        //     $or: [
+        //         { item_name: { $regex: query, $options: 'i' } },
+        //         { description: { $regex: query, $options: 'i' } },
+        //     ],
+        // });
+        // console.log("Search results:", items); // Log the search results
+        // res.status(200).json(items);
+        // return everything for now
 
+        const items = await Item.find({});
+        res.status(200).json(items);
+    }
+    catch (error) {
+        console.log("error occurred: /n", error);
+        res.status(500).json({ message: "Internal server error." });
+    }
+};
 
-module.exports = { getInitialItems ,getBagItems,addItems,addToBag,deleteFormBag,updateItem};
+module.exports = {
+    getInitialItems,
+    getBagItems,
+    addItems,
+    addToBag,
+    deleteFromBag,
+    updateItem,
+    searchItems,  // Make sure to include it here
+};