DEV Community

Ernesto
Ernesto

Posted on

MongoDB Submission Post E-commerce web application

Overview of My Submission

I implemented the atlas search features three places in the webpage

Home page

I implemented autocomplete features that will enable users search through the name and description, and added some awesome filters.
Note: for search on all product I used Lorem because all the product description are the same so filtering will be easier since I don't have much saved data

Image description

const () => {
  console.log('The code is lengthy, you might wanna check the code on github๐Ÿ˜œ')
}
Enter fullscreen mode Exit fullscreen mode

Checkout page

Here I implemented geowithin search to search for pickup store within approximately 3miles from the inserted location.

Note: I added the input for longitude and latitude for testing porposes. It was supposed to get the users current location and search for the nearest store. Currently is not getting the users location because I used a free hosting plan and google map don't work on "non secured" site๐Ÿ˜ข and also due to the fact that I don't have many saved location data, I added the input field

Image description

router.get("/searchstore", async (req, res) => {
    try {
        const arr = req.query.loc.split(",");
        const arrofno = arr.map(a => Number(a));

        let result = await Store.aggregate([
            {
                $search: {
                    index: "storeac",
                    geoWithin: {
                        circle: {
                            center: {
                                type: "Point",
                                coordinates: arrofno,
                            },
                            radius: 5000,
                        },
                        path: "address.location",
                    },
                },
            },
        ]);

        res.send(result);
    } catch (e) {
        if (e) {
            console.log(e);
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

Admin Mail page

Here I repeated the atlas autocomplete search features, and added highlighting for easier referencing.

Image description

router.get("/searchmail", async (req, res) => {
    try {
        let result = await Contact.aggregate([
            {
                $search: {
                    index: "contactac",
                    compound: {
                        should: [
                            {
                                autocomplete: {
                                    query: `${req.query.term}`,
                                    path: "username",
                                    fuzzy: {
                                        maxEdits: 2,
                                    },
                                    score: { boost: { value: 3 } },
                                },
                            },
                            {
                                autocomplete: {
                                    query: `${req.query.term}`,
                                    path: "subject",
                                    fuzzy: {
                                        maxEdits: 2,
                                    },
                                    score: { boost: { value: 2 } },
                                },
                            },
                            {
                                autocomplete: {
                                    query: `${req.query.term}`,
                                    path: "email",
                                    fuzzy: {
                                        maxEdits: 2,
                                    },
                                },
                            },
                            {
                                autocomplete: {
                                    query: `${req.query.term}`,
                                    path: "message",
                                    fuzzy: {
                                        maxEdits: 1,
                                    },
                                },
                            },
                        ],
                    },
                    highlight: {
                        path: ["username", "message", "email", "subject"],
                    },
                },
            },
            {
                $addFields: {
                    highlights: { $meta: "searchHighlights" },
                },
            },
        ]);
        res.send(result);
    } catch (e) {
        res.status(500).send({ message: e.message });
    }
});
Enter fullscreen mode Exit fullscreen mode

Submission Category:

  • E-commerce creation

Link to Code

Additional Resources / Info

Top comments (0)