MongoDB Submission Post E-commerce web application
Tags: atlashackathon
Published: 2022-01-12 19:42:55

> 
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oufe6893uely0wgfdq2o.gif)

```js
const () => {
  console.log('The code is lengthy, you might wanna check the code on github😜')
}
```

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqp68ig8smzzd4r7gnew.gif)

```js
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);
		}
	}
});
```

### Admin Mail page

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqm84hcbd9m9mc1ewtec.gif)

```js
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 });
	}
});
```


### Submission Category: 

- E-commerce creation

### Link to Code

- Github URL: [E-commerce](https://github.com/Ernest2026/E-commerce)
- Live Site URL: [E-commerce](http://mdbh.herokuapp.com)

### Additional Resources / Info

- Product database json file: [Products](https://github.com/Ernest2026/E-commerce/blob/main/db/products.json)
- Checkout database json file: [Checkout](https://github.com/Ernest2026/E-commerce/blob/main/db/store.json)
- Mail database json file: [Mail](https://github.com/Ernest2026/E-commerce/blob/main/db/contacts.json)
- Learn more: [Readme.md](https://github.com/Ernest2026/E-commerce)