Octalysis Habit Tracker

基於 Octalysis 框架的習慣追蹤應用，幫助用戶透過遊戲化元素建立持續的好習慣。

🏗️ 項目架構

• 前端: React + TypeScript + Vite + Tailwind CSS
• 後端: Node.js + Express + TypeScript + Prisma
• 資料庫: PostgreSQL (Supabase)
• 部署: Vercel (前端) + Render (後端)

🚀 快速開始

環境要求

• Node.js 22.x
• Yarn 1.22.x
• PostgreSQL 資料庫

本地開發設定

1. 克隆專案

git clone https://github.com/Retsomm/OctalysisHabitTracker.git
cd OctalysisHabitTracker

2. 設定環境變數

# 後端環境變數
cp backend/.env.example backend/.env
# 編輯 backend/.env 填入實際的環境變數值

# 前端環境變數
cp frontend/.env.example frontend/.env
# 編輯 frontend/.env 填入實際的環境變數值

3. 安裝依賴

# 在根目錄一次安裝前後端依賴
yarn install

4. 資料庫設定

cd backend
yarn db:migrate
yarn db:generate

5. 啟動開發服務器

# 在根目錄同時啟動後端、前端
yarn dev

yarn dev 會同時啟動後端（3001）與前端（5173）。 資料庫使用你在 backend/.env 設定的 DATABASE_URL / DIRECT_URL（例如 Supabase）。

📦 構建與部署

本地構建測試

# 構建後端
cd backend
yarn build

# 構建前端
cd frontend
yarn build

自動化部署

專案已配置 GitHub Actions 進行自動化部署：

• 推送到 main 分支 → 自動觸發部署流程
• 後端 → 部署到 Render
• 前端 → 部署到 Vercel
• 資料庫 → 自動執行 migration

🔧 開發工具

• ESLint: 代碼規範檢查
• TypeScript: 靜態類型檢查
• Prisma: 資料庫 ORM
• Tailwind CSS: CSS 框架

📁 專案結構

├── backend/                # 後端應用
│   ├── src/
│   │   ├── controllers/    # 控制器
│   │   ├── routes/         # 路由
│   │   ├── services/       # 服務層
│   │   ├── middleware/     # 中介軟體
│   │   └── types/          # 類型定義
│   ├── prisma/             # 資料庫配置
│   └── package.json
├── frontend/               # 前端應用
│   ├── src/
│   │   ├── components/     # React 組件
│   │   ├── pages/          # 頁面組件
│   │   ├── store/          # Redux 狀態管理
│   │   └── types/          # 類型定義
│   └── package.json
└── .github/workflows/      # CI/CD 配置

🔐 環境變數說明

後端 (.env)

• JWT_SECRET: JWT 令牌密鑰
• DATABASE_URL: Prisma Client 使用的資料庫連接 URL（建議 Supabase Pooler）
• DIRECT_URL: Prisma Migration 使用的直連 URL（Supabase Direct Connection）
• LINE_CLIENT_ID/SECRET: LINE Login OAuth 設定
• X_CLIENT_ID/SECRET: X (Twitter) OAuth 設定

Supabase + Prisma 建議設定

• DATABASE_URL: 使用 Supabase Connection Pooler（通常為 pooler.supabase.com）
• DIRECT_URL: 使用 Supabase Direct Connection（db.<project-ref>.supabase.co:5432）
• CI（GitHub Actions）請在 Secrets 同時設定 DATABASE_URL 與 DIRECT_URL

前端 (.env)

• VITE_GOOGLE_CLIENT_ID: Google OAuth 客戶端 ID
• VITE_LINE_*: LINE Login 相關設定
• VITE_X_*: X (Twitter) 相關設定

🤝 貢獻指南

1. Fork 專案
2. 創建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 開啟 Pull Request

📄 許可證

本專案採用 MIT 許可證 - 詳見 LICENSE 文件。