Devops Kubenetes Task Completed

backend/server/.babelrc

+{
+    "presets":["@babel/preset-env"],
+    "plugins": [
+        [
+            "@babel/plugin-transform-runtime",
+            {"regenerator":true}
+        ]
+    ]
+}
\ No newline at end of file

backend/server/Dockerfile

+FROM node:12-alpine
+
+WORKDIR /app
+
+EXPOSE 8000
+
+COPY . .
+
+RUN npm install
+CMD npm run dev

backend/server/package.json

+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npx nodemon --exec npx babel-node src/server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/runtime": "^7.12.5",
+    "axios": "^0.21.0",
+    "body-parser": "^1.19.0",
+    "express": "^4.17.1",
+    "mongoose": "^5.10.14"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/node": "^7.12.6",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "nodemon": "^2.0.6"
+  }
+}

backend/server/src/server.js

+import bodyParser from "body-parser";
+import express from "express";
+import { MongoClient } from "mongodb";
+import path from "path";
+
+const app = express();
+app.use(bodyParser.json());
+
+app.use("/images", express.static(path.join(__dirname, "../assets")));
+
+//mongodb+srv://admin:admin@cluster0.31fma.mongodb.net/vuemongodb?retryWrites=true&w=majority
+
+app.get("/api/products", async (req, res) => {
+  const client = await MongoClient.connect(
+    "mongodb+srv://admin:admin@cluster0.31fma.mongodb.net/vuemongodb?retryWrites=true&w=majority",
+    {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    }
+  );
+  const db = client.db("vuedb");
+  const products = await db.collection("products").find({}).toArray();
+  res.status(200).json(products);
+  client.close();
+});
+
+app.get("/api/users/:userId/cart", async (req, res) => {
+  const { userId } = req.params;
+  const client = await MongoClient.connect(
+    "mongodb+srv://admin:admin@cluster0.31fma.mongodb.net/vuemongodb?retryWrites=true&w=majority",
+    {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    }
+  );
+  const db = client.db("vuedb");
+  const user = await db.collection("users").findOne({ id: parseInt(userId) });
+  if (!user) return res.status(404).json("Could not find user!");
+  const cartItems = user.cartItems;
+  res.status(200).json({ cartItems });
+  client.close();
+});
+
+app.get("/api/products/:productId", async (req, res) => {
+  const { productId } = req.params;
+  const client = await MongoClient.connect(
+    "mongodb+srv://admin:admin@cluster0.31fma.mongodb.net/vuemongodb?retryWrites=true&w=majority",
+    {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    }
+  );
+  const db = client.db("vuedb");
+  const product = await db
+    .collection("products")
+    .find({ id: parseInt(productId) })
+    .toArray();
+
+  if (product) {
+    res.status(200).json(product);
+  } else {
+    res.status(404).json("Could not find the product!");
+  }
+  client.close();
+});
+
+app.post("/api/users/:userId/cart", async (req, res) => {
+  const { product } = req.body;
+  const { userId } = req.params;
+  const client = await MongoClient.connect(
+    "mongodb+srv://admin:admin@cluster0.31fma.mongodb.net/vuemongodb?retryWrites=true&w=majority",
+    {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    }
+  );
+  const db = client.db("vuedb");
+
+  await db
+    .collection("users")
+    .updateOne({ id: parseInt(userId) }, { $addToSet: { cartItems: product } });
+  const user = await db.collection("users").findOne({ id: parseInt(userId) });
+  const cartItemsId = user.cartItems;
+  res.status(200).json({ cartItemsId });
+  client.close();
+});
+
+app.delete("/api/users/:userId/cart/:productId", async (req, res) => {
+  const { productId, userId } = req.params;
+  const { product } = req.body;
+  const client = await MongoClient.connect(
+    "mongodb+srv://admin:admin@cluster0.31fma.mongodb.net/vuemongodb?retryWrites=true&w=majority",
+    {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    }
+  );
+  const db = client.db("vuedb");
+  // await db.collection("users").updateOne({
+  //   $pull: { cartItems: productId },
+  // });
+  const user = await db.collection("users").findOne({ id: parseInt(userId) });
+  let updatedCartItem = user.cartItems.filter(
+    (item) => item.id !== parseInt(productId)
+  );
+  console.log(">>>>>", updatedCartItem);
+  //  updatedCartItem = { id: parseInt(userId), cartItems: updatedCartItem };
+  await db
+    .collection("users")
+    .updateOne(
+      { id: parseInt(userId) },
+      { $set: { cartItems: updatedCartItem } }
+    );
+  //await db.collection("users").findOneAndDelete({ id: parseInt(productId) });
+  const user1 = await db.collection("users").findOne({ id: parseInt(userId) });
+  res.status(200).json(user1.cartItems);
+});
+
+app.listen(8000, () => {
+  console.log("Server is listening on port 8000");
+});

charts/backend-chart/.helmignore

+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

charts/backend-chart/Chart.yaml

+apiVersion: v2
+name: backend-chart
+description: A Helm chart for Kubernetes
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.1.0
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+appVersion: 1.16.0

charts/backend-chart/templates/NOTES.txt

+1. Get the application URL by running these commands:
+{{- if .Values.ingress.enabled }}
+{{- range $host := .Values.ingress.hosts }}
+  {{- range .paths }}
+  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ . }}
+  {{- end }}
+{{- end }}
+{{- else if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "backend-chart.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "backend-chart.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "backend-chart.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "backend-chart.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}

charts/backend-chart/templates/_helpers.tpl

+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "backend-chart.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "backend-chart.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "backend-chart.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "backend-chart.labels" -}}
+helm.sh/chart: {{ include "backend-chart.chart" . }}
+{{ include "backend-chart.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "backend-chart.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "backend-chart.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "backend-chart.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "backend-chart.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}

charts/backend-chart/templates/deployment.yaml

+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "backend-chart.fullname" . }}
+  labels:
+    {{- include "backend-chart.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "backend-chart.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "backend-chart.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "backend-chart.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: 8000
+              protocol: TCP
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          dnsPolicy: Default
+          
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

charts/backend-chart/templates/service.yaml

+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "backend-chart.fullname" . }}
+  labels:
+    {{- include "backend-chart.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: 8000
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "backend-chart.selectorLabels" . | nindent 4 }}
+

charts/backend-chart/templates/serviceaccount.yaml

+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "backend-chart.serviceAccountName" . }}
+  labels:
+    {{- include "backend-chart.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end }}

charts/backend-chart/templates/tests/test-connection.yaml

+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "backend-chart.fullname" . }}-test-connection"
+  labels:
+    {{- include "backend-chart.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "backend-chart.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never

charts/backend-chart/values.yaml

+# Default values for backend-chart.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+replicaCount: 1
+
+image:
+  repository: arsalan1212/serverimage
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: "first"
+
+imagePullSecrets: []
+nameOverride: ""
+fullnameOverride: ""
+
+serviceAccount:
+  # Specifies whether a service account should be created
+  create: true
+  # Annotations to add to the service account
+  annotations: {}
+  # The name of the service account to use.
+  # If not set and create is true, a name is generated using the fullname template
+  name: ""
+
+podAnnotations: {}
+
+podSecurityContext: {}
+  # fsGroup: 2000
+
+securityContext: {}
+  # capabilities:
+  #   drop:
+  #   - ALL
+  # readOnlyRootFilesystem: true
+  # runAsNonRoot: true
+  # runAsUser: 1000
+
+service:
+  type: LoadBalancer
+  port: 8000
+
+ingress:
+  enabled: false
+  annotations: {}
+    # kubernetes.io/ingress.class: nginx
+    # kubernetes.io/tls-acme: "true"
+  hosts:
+    - host: chart-example.local
+      paths: []
+  tls: []
+  #  - secretName: chart-example-tls
+  #    hosts:
+  #      - chart-example.local
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 100
+  targetCPUUtilizationPercentage: 80
+  # targetMemoryUtilizationPercentage: 80
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}

charts/frontend-chart/.helmignore

+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

charts/frontend-chart/Chart.yaml

+apiVersion: v2
+name: frontend-chart
+description: A Helm chart for Kubernetes
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.1.0
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+appVersion: 1.16.0

charts/frontend-chart/templates/NOTES.txt

+1. Get the application URL by running these commands:
+{{- if .Values.ingress.enabled }}
+{{- range $host := .Values.ingress.hosts }}
+  {{- range .paths }}
+  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ . }}
+  {{- end }}
+{{- end }}
+{{- else if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "frontend-chart.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "frontend-chart.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "frontend-chart.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "frontend-chart.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}

charts/frontend-chart/templates/_helpers.tpl

+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "frontend-chart.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "frontend-chart.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "frontend-chart.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "frontend-chart.labels" -}}
+helm.sh/chart: {{ include "frontend-chart.chart" . }}
+{{ include "frontend-chart.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "frontend-chart.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "frontend-chart.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "frontend-chart.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "frontend-chart.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}

charts/frontend-chart/templates/deployment.yaml

+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "frontend-chart.fullname" . }}
+  labels:
+    {{- include "frontend-chart.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "frontend-chart.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "frontend-chart.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "frontend-chart.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: 8080
+              protocol: TCP
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

charts/frontend-chart/templates/hpa.yaml

+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v2beta1
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ include "frontend-chart.fullname" . }}
+  labels:
+    {{- include "frontend-chart.labels" . | nindent 4 }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ include "frontend-chart.fullname" . }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  metrics:
+    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: cpu
+        targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+    {{- end }}
+    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: memory
+        targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    {{- end }}
+{{- end }}

charts/frontend-chart/templates/ingress.yaml

+{{- if .Values.ingress.enabled -}}
+{{- $fullName := include "frontend-chart.fullname" . -}}
+{{- $svcPort := .Values.service.port -}}
+{{- if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1beta1
+{{- else -}}
+apiVersion: extensions/v1beta1
+{{- end }}
+kind: Ingress
+metadata:
+  name: {{ $fullName }}
+  labels:
+    {{- include "frontend-chart.labels" . | nindent 4 }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if .Values.ingress.tls }}
+  tls:
+    {{- range .Values.ingress.tls }}
+    - hosts:
+        {{- range .hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ .secretName }}
+    {{- end }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host | quote }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ . }}
+            backend:
+              serviceName: {{ $fullName }}
+              servicePort: {{ $svcPort }}
+          {{- end }}
+    {{- end }}
+  {{- end }}

charts/frontend-chart/templates/service.yaml

+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "frontend-chart.fullname" . }}
+  labels:
+    {{- include "frontend-chart.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: 80
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "frontend-chart.selectorLabels" . | nindent 4 }}

charts/frontend-chart/templates/serviceaccount.yaml

+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "frontend-chart.serviceAccountName" . }}
+  labels:
+    {{- include "frontend-chart.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end }}

charts/frontend-chart/templates/tests/test-connection.yaml

+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "frontend-chart.fullname" . }}-test-connection"
+  labels:
+    {{- include "frontend-chart.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "frontend-chart.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never

charts/frontend-chart/values.yaml

+# Default values for frontend-chart.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+replicaCount: 1
+
+image:
+  repository: arsalan1212/client
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: "3.0"
+
+imagePullSecrets: []
+nameOverride: ""
+fullnameOverride: ""
+
+serviceAccount:
+  # Specifies whether a service account should be created
+  create: true
+  # Annotations to add to the service account
+  annotations: {}
+  # The name of the service account to use.
+  # If not set and create is true, a name is generated using the fullname template
+  name: ""
+
+podAnnotations: {}
+
+podSecurityContext: {}
+  # fsGroup: 2000
+
+securityContext: {}
+  # capabilities:
+  #   drop:
+  #   - ALL
+  # readOnlyRootFilesystem: true
+  # runAsNonRoot: true
+  # runAsUser: 1000
+
+service:
+  type: LoadBalancer
+  port: 8080
+
+ingress:
+  enabled: false
+  annotations: {}
+    # kubernetes.io/ingress.class: nginx
+    # kubernetes.io/tls-acme: "true"
+  hosts:
+    - host: chart-example.local
+      paths: []
+  tls: []
+  #  - secretName: chart-example-tls
+  #    hosts:
+  #      - chart-example.local
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 100
+  targetCPUUtilizationPercentage: 80
+  # targetMemoryUtilizationPercentage: 80
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}

frontend/client/Dockerfile

+FROM node:12-alpine
+
+WORKDIR /app
+
+EXPOSE 8080
+
+COPY . .
+
+RUN npm install
+CMD npm run serve 

frontend/client/babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

frontend/client/package.json

+{
+  "name": "front-end-practice",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.21.0",
+    "core-js": "^3.6.5",
+    "mongodb": "^3.6.3",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.8",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

frontend/client/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We are very very verty sorry bro re're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+
+</html>

frontend/client/src/App.vue

+<template>
+  <div id="app">
+    <NavBar />
+    <router-view />
+  </div>
+</template>
+
+<script>
+import NavBar from "./components/NavBar.vue";
+export default {
+  name: "App",
+  components: {
+    NavBar,
+  },
+};
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+  font-family: Arial;
+}
+#page-wrap {
+  margin: auto;
+  max-width: 800px;
+}
+button {
+  background-color: black;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  outline: 0;
+  padding: 16px;
+}
+</style>

frontend/client/src/components/NavBar.vue

+<template>
+  <div id="nav-bar">
+    <router-link to="/product" id="products-link">
+      <h1>FABULOUS FOOTWEAR</h1>
+    </router-link>
+    <router-link to="/cart" id="cart-link">
+      <button>Shopping Cart</button>
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NavBar",
+};
+</script>
+
+<style scoped>
+#nav-bar {
+  border-bottom: 1px solid #ddd;
+  height: 75px;
+  width: 100%;
+}
+
+#products-link {
+  text-align: center;
+  display: block;
+  color: black;
+  font-size: 22px;
+  left: 32px;
+  position: absolute;
+  top: 16px;
+  text-decoration: none;
+}
+
+#products-link h1 {
+  margin: 0;
+}
+
+#cart-link {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+</style>

frontend/client/src/components/ProductGrid.vue

+<template>
+  <div class="grid-wrap">
+    <ProductGridItem
+        v-for="product in products"
+        :key="product.id"
+        :product="product" />
+  </div>
+</template>
+
+<script>
+import ProductGridItem from './ProductGridItem.vue';
+
+export default {
+    name: 'ProductsGrid',
+    props: ['products'],
+    components: {
+        ProductGridItem,
+    },
+}
+</script>
+
+<style scoped>
+  .grid-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 16px;
+  }
+</style>
\ No newline at end of file

frontend/client/src/components/ProductGridItem.vue

+<template>
+    <div class="product-item">
+        <img v-bind:src="product.imageUrl" />
+        <h3 class="product-name">{{ product.name }}</h3>
+        <p class="product-price">${{ product.price }}</p>
+        <router-link v-bind:to="'/product/' + product.id">
+            <button>View Details</button>
+        </router-link>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ProductGridItem',
+    props: ['product'],
+}
+</script>
+
+<style scoped>
+.product-item {
+    align-items: center;
+    border-radius: 8px;
+    box-shadow: 0px 2px 5px #888;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2%;
+    padding: 20px;
+    position: relative;
+    width: 32%;
+  }
+
+  .product-name {
+    margin-bottom: 0;
+  }
+
+  img {
+    height: 200px;
+    width: 200px;
+  }
+
+  a {
+    width: 100%;
+  }
+
+  button {
+    width: 100%;
+  }
+</style>
\ No newline at end of file

frontend/client/src/components/ProductList.vue

+<template>
+  <div v-if="products.length > 0">
+    <ProductListItem
+      v-for="product in products"
+      v-on:remove-from-cart="$emit('remove-from-cart', $event)"
+      :key="product.id"
+      :product="product"
+    />
+  </div>
+  <p v-else>You haven't added anything to your cart yet!</p>
+</template>
+
+<script>
+import ProductListItem from "./ProductListItem.vue";
+
+export default {
+  name: "ProductList",
+  props: ["products"],
+  components: {
+    ProductListItem,
+  },
+};
+</script>
\ No newline at end of file

frontend/client/src/components/ProductListItem.vue

+<template>
+  <div class="product-container">
+    <img class="product-image" :src="product.imageUrl" />
+    <div class="details-wrap">
+      <h3>{{ product.name }}</h3>
+      <p>${{ product.price }}</p>
+    </div>
+    <button
+      class="remove-button"
+      v-on:click="$emit('remove-from-cart', product.id)"
+    >
+      Remove From Cart
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductListItem",
+  props: ["product"],
+};
+</script>
+
+<style scoped>
+.product-container {
+  align-content: "center";
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  padding: 16px;
+  width: 100%;
+}
+
+.product-image {
+  flex: 1;
+  height: 100px;
+  max-width: 100px;
+}
+
+.details-wrap {
+  padding: 0 16px;
+  flex: 3;
+}
+
+.remove-button {
+  flex: 1;
+  margin: auto;
+}
+</style>
\ No newline at end of file

frontend/client/src/fake-data.js

+import img1 from "./assets/img1.jpg";
+import img2 from "./assets/img2.jpg";
+import img3 from "./assets/img3.jpg";
+import img4 from "./assets/img4.jpg";
+import img5 from "./assets/img5.jpg";
+import img6 from "./assets/img6.jpg";
+import img7 from "./assets/img7.jpg";
+import img8 from "./assets/img8.jpg";
+import img9 from "./assets/img9.jpg";
+import img10 from "./assets/img10.jpg";
+
+export const products = [
+  {
+    id: "123",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img1,
+    averageRating: "5.0",
+  },
+  {
+    id: "124",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img2,
+    averageRating: "5.0",
+  },
+  {
+    id: "125",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img3,
+    averageRating: "5.0",
+  },
+  {
+    id: "126",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img4,
+    averageRating: "5.0",
+  },
+  {
+    id: "127",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img5,
+    averageRating: "5.0",
+  },
+  {
+    id: "128",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img6,
+    averageRating: "5.0",
+  },
+  {
+    id: "129",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img7,
+    averageRating: "5.0",
+  },
+  {
+    id: "131",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img8,
+    averageRating: "5.0",
+  },
+  {
+    id: "132",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img9,
+    averageRating: "5.0",
+  },
+  {
+    id: "133",
+    name: "Example Shoes",
+    price: "70.00",
+    description:
+      "  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis tenetur aperiam tempore adipisci earum iusto quidem ullam provident vel illum. Dolorum, iure cum. Quasi, eum praesentium laboriosam blanditiis officia accusamus.",
+    imageUrl: img10,
+    averageRating: "5.0",
+  },
+];
+
+export const cartItems = [products[0], products[1], products[2]];

frontend/client/src/main.js

+import Vue from "vue";
+import App from "./App.vue";
+import router from './router'
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  render: (h) => h(App)
+}).$mount("#app");

frontend/client/src/router/index.js

+import Vue from "vue";
+import VueRouter from "vue-router";
+import CartPage from "../views/CartPage.vue";
+import ProductDetail from "../views/ProductDetail.vue";
+import Product from "../views/Product.vue";
+import NotFoundPage from "../views/NotFoundPage.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/product",
+    name: "Product",
+    component: Product,
+  },
+  {
+    path: "/product/:id",
+    name: "ProductDetail",
+    component: ProductDetail,
+  },
+  {
+    path: "/cart",
+    name: "Cart",
+    component: CartPage,
+  },
+  {
+    path: "/",
+    redirect: "/product",
+  },
+  {
+    path: "*",
+    component: NotFoundPage,
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;

frontend/client/src/views/CartPage.vue

+<template>
+  <div id="page-wrap">
+    <h1>Shopping Card</h1>
+    <ProductList
+      :products="cartItems"
+      v-on:remove-from-cart="removeFromCart($event)"
+    />
+    <h3 id="total-price">Total: ${{ totalPrice }}</h3>
+    <button id="checkout-button">Proceed to Checkout</button>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import ProductList from "../components/ProductList.vue";
+export default {
+  name: "CartPage",
+  components: {
+    ProductList,
+  },
+  data() {
+    return {
+      cartItems: [],
+    };
+  },
+
+  computed: {
+    totalPrice() {
+      return this.cartItems.reduce((sum, item) => sum + Number(item.price), 0);
+    },
+  },
+  methods: {
+    async removeFromCart(productId) {
+      const result = await axios.delete(`/api/users/12345/cart/${productId}`);
+      console.log(result.data);
+      this.cartItems = result.data;
+    },
+  },
+  async created() {
+    const result = await axios.get("/api/users/12345/cart");
+    this.cartItems = result.data.cartItems;
+  },
+};
+</script>
+
+<style scoped>
+h1 {
+  border-bottom: 1px solid black;
+  margin: 0;
+  margin-top: 16px;
+  padding: 16px;
+}
+
+#total-price {
+  padding: 16px;
+  text-align: right;
+}
+
+#checkout-button {
+  width: 100%;
+}
+
+.product-container {
+  align-content: "center";
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  padding: 16px;
+  width: 100%;
+}
+
+.product-image {
+  flex: 1;
+  height: 100px;
+  max-width: 100px;
+}
+
+.details-wrap {
+  padding: 0 16px;
+  flex: 3;
+}
+
+.remove-button {
+  flex: 1;
+  margin: auto;
+}
+</style>

frontend/client/src/views/NotFoundPage.vue

+<template>
+  <h1>404: Page Not Found</h1>
+</template>
+
+<script>
+export default {
+  name: "NotFoundPage",
+};
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+}
+</style>

frontend/client/src/views/Product.vue

+<template>
+  <div id="page-wrap">
+    <ProductGrid :products="products" />
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import ProductGrid from "../components/ProductGrid.vue";
+
+export default {
+  name: "ProductPage",
+  components: {
+    ProductGrid,
+  },
+  data() {
+    return {
+      products: [],
+    };
+  },
+
+  async created() {
+    const result = await axios.get("/api/products");
+    this.products = result.data;
+  },
+};
+</script>
\ No newline at end of file

frontend/client/src/views/ProductDetail.vue

+<template>
+  <div id="page-wrap" v-if="product">
+    <div id="img-wrap">
+      <img v-bind:src="product.imageUrl" />
+    </div>
+    <div id="product-details">
+      <h1>{{ product.name }}</h1>
+      <h3 id="price">${{ product.price }}</h3>
+      <p>Average rating: {{ product.averageRating }}</p>
+      <button
+        id="add-to-cart"
+        v-if="!itemIsInCart && !showSuccessMessage"
+        v-on:click="addToCart"
+      >
+        Add to Cart
+      </button>
+      <button
+        id="add-to-cart"
+        class="green-button"
+        v-if="!itemIsInCart && showSuccessMessage"
+      >
+        Successfully added item to cart!
+      </button>
+      <button id="add-to-cart" class="gray-button" v-if="itemIsInCart">
+        Item Already in Cart!
+      </button>
+      <h4>Description</h4>
+      <p>{{ product.description }}</p>
+    </div>
+  </div>
+  <NotFoundPage v-else />
+</template>
+
+<script>
+import axios from "axios";
+import NotFoundPage from "./NotFoundPage";
+export default {
+  name: "ProductDetailPage",
+  component: { NotFoundPage },
+  data() {
+    return {
+      product: {},
+      cartItems: [],
+      showSuccessMessage: false,
+    };
+  },
+  async created() {
+    const result = await axios.get(`/api/products/${this.$route.params.id}`);
+    this.product = result.data[0];
+
+    const cartData = await axios.get(`/api/users/12345/cart`);
+    console.log(cartData.data.cartItems);
+    this.cartItems = cartData.data.cartItems;
+  },
+
+  computed: {
+    itemIsInCart() {
+      return this.cartItems.some((item) => item.id === this.product.id);
+    },
+  },
+  methods: {
+    async addToCart() {
+      await axios.post(`/api/users/12345/cart`, { product: this.product });
+      this.showSuccessMessage = true;
+      setTimeout(() => {
+        this.$router.push("/product");
+      }, 1500);
+    },
+  },
+};
+</script>
+
+<style scoped>
+#page-wrap {
+  margin-top: 16px;
+  padding: 16px;
+  max-width: 600px;
+}
+
+#img-wrap {
+  text-align: center;
+}
+
+img {
+  width: 400px;
+}
+
+#product-details {
+  padding: 16px;
+  position: relative;
+}
+
+#add-to-cart {
+  width: 100%;
+}
+
+#price {
+  position: absolute;
+  top: 24px;
+  right: 16px;
+}
+.green-button {
+  background-color: green;
+}
+.gray-button {
+  background-color: gray;
+}
+</style>

frontend/client/vue.config.js

+module.exports = {
+  devServer: {
+    proxy:"http://34.71.185.58:8000",
+  },
+};