Create account

DEV Community

Adithya Sreyaj

Posted on Jan 12, 2022 • Edited on Jan 14, 2022

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

#atlashackathon #angular #nestjs #mongodb

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/

adisreyaj / wfh

E-commerce app built using Angular, NestJs and MongoDB

The WFH Store

Ecommerce website to buy all you need to setup your home office.

View Demo
·
Report Bug
·
Request Feature

A simple e-commerce application that is built using Angular, NestJS and MongoDB. Built as part of the MongoDB Atlas Hackathon (ref).

Tech Stack

Getting started

The application is a monorepo and so both the front-end and the back-end code are in the same repo.

Clone the repo

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

Install dependencies

npm install

Setup the environment variables required for the API

MONGODB_URI=
AUTH0_AUDIENCE=
AUTH0_ISSUER_URL=
AUTH0_DB=

// Used for setting and internal APIs
INTERNAL_TOKEN=

Run the Front-end

npm start

Run the Back-end

npm start api

Open the URL in the browser

http://localhost:4200

License

Distributed under the Apache 2.0 License. See LICENSE for more information.

Show your support

Please ⭐️ this repository if this project helped you!

View on GitHub

Additional Resources / Info

Screenshots

Here are some screenshots of the pages in the application

Products Page
Product Quick View
Profile
Orders
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:

Public APIs
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