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:

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

Submission Category:

E-Commerce Creation

Link to Code

cp .env.local.example .env.local

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.

export const getProductsByType = async (type) => {    const res = await Product.collection.aggregate([        {          $search: {            index: 'type',            text: {              query: `${type}`,              path: {                'wildcard': '*'              }            }          }        }      ]).limit(20).toArray()      return res;}

1. 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.

export const getProductsByCollection = async (collection) => {    const res = await Product.collection.aggregate([        {          $search: {            index: 'collectionName',            text: {              query: `${collection}`,              path: {                'wildcard': '*'              }            }          }        }      ]).limit(20).toArray()      return res;}

1. 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. 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:

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 "style":

Products Page

Streetz Footwear Products Page:

Individual Product Page

Streetz Footwear Individual Product Page:

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!