↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

microservices-ecommerce

eCommerce JavaScript

Aurapan

Aurapan is the beautiful women’s clothing e-commerce website built with microservices architecture, perform server-side rendering by Next.js, developing on Google Cloud Platform environment, integrated some CI/CD process by running automation test with GitHub Action workflow and deploy on DigitalOcean cluster with let’s encrypt certificate.

Table of contents

Demo

(Back to top)

https://www.aurapan.com

Features

(Back to top)

  • Fully operated microservices-architecture website with user, product, order, payment, and expiration services completely separated
  • Stored all user, product, order, payment data in separated MongoDB collections
  • Login with user authentication secured by encrypting password in JWT and cookie
  • Account setting dashboard for a customer to update profile information or see all orders
  • Admin management dashboard with authority to add, edit, delete a product, user, or order
  • Rich detail of product information and multiple options that you can choose such as color, size
  • Image display in a more fashionable design with Swiper library
  • Full-featured shopping cart (add, edit, remove an item with ease!)
  • Fully checkout process (login, add a shipping address, select payment method)
  • Accept both PayPal and Stripe integration payment method
  • Mark orders as a delivered option for admin
  • Make a product review and rating and calculate new rating instantly
  • Accept coupon promotion
  • Easily navigate with a cool navigation bar and breadcrumb
  • Implement Optimistic concurrency control concept with Mongoose to handle concurrency issue with event flow
  • Optimize Next.js features to maximize better performance and quality in lighthouse report
  • Safely secure HTTPS protocol with let’s encrypt certificate
  • Integrate Google Analytics 4 script and track significant events on the website

Something might be a bit exaggerated but one certain thing is that I put all my ❤️ into creating this project.
happy browsing! 😊

Usage

(Back to top)

How to sign up an account

  1. Browse to the sign up page
  2. Enter your email, password, name, gender and age (can be anything as this is a fictional store)

How to purchase products

Pay with Stripe method (recommended)

  1. Using 4242 4242 4242 4242 for a card number
  2. Using any date (must be later date from now) for MM/YY
  3. Using any number for CVC

Pay with Paypal method

  1. You’ll need a Paypal account
  2. Create Paypal developer account
  3. Choose Paypal payment method and sign in with sandbox account to pay for an order (with fake money!)

How to recieve an order

  1. An order will change to delivered only by an admin
  2. You will never get any real products (even if your order has been marked as delivered) 😛

How to access admin dashboard

  1. Sign in with an admin account
  2. Access via management menu in profile dropdown menu

How to add your favorite product to wishlist

Nope, you can’t do it yet. Aurapan still doesn’t support this feature. 😎

How to perform CRUD operation on the product database (create, update, delete)

You need a permission to access this function as an admin.

Installation

(Back to top)
Running on Google Cloud Platform

  1. clone cloud branch on your computer
  2. install node.js, skaffold, docker, kubectl
  3. sign up free account with $100 on google cloud and sign up docker hub account
  4. create an image by run this command in every sub-folder that has Dockerfile 
docker build -t <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME> .
  1. push all images to docker hub by run this command 
docker push <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME>
  1. create a new project on GCP then enable Kubernetes Engine API and Cloud Build API after successfully enable api services, grant permission for Cloud Build service account permission on Cloud Build API
  2. create a new kubernetes cluster with minimum resource at 3 nodes (recommended), and select any region that closest to your location
  3. install GCP SDK to connect our images to GCP cluster context
  4. open google cloud SDK and log in, initiate with and then choose the correct options to proceed 
gcloud auth login
gcloud init
  1. create kubernetes context in your desktop by run this command (your cluster name from GCP cluster that you created) 
gcloud container clusters get-credentials <YOUR_CLUSTER_NAME>
  1. see list of contexts and then selecting a new context by run these commands 
kubectl config get-contexts
kubectl config use-context <CONTEXT_NAME>
  1. install ingress-nginx and ingress-nginx for GCP
  2. find your load balancing port that GCP automatic generated in Network Services tab in GCP
  3. for windows users; open host file at C:WindowsSystem32driversetchosts, for mac users; open host file at etchosts then edit by adding YOUR_LOAD_BALANCING_PORT YOUR_CUSTOM_URL and save as an admin (ex. 56.125.456.45 custom.com)
  4. config all yaml files to matches your GCP project ID
  5. create all kubernetes secrets
  6. run this command then authenticate GCP account via web browser 
gcloud auth application-default login
  1. make sure to use correct context before run this command at root directory 
skaffold dev
  1. open a web browser enter your custom URL with https:// to see this project come to live!

Running on Docker Desktop

  1. clone dev-mac branch on your computer
  2. install node.js, skaffold, docker
  3. enable kubernetes in docker desktop preferences
  4. create an image by run a command in every folder that has a Dockerfile 
docker build -t <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME> .
  1. push all images to docker hub by run a command in every folder that has a Dockerfile 
docker push <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME>
  1. see list of kubernetes contexts and then selecting a new context by running these commands 
kubectl config get-contexts
kubectl config use-context docker-desktop
  1. install ingress-nginx and enable kubernetes in Docker Desktop software
  2. for windows users; open host file at C:WindowsSystem32driversetchosts, for mac users; open host file at etchosts then edit by adding 127.0.0.1 YOUR_CUSTOM_URL and save as an admin (ex. 127.0.0.1 custom.com)
  3. config all yaml files to matches your custom URL
  4. create all kubernetes secrets
  5. run skaffold dev in this project root directory, make sure to use correct context before run the command
  6. open a web browser enter your custom URL with https:// to see this project come to live!

Setup Kubernetes Secret

(Back to top)
Create all these kubernetes secrets in kubernetes context
MONGO_URI_USER, MONGO_URI_PRODUCT, MONGO_URI_ORDER, MONGO_URI_PAYMENT : MongoDB

kubectl create secret generic mongo-secret 
"--from-literal=MONGO_URI_PRODUCT=<YOUR_MONGO_DB_URI>" 
"--from-literal=MONGO_URI_USER=<YOUR_MONGO_DB_URI>" 
"--from-literal=MONGO_URI_ORDER=<YOUR_MONGO_DB_URI>" 
"--from-literal=MONGO_URI_PAYMENT=<YOUR_MONGO_DB_URI>"

JWT_KEY : –whatever you want–

kubectl create secret generic jwt-secret --from-literal=JWT_KEY=<YOUR SECRET>

STRIPE_KEY : Stripe

kubectl create secret generic stripe-secret --from-literal=STRIPE_KEY=<YOUR_STRIPE_KEY>

PAYPAL_CLIENT_ID : Paypal

kubectl create secret generic paypal-secret --from-literal=PAYPAL_CLIENT_ID=<YOUR_PAYPAL_CLIENT_ID>

Deployment

(Back to top)
Deploy on DigitalOcean

  1. sign up free account with $200 for 60 days trial and create a kubernetes cluster in new project on Digital Ocean
  2. generate new access token from Digital Ocean, install doctl and kubectl, then run 
doctl auth init
  1. connect with Digital Ocean k8s cluster context by running this command and authorize with your credentials 
doctl kubernetes cluster kubeconfig save <YOUR_CLUSTER_NAME>
  1. switch kubernetes context to the new context by running 
kubectl config use-context <CONTEXT_NAME>
  1. create github workflow for build an initial docker image on push event at the main branch and perform automate testing in every services on pull request event trigger with trying to merge with the main branch 
name: deploy-client

on:
  push:
    # watch for pull request into main branch
    branches:
      - main

    # watch for changes in client folder
    paths:
      - "client/**"

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      # build an image
      - run: cd client && docker build -t <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME> .

      # login on docker hub
      - run: docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
        env:
          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}

      # push an image to docker hub
      - run: docker push <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME>
  1. add github action secrets for docker credentials and digitalocean access token key at security setting in repository 
DIGITALOCEAN_ACCESS_TOKEN = 
DOCKER_USERNAME = 
DOCKER_PASSWORD =
  1. edit files in every services then commit code to the main branch for triggering Github Action workflows to build and push all images to your Docker Hub
  2. install ingress-nginx for DigitalOcean
  3. separate k8s folder to k8s-dev and k8s-prod then copy ingress-srv.yaml file to both folders and edit host URL to a new domain name
  4. create github workflow for telling kubernetes cluster to use images we built by adding these lines 
- uses: digitalocean/action-doctl@v2
  with:
    token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
- run: doctl kubernetes cluster kubeconfig save <YOUR_CLUSTER_NAME>
- run: kubectl rollout restart deployment <YOUR_DEPLOYMENT_NAME>
  1. purchase a domain name with a promotion that can be very cheap as $1 for 1st year
  2. config custom domain name nameserver with your domain name registor website by custom add this lines 
ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com
  1. add domain name in digital ocean at networking tab then create new record 
// A record
HOSTNAME: @
WILL DIRECT TO: <YOUR_LOAD_BALANCER>
TTL: 30

// CNAME record
HOSTNAME: www
IN AN ALIAS OF: @
TTL: 30
  1. add your cluster name at deploy-manifests.yaml file then redo step 7. again 
name: deploy-manifests

on:
  push:
    # watch for pull request into main branch
    branches:
      - main

    # watch for changes in infra folder
    paths:
      - "infra/**"

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      # use and cliententicate doctl
      - uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}

      # use and cliententicate doctl
      - run: doctl kubernetes cluster kubeconfig save <YOUR_CLUSTER_NAME>

      # apply deployment yaml files (k8s-prod is for production!)
      - run: kubectl apply -f infra/k8s && kubectl apply -f infra/k8s-prod
  1. change do-loadbalancer-hostname and host at file infra/k8s-prod/ingress-srv.yaml to your domain name
  2. change url in client/api/build-client.js to your domain name
  3. after that we will follow at step 4 of this guide How to Set Up an Nginx Ingress with Cert-Manager on DigitalOcean Kubernetes to make our website ready for HTTPS request with certificate issued by Let’s encrypt
  4. begin with install cert-manager namespace by running command 
kubectl apply -f https://github.com/jetstack/cert-manager/releases/download/v1.7.1/cert-manager.yaml
  1. change your directory to infra/issuer/ there will be 2 files that you need to change email and name of a secret key as you wish then run command 
kubectl create -f staging_issuer.yaml

kubectl create -f production_issuer.yaml
  1. at file infra/k8s-prod/ingress-srv.yaml change cert-manager.io/cluster-issuer to "letsencrypt-staging" then run this command at infra/k8s-prod/ directory 
kubectl apply -f ingress-srv.yaml
  1. then change cert-manager.io/cluster-issuer back to "letsencrypt-prod" and run this command at infra/k8s-prod/ directory 
kubectl apply -f ingress-srv.yaml
  1. waiting around 5-15 minutes for setting up then browse to your website with HTTPS protocal

Disclaimer

(Back to top)
All images are used for educational purposes in this fictional store…



↑