DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for The WFH Store - an eCommerce site for all your WFH Needs | Mongo Atlas Hackathon
Adithya Sreyaj
Adithya Sreyaj

Posted on • Updated on

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

Overview of My Submission

The WFH Store

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.

The WFH Store Home

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.

Tech Stack

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/

GitHub logo adisreyaj / wfh

E-commerce app built using Angular, NestJs and MongoDB


Logo

The WFH Store

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

View Demo Β· Report Bug Β· Request Feature

The WFH Store

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

Tech Stack

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.

  1. Clone the repo
https://github.com/adisreyaj/wfh.git
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies
npm install
Enter fullscreen mode Exit fullscreen mode
  1. 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=
Enter fullscreen mode Exit fullscreen mode
  1. Run the Front-end
npm start
Enter fullscreen mode Exit fullscreen mode
  1. Run the Back-end
npm start api
Enter fullscreen mode Exit fullscreen mode
  1. Open the URL in the browser
http://localhost:4200
Enter fullscreen mode Exit fullscreen mode

License

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

Show your support

Please ⭐️ this repository if this project helped you!

Additional Resources / Info

Screenshots

Here are some screenshots of the pages in the application

  1. Products Page Products Page
  2. Product Quick View Quick View Page
  3. Profile
    Profile Page

  4. Orders
    Orders Page

  5. Cart
    Cart Page

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.

Atlas indexes

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"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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 and autocomplete
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

Top comments (4)

Collapse
lbk2knewlifegithub profile image
lbk2knewlifegithub

Awesome! I also using same your stack.

Collapse
adisreyaj profile image
Adithya Sreyaj Author

Glad to know that πŸ˜€

Collapse
rohitdhas profile image
Rohit Dhas

Loved it man, It's awesomeπŸš€πŸš€πŸš€

Collapse
adisreyaj profile image
Adithya Sreyaj Author

Thanks for the feedback 😊.
Appreciate it.

πŸ‘€ Every week new members join DEV and share a bit about them in our Welcome Thread

Welcome them to DEV and share a bit about yourself.