The WFH Store - an eCommerce site for all your WFH Needs | Mongo Atlas Hackathon

Overview of My Submission

The WFH Store is a one-stop destination for all your Work From Home needs. If you are someone in the Software industry and want to get a proper WFH setup, The WFH Store is the right place to shop for chairs, desks, monitors, keyboards, and many more.

With powerful search and filtering, you'll find it easy to find just the thing you are looking for.

Tech Stack

The whole application is written in TypeScript and is a mono-repo managed by Nx. The front-end is powered by Angular and the back-end is using NestJs. The main highlight of the project itself is the filtering and search functionality powered by Mongo Atlas Search.

Authentication is powered by Auth0.
UI is built from scratch without using any component library, all using TailwindCSS.

Search and Filtering

The most important feature of any e-commerce website is its search and filtering capabilities. Its' the first time using Mongo Atlas search for doing full text search. To my surprise it was just great.

The important thing here to note is the effort needed for setting up a full text search with Atlas was not that daunting as I thought it would be.

Knowledge on Mongo aggregation pipeline definitely helped me. The project make use of multiple search operators provided by Atlas search like autocomplete, text, equals etc.

Search also works on the Orders page where the user could search for products and the associated order will be filtered out.

Submission Category:

E-Commerce Creation

Link to Code

Demo: http://wfh-store.adi.so/

https://github.com/adisreyaj/wfh.git

npm install

MONGODB_URI=
AUTH0_AUDIENCE=
AUTH0_ISSUER_URL=
AUTH0_DB=

// Used for setting and internal APIs
INTERNAL_TOKEN=

npm start

npm start api

http://localhost:4200

Additional Resources / Info

Screenshots

Here are some screenshots of the pages in the application

1. Products Page
2. Product Quick View

3. Profile
   

4. Orders
   

5. Cart
   

Here are some additional information for the curios bunch :)

Search and Filtering

There are different indexes created in Atlas for entities like Products, Brands, Categories and Orders.

Different kinds of mappings are used on each entity. For example in Products, there are the field mappings:

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "brand": {
        "type": "objectId"
      },
      "category": {
        "type": "objectId"
      },
      "colors": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "name": [
        {
          "type": "string"
        },
        {
          "minGrams": 3,
          "type": "autocomplete"
        }
      ],
      "price": {
        "type": "number"
      }
    }
  }
}

This allows us to search based in product name and description. And also filter based on price, brand, category etc.

Filtering is also powered by the search pipeline as using $match() after $search() can have perf issues as mentioned by the documentation.

Filtering in action

Filters are no brainer for any e-commerce website. In the WFH Store app, users can filters Categories, Brands, Price Range and Colors.

All the filters selections are synced with the URL so that you can share the link with your friends and they'll see the same filters applied.

Here's the code the does the filtering and search magic for products: api-product.service.ts

Search and Autocomplete in action:

Search comes with autocomplete that gives you recommendations even before you finish typing. It can point you towards a product or maybe a brand or category that you are looking for.

Automcomplete is again powered by atlas and it uses the autocomplete operator (ref).

Here's how autocomplete works for the products entity: api-product.service.ts

APIs and Authentication

There are two different APIs for the project:

1. Public APIs
2. Authenticated APIs

The APIs for fetching the products, categories, brands etc are public and users can browse through the application without having to login.

For APIs like cart and orders, it requires the user to be logged into the application.

Users can login with their google account and start placing orders.

Mongoose Discriminators

Another interesting new thing that I got a chance to work on is Mongoose Discriminators. Mongoose is used as the connector to talk to MongoDB and it has an interesting feature which allows you to use different schemas in the same collection.

Ref usage in code: api-product.module.ts

Hosting of apps

Front-end is hosted on Vercel. The process is pretty straight forward as you can just push code and see it live.

For the back-end, Github action workflow is used to create a build of the api, which is then compressed and send over to an Ubuntu instance.

Where you able to spot the idea behind the logo? Its a table and a chair btw (I'm not a very good designer btw :))

Please do share your thoughts and comments below. Also don't forget to raise an issue if you find a bug. Thanks <3