chillka - README

🚀 DEMO

功能

測試帳號密碼：

帳號： [email protected]
密碼： qwer1234

• 登入
• 登出

畫面

• 單一活動頁面
• 搜尋活動頁面
• 新增活動頁面
• 票券頁面

安裝

以下將會引導你如何安裝此專案到你的電腦上。 Node.js 版本建議為：18.18.0 以上。

取得專案

git clone [email protected]:ChillKa/chillka-frontend.git

移動到專案內

cd chillka-frontend

安裝套件

必須先設定 .npmrc，才能正常安裝 tiptap（WYSIWYG）的 pro 套件

@tiptap-pro:registry=https://registry.tiptap.dev/
//registry.tiptap.dev/:_authToken={你的tiptap API key}

• 詳情請參考（需登入）：https://cloud.tiptap.dev/pro-extensions

接著執行

yarn

環境變數設定

請在終端機輸入 cp .env.example .env 來複製 .env.example 檔案，並依據 .env 內容調整相關欄位。

運行專案

yarn dev

開啟專案

在瀏覽器網址列輸入以下即可看到畫面

http://localhost:3535/

環境變數說明

JWT_SECRET= # JWT 認證密鑰
API_ENDPOINT= # 後端網址
NEXT_PUBLIC_GOOGLE_MAP_API_KEY= # Google 地圖 API 密鑰

資料夾說明

• public - 靜態檔案放置處
• src - 程式碼放置處
  • action - Next.js Server Actions
  • app - 路徑放置處
    • route - Next.js Route Handlers
  • components - React 元件
  • hooks - React hooks
  • store - 儲存內部狀態
  • type - 串接 API 的型別
  • lib - Zod Schema，或其他共用程式碼
• .github - CI/CD (GitHub Actions)
• .husky - Husky 檔案
• .vscode - Visual Studio Code 的設定

專案技術

• Node.js v18.18
• Next.js v14.2.1
• Tailwind CSS
• shadcn/ui (with radix)
• Framer Motion
• TypeScript
• React Hook Form
• Husky
• tiptap（WYSIWYG 文字編輯器）

第三方服務

• Google Maps API

CI/CD 說明

此專案有使用 GitHub Actions，所以發起 PR 時會自動執行以下動作：

• 建立 Node.js 環境
• 安裝相依套件
• 編譯程式碼
• 部署到 Vercel 上，並產生 preview url 在 PR 上

當專案 merge 到 main 時會自動執行以下動作：

• 建立 Node.js 環境
• 安裝相依套件
• 編譯程式碼
• 部署到 Vercel 上

其他

chillka 的使用手冊

通用操作

• 使用者登入

活動舉辦者

• 舉辦者創建活動
• 舉辦者檢驗票券

活動參加者

• 參加者搜尋與參加活動
• 參加者出示票券

聯絡作者

你可以透過以下方式與我們聯絡

Zim

• LinkedIn
• GitHub

Louis

• GitHub

Felix

• 個人網站
• GitHub

Brian

• 個人網站
• LinkedIn
• GitHub

後端連結

• chillka-backend

專案協作作者（後端）

Mia

• LinkedIn
• GitHub

Ben

• GitHub