7.4 KiB
7.4 KiB
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
- 記錄問題與解決方案
週末回顧
- 本週完成項目檢視
- 下週計劃調整
- 風險評估更新
- 用戶反饋收集
- 技術債務評估
🔗 快速連結
開發資源
專案文檔
🚀 立即開始
# 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