NX Playground

Event + commerce integration on Nx — C-end portal, React ops CMS, Nest API, auth/LIFF.
Planning SSOT: private platform-command (planning/projects/nx-playground.md). This README is how-to.
Local run: docs/EVENT-STACK-DEMO.md. Hosted: docs/HOSTED-DEMO.md.
Angular / Vue live in angular-dashboard-sandbox and vue-motion-sandbox (canonical after mirror inversion). Design tokens: explore-design-sdk.

What this proves

Taiwan event product slice in one Nx repo: public C-end (Next.js) + organizer CMS (React) + shared OpenAPI + Nest/Prisma spine.

Proof	Honest bound
Hosted C-end	https://nx-event-portal.vercel.app/zh-TW/events — exhibition catalog. Hobby memory fixtures when that host is healthy; otherwise same-origin portal BFF.
Contracts	Same OpenAPI for mock and Nest; Orval client for events.
Not claimed	Hosted Nest + Postgres is the catalog write path, not a payments API.

Interview second case after AI Search Portal. Do not describe Hobby mock as production money API.

專案簡介

產品路徑（請優先跑這些）：

• 🎫 event-portal — Taipei/Tokyo 展覽探索 + LINE（Next.js 15，:3000）
• 📊 event-cms — 活動營運（React 19，:3002）
• 🔧 api-server — NestJS + Prisma（:3001，Swagger /api/docs）
• 🧪 api-mock — 同一份 event-stack OpenAPI 的 stateful mock（:3011）
• 🔐 auth — redirects to event-portal Better Auth（:3004 → :3000/zh-TW/login）

其餘 leftover（profile、mobile-approvals）仍在 apps/，轉型完成前不加功能。
Vue / Angular 鏡像已移到 labs/（legacy — do not extend）。Nx imports：apps/angular-dashboard（angular-dashboard-sandbox，對齊本 repo Angular 20.3.3）、apps/vue-motion（vue-motion-sandbox）、apps/mfe-host + apps/mfe-ui（micro_frontends 的 Nx Module Federation 重做）。

🚀 快速開始

首次設置

make setup      # 安裝依賴並設置環境

啟動服務

# 產品路徑
make dev-event-portal  # Event Portal :3000
make dev-event-cms     # Event CMS :3002
make dev-api           # Nest live API :3001
make dev-auth          # Auth :3004

# 契約 mock（可取代 Nest；CMS POST 後 Portal GET 看得到）
make dev-api-mock      # :3011
# then: NEXT_PUBLIC_API_BASE_URL=http://localhost:3011/api VITE_API_BASE_URL=http://localhost:3011/api

# Seed fixtures into SQLite (live Nest)
make seed

📋 常用命令

命令	說明
make setup	首次設置開發環境
make dev	啟動產品路徑服務
make dev-event-portal	啟動 Event Portal 服務
make dev-event-cms	啟動 Event CMS 服務
make dev-api	啟動 Nest API
make dev-api-mock	啟動契約 mock
make dev-auth	啟動 Auth
make stop	停止所有服務
make logs	查看日誌
make help	查看產品路徑命令

🌐 服務網址

• API Server (live Nest): http://localhost:3001/api
  • Swagger Docs: http://localhost:3001/api/docs
• API mock (same OpenAPI, in-memory): http://localhost:3011/api
• Event Portal (展覽探索 + LINE): http://localhost:3000
• Event CMS (活動管理): http://localhost:3002
• Auth: http://localhost:3004
• Angular dashboard (sandbox import): http://localhost:4200

📦 專案結構

nx-playground/
├── apps/                    # 應用程式
│   ├── api-server/         # 🔧 API Server (NestJS 10, Port 3001)
│   ├── api-mock/           # 🧪 event-stack mock (Port 3011)
│   ├── auth/               # 🔐 認證服務 (React + Vite, Port 3004)
│   ├── event-cms/          # 📊 活動 CMS (React + Vite, Port 3002)
│   ├── event-portal/       # 🎫 展覽探索 + LINE (Next.js 15, Port 3000)
│   ├── profile/            # 🎯 技術展示 (React + Vite, Port 3003) — no new features
│   ├── mobile-approvals/   # leftover — no new features
│   ├── angular-dashboard/  # Angular ops sandbox import (Port 4200)
│   ├── vue-motion/         # Vue motion sandbox import (Port 8080)
│   ├── mfe-host/           # Module Federation host (Port 5173)
│   └── mfe-ui/             # Module Federation remote (Port 5174)
├── labs/                    # archived Vue / Angular mirrors — see labs/README.md
├── libs/                    # 共享函式庫
│   ├── api-client/         # API 客戶端 (React Query + Orval)
│   ├── auth-client/        # 認證客戶端 (SSO 整合)
│   ├── charts/             # 圖表庫 (Recharts + Chart.js)
│   ├── design-system/      # 設計系統 (Style Dictionary)
│   ├── hooks/              # React Hooks (usehooks-ts + custom)
│   ├── i18n/               # 國際化 (i18next + next-intl)
│   └── ui-components/      # UI 組件庫 (Radix UI + Tailwind)
├── templates/               # 專案模板
│   └── react-template/     # React 專案快速建立模板
├── scripts/                 # 自動化腳本
└── docs/                    # 文檔

🎯 技術棧

前後端框架

• NestJS 10 - api-server (後端 API)
• React 19 - auth, event-cms
• Next.js 15 - event-portal (App Router + LINE webhook)
• Angular / Vue - satellite repos only (labs/ holds archived mirrors)

Monorepo 工具

• Nx 21.4 - Workspace 管理、依賴圖、快取
• pnpm - 套件管理器

後端技術

• Prisma 5 - ORM
• SQLite - 開發資料庫
• PostgreSQL - 生產資料庫（規劃中）
• Swagger - API 文檔

UI/樣式

• Tailwind CSS - 工具類樣式系統
• Radix UI - 無障礙 UI 組件
• Vanilla Extract - CSS-in-TypeScript
• Style Dictionary - Design Tokens 生成

狀態管理

• Zustand - 全局狀態管理
• React Query - 服務端狀態管理
• Context API - 主題和認證

開發工具

• TypeScript 5.8 - 類型系統
• Vite 6 - 快速構建工具
• ESLint - 程式碼檢查
• Prettier - 程式碼格式化
• Husky - Git hooks

🎯 快速建立新專案

使用 React 模板快速建立新的應用：

# 方式 1: 使用腳本（推薦）
./scripts/create-react-app.sh my-new-app 3005
./scripts/finish-setup.sh my-new-app 3005

# 方式 2: 手動複製
cp -r templates/react-template apps/my-new-app
# 然後手動更新配置文件

# 啟動新專案
pnpm dev:my-new-app

📚 文檔

• CREATE_REACT_APP.md - React 模板使用指南
• PROJECT_SETUP.md - 專案設置總結
• MIGRATION.md - 專案遷移說明

應用文檔

• apps/auth/README.md - 認證服務
• apps/console/README.md - 控制台
• apps/events/README.md - 活動管理
• apps/profile/README.md - 技術展示
• labs/README.md - archived Vue / Angular mirrors

函式庫文檔

• libs/api-client/README.md - API 客戶端
• libs/ui-components/README.md - UI 組件
• libs/design-system/README.md - 設計系統
• libs/i18n/README.md - 國際化
• libs/hooks/README.md - React Hooks

🛠️ 開發命令

構建

pnpm build:safe           # 構建所有專案
pnpm build:affected       # 只構建受影響的專案
nx build <project-name>   # 構建單一專案

測試

pnpm test                 # 執行所有測試
pnpm test:watch           # 監聽模式
pnpm test:coverage        # 生成覆蓋率報告
pnpm test:affected        # 只測試受影響的專案

Lint

pnpm lint                 # 檢查所有專案
pnpm lint:fix             # 自動修復
pnpm lint:affected        # 只檢查受影響的專案

Nx 特性

nx graph                  # 查看專案依賴圖
nx affected:build         # 只構建受影響的專案
nx affected:test          # 只測試受影響的專案
nx reset                  # 清除 Nx 快取

🔗 相關資源

• Nx Documentation
• React Documentation
• Next.js Documentation
• Angular Documentation
• Vue Documentation