From 7eac5a5bfb1334b79ad93905ea82690bcf3686a2 Mon Sep 17 00:00:00 2001
From: Le Nguyen Quang Minh <101281380+lnqminh3003@users.noreply.github.com>
Date: Mon, 26 Jan 2026 13:29:18 -0700
Subject: [PATCH] Add CI and CD pipeline for frontend

---
 .github/workflows/cd-frontend.yml | 55 +++++++++++++++++++++++++++++++
 .github/workflows/ci-frontend.yml | 47 ++++++++++++++++++++++++++
 shatter-web/.gitignore            |  1 +
 3 files changed, 103 insertions(+)
 create mode 100644 .github/workflows/cd-frontend.yml
 create mode 100644 .github/workflows/ci-frontend.yml

diff --git a/.github/workflows/cd-frontend.yml b/.github/workflows/cd-frontend.yml
new file mode 100644
index 0000000..a899517
--- /dev/null
+++ b/.github/workflows/cd-frontend.yml
@@ -0,0 +1,55 @@
+name: CD - Deploy Frontend
+
+on:
+  workflow_dispatch:
+    inputs:
+      build_number:
+        description: "Frontend build version to deploy"
+        required: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Download artifact from CI workflow
+        env:
+          GH_TOKEN: ${{ secrets.PAT_TOKEN }}
+        run: |
+          echo "Fetching frontend artifact for build #${{ github.event.inputs.build_number }}"
+          CI_RUN_ID=$(gh run list \
+            --workflow "CI - Build Frontend" \
+            --json databaseId,number \
+            -q ".[] | select(.number == ${{ github.event.inputs.build_number }}) | .databaseId")
+          if [ -z "$CI_RUN_ID" ]; then
+            echo "Could not find CI run with build number: ${{ github.event.inputs.build_number }}"
+            exit 1
+          fi
+          echo "Found CI run ID: $CI_RUN_ID"
+          gh run download $CI_RUN_ID --name frontend-source-${{ github.event.inputs.build_number }}
+
+      - name: Extract artifact
+        run: |
+          tar -xzf frontend-source-${{ github.event.inputs.build_number }}.tar.gz
+          ls -la
+
+      - name: Setup Node.js & Vercel CLI
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm install -g vercel
+
+      - name: Deploy frontend to Vercel
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID_FRONTEND }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_FRONTEND }}
+        run: |
+          cd frontend  # deploy from frontend folder
+          vercel --prod \
+            --token=$VERCEL_TOKEN \
+            --scope=$VERCEL_ORG_ID_FRONTEND \
+            --confirm
diff --git a/.github/workflows/ci-frontend.yml b/.github/workflows/ci-frontend.yml
new file mode 100644
index 0000000..006dfd8
--- /dev/null
+++ b/.github/workflows/ci-frontend.yml
@@ -0,0 +1,47 @@
+name: CI - Build Frontend
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "shatter-web/**"
+      - ".github/workflows/ci-frontend.yml"
+  pull_request:
+    branches: [main]
+    paths:
+      - "shatter-web/**"
+      - ".github/workflows/ci-frontend.yml"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: |
+          cd shatter-web
+          npm ci
+
+      - name: Build React app
+        run: |
+          cd shatter-web
+          npm run build
+
+      - name: Compress frontend source for artifact
+        run: |
+          cd shatter-web
+          tar -czf ../frontend-source-${{ github.run_number }}.tar.gz .
+
+      - name: Upload frontend artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-source-${{ github.run_number }}
+          path: frontend-source-${{ github.run_number }}.tar.gz
diff --git a/shatter-web/.gitignore b/shatter-web/.gitignore
index 3c0740e..729af64 100644
--- a/shatter-web/.gitignore
+++ b/shatter-web/.gitignore
@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 
+.vercel