251 lines
7.4 KiB
Markdown
251 lines
7.4 KiB
Markdown
# 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 |