MongoDB Atlas Hackathon:  S/F E-Commerce Creation
Tags: atlashackathon
Published: 2022-01-14 07:36:44

# Introduction

Building an E-Commerce platform has never been easier with MongoDB's Atlas Search. You can create custom indexes on your products, get lightning fast results on searches within your database, and use a wide range of popular features, like autocomplete. 

@irenewuu and @ryancoll present...

Streetz Footwear:
![Streetz Footwear Homepage:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wi21hp8yhlj9tpigpjp5.png)

## Overview of My Submission 

Streetz Footwear is a responsive e-commerce website built with Next.js, React.js, Mongoose, and MongoDB Atlas Search.
Visit the web-app: [Streetz Footwear](https://streetzfootwear.vercel.app/)


## Submission Category: 

E-Commerce Creation


## Link to Code

{% github https://github.com/RyanColl/E-Commerce-MongoDB-Hackathon-2022 %}

## Additional Resources / Info

### Atlas Search 

#### Indexes

Three Indexes were set up (the maximum for a free cluster) for different purposes for this app.

1. The first index searches our database for a single element of a collection: type.
The type being passed as a parameter is either 'mens', or 'womens', and the database is searched accordingly.
```js
export const getProductsByType = async (type) => {
    const res = await Product.collection.aggregate([
        {
          $search: {
            index: 'type',
            text: {
              query: `${type}`,
              path: {
                'wildcard': '*'
              }
            }
          }
        }
      ]).limit(20).toArray()
      return res;
}
```

2. The second index searches our database for a single element of a collection: collectionName.
The collection being passed as a parameter is either 'sport', 'luxury', or 'collectors', and the database is searched accordingly.
```js
export const getProductsByCollection = async (collection) => {
    const res = await Product.collection.aggregate([
        {
          $search: {
            index: 'collectionName',
            text: {
              query: `${collection}`,
              path: {
                'wildcard': '*'
              }
            }
          }
        }
      ]).limit(20).toArray()
      return res;
}
```

3. The third index setup for this app is the most powerful and one I would like to show off for purposes of the hackathon. This index is setup using MongoDB's Atlas Search's [AutoComplete](https://docs.atlas.mongodb.com/atlas-search/autocomplete/). Autocomplete allows us to take a complete index of our database, and search through a specific field for products that match the spelling of a word. We can even apply a fuzzy filter, so when users misspell our product names, MongoDB still knows what they mean. The index is as follows:

```js
export const atlasSearch = async (searchText) => {
    const res = await Product.collection.aggregate([
        {
            $search: {
              index: 'autocomplete', 
              autocomplete: {
                query: `${searchText}`,
                path: 'description',
                fuzzy: {
                    maxEdits: 2,
                    prefixLength: 3
                },
              }
            }
          }
    ]).limit(50).toArray()
    return res;
}
```

The name of this index is autocomplete, and the path we are looking through is the description of the products. We could look through names/titles if we had simpler products like groceries, but with shoe descriptions, Atlas Search uses score based returns to order the products from the query based on their score. Using a simple dropdown, I have placed the products underneath the search bar in a scrollable menu.

#### Autocomplete Preview

 Autocomplete for "comfort":
![Autocomplete for "comfort":](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vez7kma86llwyofptsdh.png)

 Autocomplete for "style":
![Autocomplete for "style":](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb1fn32efheq9bw1p7kg.png)

#### Products Page 
Streetz Footwear Products Page:
![Streetz Footwear Products Page:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/214wbsa81d3mgj1iynrf.png)

#### Individual Product Page 
Streetz Footwear Individual Product Page:
![Streetz Footwear Individual Product Page:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an6tsq7dobdgtodwinl6.png)

#### Collaborators
@irenewuu 
UX/UI DESIGNER & FRONT END DEV 🎨💻

@ryancoll 
FULL STACK WEB DEV 🥞💻


#### Tech Stack 🛠💻
* Next.js
* React.js
* SCSS
* Mongoose
* MongoDB Atlas Search

Thanks to @mongodb_staff for this opportunity!