# DramaLing 專案文件架構及執行計劃

## 📂 專案目錄結構

```
dramaling-vocab-learning/
├── 📋 文檔區 (Documentation)
│   ├── README.md                    # 專案總覽
│   ├── PROJECT_STRUCTURE.md         # 本文件 - 專案架構說明
│   ├── web-mvp-master-plan.md      # 6週開發總計劃
│   ├── web-technical-architecture.md # 技術架構詳解
│   ├── web-setup-guide.md          # 開發環境設置指南
│   ├── web-vs-app-comparison.md    # 網頁vs原生App比較
│   ├── user-flows.md               # 用戶流程設計
│   └── pitch.md                    # 產品提案說明
│
├── 📁 00_starter/                  # 啟動資源
│   └── old/                        # 歷史文件存檔
│
├── 📁 01_requirement/              # 需求文檔
│   ├── functional-requirements.md  # 功能需求規格
│   ├── technical-requirements.md   # 技術需求規格
│   └── user-stories.md            # 用戶故事
│
├── 📁 02_design/                   # 設計系統
│   ├── design-system/              # 設計規範
│   │   ├── colors.md              # 色彩系統
│   │   ├── typography.md          # 字體系統
│   │   └── components.md          # 元件規範
│   ├── wireframes/                 # 線框圖
│   └── user-flows/                 # 用戶流程圖
│
├── 📁 03_development/              # 開發實作
│   ├── setup/                      # 環境設置
│   │   ├── initial-setup.md       # 初始化步驟
│   │   └── dependencies.md        # 依賴管理
│   ├── implementation/             # 實作指南
│   │   ├── week1-auth.md         # Week 1: 認證系統
│   │   ├── week2-ai.md           # Week 2: AI功能
│   │   ├── week3-cards.md        # Week 3: 詞卡管理
│   │   ├── week4-ui.md           # Week 4: UI優化
│   │   ├── week5-test.md         # Week 5: 測試優化
│   │   └── week6-launch.md       # Week 6: 發布推廣
│   └── api/                        # API文檔
│       ├── gemini-integration.md  # Gemini API整合
│       └── supabase-schema.md    # Supabase資料庫架構
│
├── 📁 04_testing/                  # 測試文檔
│   ├── test-plan.md              # 測試計劃
│   ├── test-cases/                # 測試案例
│   └── bug-reports/               # Bug追蹤
│
├── 📁 05_deployment/               # 部署文檔
│   ├── vercel-config.md          # Vercel部署設定
│   ├── environment-vars.md       # 環境變數配置
│   └── production-checklist.md   # 上線檢查清單
│
└── 📁 06_project-management/      # 專案管理
    ├── timeline.md                # 時程表
    ├── risk-assessment.md         # 風險評估
    ├── budget-tracking.md         # 預算追蹤
    └── daily-progress/            # 每日進度記錄
        ├── week1.md
        ├── week2.md
        └── ...
```

## 📅 6週執行時程表

### Week 0: 準備週 (開始前)
**目標**: 環境準備與規劃完成

#### 待辦事項
- [ ] 申請並測試 Gemini API Key
- [ ] 註冊 Supabase、Vercel、GitHub 帳號
- [ ] 安裝開發工具 (VS Code, Node.js, Git)
- [ ] 設計資料庫架構
- [ ] 建立 GitHub repository
- [ ] 初始化 Next.js 專案並部署測試

### Week 1: 基礎架構 (Day 1-5)
**目標**: 建立認證系統與基礎架構

#### 待辦事項
- [ ] Next.js + TypeScript 專案設置
- [ ] Tailwind CSS + shadcn/ui 配置
- [ ] Supabase 整合與資料庫建立
- [ ] 實作註冊/登入/登出功能
- [ ] Protected routes 設置
- [ ] 部署到 Vercel

**里程碑**: 可註冊登入的網站上線 ✅

### Week 2: AI 核心功能 (Day 6-10)
**目標**: 實現 AI 詞卡生成功能

#### 待辦事項
- [ ] Gemini API 整合
- [ ] Prompt 工程優化
- [ ] 詞卡生成介面開發
- [ ] 詞卡儲存功能
- [ ] 錯誤處理與 Rate Limiting

**里程碑**: AI 生成功能完成 ✅

### Week 3: 詞卡管理與複習 (Day 11-15)
**目標**: 完成詞卡 CRUD 與複習系統

#### 待辦事項
- [ ] 詞卡列表與搜尋功能
- [ ] 編輯/刪除功能
- [ ] SM-2 演算法實作
- [ ] 複習介面與評分功能
- [ ] 學習統計儀表板

**里程碑**: 核心功能完成 ✅

### Week 4: UI/UX 優化 (Day 16-21)
**目標**: 提升使用者體驗

#### 待辦事項
- [ ] 響應式設計優化
- [ ] 載入狀態與骨架屏
- [ ] 錯誤邊界處理
- [ ] 動畫效果添加
- [ ] 鍵盤快捷鍵支援

**里程碑**: 用戶體驗優化完成 ✅

### Week 5: 測試與優化 (Day 22-27)
**目標**: 確保品質與效能

#### 待辦事項
- [ ] 單元測試撰寫
- [ ] E2E 測試 (Playwright)
- [ ] Lighthouse 效能優化
- [ ] 安全性檢查
- [ ] Bug 修復

**里程碑**: 品質標準達標 ✅

### Week 6: 發布與推廣 (Day 28-33)
**目標**: 公開發布並獲取用戶

#### 待辦事項
- [ ] 生產環境配置
- [ ] 網域設置
- [ ] 內測用戶邀請
- [ ] ProductHunt 發布
- [ ] 社群媒體推廣

**里程碑**: 100+ 用戶註冊 ✅

## 🎯 關鍵成功指標 (KPI)

### 技術指標
- Lighthouse Performance > 90
- 首次載入時間 < 3秒
- API 回應時間 < 500ms
- 零嚴重 Bug

### 產品指標
- 100+ 註冊用戶
- 40%+ 7日留存率
- 10+ 分鐘日均使用時間
- 50+ NPS 分數

### 商業指標
- 獲客成本 < NT$ 50
- 30%+ 付費意願
- 5+ 用戶主動推薦

## 💰 預算控制

### 必要支出 (NT$ 900)
- Gemini API 測試: NT$ 500
- 網域名稱 (.com): NT$ 400

### 可選支出 (NT$ 1,500)
- Logo 設計: NT$ 500
- 廣告測試: NT$ 1,000

**總預算上限**: NT$ 2,400

## 🚨 風險管理矩陣

| 風險類型 | 描述 | 機率 | 影響 | 緩解措施 |
|---------|-----|-----|-----|---------|
| 技術風險 | Gemini API 不穩定 | 中 | 高 | 準備 OpenAI API 備案 |
| 時程風險 | 功能開發延遲 | 中 | 中 | 狠心砍非核心功能 |
| 市場風險 | 用戶獲取困難 | 高 | 高 | 提前啟動社群預熱 |
| 資源風險 | 免費額度用盡 | 低 | 中 | 監控用量，設置警報 |

## 📝 每日執行檢查清單

### 開發日常
- [ ] 檢查昨日進度
- [ ] 更新今日待辦
- [ ] 程式碼提交
- [ ] 測試新功能
- [ ] 部署到 Vercel
- [ ] 記錄問題與解決方案

### 週末回顧
- [ ] 本週完成項目檢視
- [ ] 下週計劃調整
- [ ] 風險評估更新
- [ ] 用戶反饋收集
- [ ] 技術債務評估

## 🔗 快速連結

### 開發資源
- [Next.js 文檔](https://nextjs.org/docs)
- [Supabase 文檔](https://supabase.com/docs)
- [shadcn/ui 元件](https://ui.shadcn.com)
- [Tailwind CSS](https://tailwindcss.com)

### 專案文檔
- [技術架構](./web-technical-architecture.md)
- [環境設置](./web-setup-guide.md)
- [開發計劃](./web-mvp-master-plan.md)
- [用戶流程](./user-flows.md)

## 🚀 立即開始

```bash
# 1. 克隆專案
git clone [your-repo-url]
cd dramaling-vocab-learning

# 2. 初始化 Next.js 專案
npx create-next-app@latest . --typescript --tailwind --app

# 3. 安裝核心依賴
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs
npm install zustand @tanstack/react-query
npm install @google/generative-ai

# 4. 設置 shadcn/ui
npx shadcn-ui@latest init

# 5. 啟動開發伺服器
npm run dev
```

---

**更新日期**: 2025-09-15
**維護者**: DramaLing 開發團隊
**版本**: v1.0