🎛 ci: Add frontend CI

Author: tomy0000000

.github/workflows/ci-pipeline.yml

@@ -12,22 +12,21 @@ on:
   pull_request:
   workflow_dispatch:
 
-defaults:
-  run:
-    working-directory: "./backend"
-
 jobs:
-  test:
-    name: "🧪 Testing"
+  backend-test:
+    name: "🧪 Backend Testing"
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: "backend"
     steps:
       - name: "🛒 Checkout"
         uses: actions/checkout@v4
 
       - name: "🐍 Set up Poetry"
         uses: tomy0000000/actions/python-poetry-install@main
         with:
-          working_directory: "./backend"
+          working_directory: "backend"
           python_version: "3.12"
 
       - name: "🧪 Testing"
@@ -40,23 +39,55 @@ jobs:
           fail_ci_if_error: true
           token: ${{ secrets.CODECOV_TOKEN }}
 
-  lint:
-    name: "🔍 Linting"
+  backend-lint:
+    name: "🔍 Backend Linting"
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: "backend"
     steps:
       - name: "🛒 Checkout"
         uses: actions/checkout@v4
 
       - name: "🐍 Set up Poetry"
         uses: tomy0000000/actions/python-poetry-install@main
         with:
-          working_directory: "./backend"
+          working_directory: "backend"
           python_version: "3.12"
 
       - name: "🔍 Linting"
         run: |
           poetry run scripts/lint.sh
 
+  frontend-lint:
+    name: "🔍 Frontend Linting"
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: "frontend"
+    steps:
+      - name: "🛒 Checkout"
+        uses: actions/checkout@v4
+
+      - name: "⚙️ Setup pnpm"
+        uses: pnpm/action-setup@v4
+        with:
+          package_json_file: "frontend/package.json"
+          run_install: false
+
+      - name: "⚙️ Setup Node.js"
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: "frontend/package.json"
+          cache: "pnpm"
+          cache-dependency-path: "frontend/pnpm-lock.yaml"
+
+      - name: "📦 Install dependencies"
+        run: pnpm install --frozen-lockfile
+
+      - name: "🔍 Linting"
+        run: pnpm lint
+
   license:
     name: "🪪 License Scan"
     runs-on: ubuntu-latest
@@ -70,10 +101,13 @@ jobs:
         with:
           api-key: 2d7865a44aa575d857521faaee1a57f8
 
-  build:
+  build-backend:
     name: "🏗️ Build Backend Image"
     runs-on: ubuntu-latest
-    needs: [test, lint, license]
+    defaults:
+      run:
+        working-directory: "backend"
+    needs: [backend-test, backend-lint, license]
     if: success() && github.ref == 'refs/heads/develop'
     steps:
       - name: "🛒 Checkout"
@@ -99,4 +133,38 @@ jobs:
           docker_password: ${{ secrets.DOCKER_PASSWORD }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-          context: "./backend"
+          context: "backend"
+
+  build-frontend:
+    name: "🏗️ Build Frontend Image"
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: "frontend"
+    needs: [frontend-lint, license]
+    if: success() && github.ref == 'refs/heads/develop'
+    steps:
+      - name: "🛒 Checkout"
+        uses: actions/checkout@v4
+
+      - name: "⚙️ Setup Docker Meta"
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ github.repository }}
+            ghcr.io/${{ github.repository }}
+          tags: |
+            type=edge
+          labels: |
+            org.opencontainers.image.title=kayman-frontend
+            org.opencontainers.image.documentation=${{ github.repository }}/wiki
+            org.opencontainers.image.authors=tomy0000000
+
+      - name: "🏗 Build and Push Image"
+        uses: tomy0000000/actions/build-push-image@main
+        with:
+          docker_password: ${{ secrets.DOCKER_PASSWORD }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          context: "frontend"

frontend/eslint.config.mjs

@@ -1,11 +1,14 @@
-import { FlatCompat } from "@eslint/eslintrc"
+import { FlatCompat } from '@eslint/eslintrc'
 
 const compat = new FlatCompat({
+  // import.meta.dirname is available after Node.js v20.11.0
   baseDirectory: import.meta.dirname,
 })
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.config({
+    extends: ['next/core-web-vitals', 'next/typescript'],
+  }),
 ]
 
 export default eslintConfig

frontend/next.config.mjs

@@ -6,7 +6,6 @@ const nextConfig = {
       {
         protocol: "https",
         hostname: "img.tomy.me",
-        port: "",
       },
     ],
   },

frontend/package.json

@@ -1,17 +1,37 @@
 {
   "name": "kayman",
   "version": "0.10.0",
-  "private": true,
+  "description": "🏝🏦 The one-stop solution for personal finance",
+  "homepage": "https://github.com/tomy0000000/kayman",
+  "bugs": {
+    "url": "https://github.com/tomy0000000/kayman/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Tomy Hsieh (tomy0000000)",
+    "url": "https://github.com/tomy0000000"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "generate-client": "openapi-ts"
   },
+  "packageManager": "pnpm@10.12.1",
   "engines": {
     "node": ">=22"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "pnpm",
+      "onFail": "error"
+    }
+  },
   "dependencies": {
     "@hey-api/client-axios": "^0.5.2",
     "@hookform/resolvers": "^3.10.0",
@@ -30,7 +50,7 @@
     "date-fns": "^4.1.0",
     "framer-motion": "^11.17.0",
     "lucide-react": "^0.471.0",
-    "next": "14.2.16",
+    "next": "15.3.4",
     "react": "^18",
     "react-day-picker": "8.10.1",
     "react-dom": "^18",
@@ -41,17 +61,21 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/eslintrc": "^3.3.1",
     "@hey-api/openapi-ts": "^0.63.0",
     "@types/eslint": "^9.6.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "15.1.6",
+    "eslint": "^9.29.0",
+    "eslint-config-next": "15.3.4",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
+  },
+  "volta": {
+    "node": "22.16.0",
+    "pnpm": "10.12.1"
   }
 }