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.

• Aurapan
• Table of contents
• Demo
• Features
• Usage
• Installation
• Setup Kubernetes Secret
• Deployment
• Disclaimer

(Back to top)

https://www.aurapan.com

(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! 😊

(Back to top)

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)

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!)

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) 😛

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

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

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

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

5. push all images to docker hub by run this command

docker push <YOUR_ACCOUNT_NAME>/<YOUR_IMAGE_NAME>

6. 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
7. create a new kubernetes cluster with minimum resource at 3 nodes (recommended), and select any region that closest to your location
8. install GCP SDK to connect our images to GCP cluster context
9. open google cloud SDK and log in, initiate with and then choose the correct options to proceed

gcloud auth login
gcloud init

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

11. see list of contexts and then selecting a new context by run these commands

kubectl config get-contexts
kubectl config use-context <CONTEXT_NAME>

12. install ingress-nginx and ingress-nginx for GCP
13. find your load balancing port that GCP automatic generated in Network Services tab in GCP
14. for windows users; open host file at C:\Windows\System32\drivers\etc\hosts, for mac users; open host file at \etc\hosts then edit by adding YOUR_LOAD_BALANCING_PORT YOUR_CUSTOM_URL and save as an admin (ex. 56.125.456.45 custom.com)
15. config all yaml files to matches your GCP project ID
16. create all kubernetes secrets
17. run this command then authenticate GCP account via web browser

gcloud auth application-default login

18. make sure to use correct context before run this command at root directory

skaffold dev

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

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

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

7. install ingress-nginx and enable kubernetes in Docker Desktop software
8. for windows users; open host file at C:\Windows\System32\drivers\etc\hosts, for mac users; open host file at \etc\hosts then edit by adding 127.0.0.1 YOUR_CUSTOM_URL and save as an admin (ex. 127.0.0.1 custom.com)
9. config all yaml files to matches your custom URL
10. create all kubernetes secrets
11. run skaffold dev in this project root directory, make sure to use correct context before run the command
12. open a web browser enter your custom URL with https:// to see this project come to live!

(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>

(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

3. connect with Digital Ocean k8s cluster context by running this command and authorize with your credentials

doctl kubernetes cluster kubeconfig save <YOUR_CLUSTER_NAME>

4. switch kubernetes context to the new context by running

kubectl config use-context <CONTEXT_NAME>

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

6. add github action secrets for docker credentials and digitalocean access token key at security setting in repository

DIGITALOCEAN_ACCESS_TOKEN = 
DOCKER_USERNAME = 
DOCKER_PASSWORD = 

7. 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
8. install ingress-nginx for DigitalOcean
9. 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
10. 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>

11. purchase a domain name with a promotion that can be very cheap as $1 for 1st year
12. 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

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

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

15. change do-loadbalancer-hostname and host at file infra/k8s-prod/ingress-srv.yaml to your domain name
16. change url in client/api/build-client.js to your domain name
17. 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
18. 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

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

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

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

22. waiting around 5-15 minutes for setting up then browse to your website with HTTPS protocal

(Back to top)

All images are used for educational purposes in this fictional store 😉