150 lines
3.3 KiB
Markdown
150 lines
3.3 KiB
Markdown
# DramaLing - AI 英語詞彙學習平台
|
||
|
||
**專案狀態**: 🚀 MVP 開發中
|
||
**開發週期**: 6 週 (2025-09-16 ~ 2025-10-27)
|
||
**技術棧**: Next.js + TypeScript + Supabase + Gemini AI
|
||
**目標**: 100 個活躍用戶，40% 留存率
|
||
|
||
## 🚀 快速開始
|
||
|
||
```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
|
||
|
||
# 4. 設置環境變數
|
||
cp .env.example .env.local
|
||
|
||
# 5. 啟動開發伺服器
|
||
npm run dev
|
||
```
|
||
|
||
## 📋 專案文檔
|
||
|
||
### 核心文檔
|
||
- [專案架構說明](./PROJECT_STRUCTURE.md) - 完整的文件結構和組織
|
||
- [開發執行計劃](./DEVELOPMENT_PLAN.md) - 詳細的開發計劃和每日執行指南
|
||
- [6週開發總計劃](./web-mvp-master-plan.md) - MVP 開發藍圖
|
||
- [技術架構詳解](./web-technical-architecture.md) - 技術選型和架構設計
|
||
|
||
### 設計文檔
|
||
- [用戶流程設計](./user-flows.md) - 完整的用戶體驗流程
|
||
- [產品提案](./pitch.md) - 產品價值主張和市場定位
|
||
|
||
### 開發指南
|
||
- [環境設置指南](./web-setup-guide.md) - 開發環境配置步驟
|
||
- [網頁vs原生App比較](./web-vs-app-comparison.md) - 技術方案對比分析
|
||
|
||
## 🏗️ 技術架構
|
||
|
||
### 前端
|
||
- **框架**: Next.js 14 (App Router)
|
||
- **語言**: TypeScript
|
||
- **樣式**: Tailwind CSS + shadcn/ui
|
||
- **狀態管理**: Zustand
|
||
- **資料擷取**: TanStack Query
|
||
|
||
### 後端
|
||
- **資料庫**: Supabase (PostgreSQL)
|
||
- **認證**: Supabase Auth
|
||
- **AI服務**: Google Gemini API
|
||
- **檔案儲存**: Supabase Storage
|
||
|
||
### 部署
|
||
- **平台**: Vercel
|
||
- **版本控制**: GitHub
|
||
- **CI/CD**: Vercel 自動部署
|
||
|
||
## 📅 開發時程
|
||
|
||
### Week 1: 基礎架構 ✅
|
||
- 專案初始化與環境設置
|
||
- 認證系統實作
|
||
- 基礎 UI 架構
|
||
- Vercel 部署
|
||
|
||
### Week 2: AI 核心功能
|
||
- Gemini API 整合
|
||
- 詞卡生成介面
|
||
- 詞卡儲存功能
|
||
- 錯誤處理機制
|
||
|
||
### Week 3: 詞卡管理
|
||
- CRUD 功能完整實作
|
||
- SM-2 複習演算法
|
||
- 學習統計儀表板
|
||
- 進度追蹤系統
|
||
|
||
### Week 4: UI/UX 優化
|
||
- 響應式設計
|
||
- 載入優化
|
||
- 動畫效果
|
||
- 使用體驗提升
|
||
|
||
### Week 5: 測試與優化
|
||
- 單元測試
|
||
- E2E 測試
|
||
- 效能優化
|
||
- 安全性檢查
|
||
|
||
### Week 6: 發布與推廣
|
||
- 生產環境配置
|
||
- 網域設置
|
||
- 用戶獲取
|
||
- 意見收集
|
||
|
||
## 🎯 成功指標
|
||
|
||
### 技術指標
|
||
- Lighthouse Performance > 90
|
||
- 首次載入 < 3秒
|
||
- API 回應 < 500ms
|
||
- 零嚴重 Bug
|
||
|
||
### 產品指標
|
||
- 100+ 註冊用戶
|
||
- 40%+ 7日留存率
|
||
- 10+ 分鐘日均使用時間
|
||
- 50+ NPS 分數
|
||
|
||
## 💰 預算配置
|
||
|
||
### 必要支出 (NT$ 900)
|
||
- Gemini API 測試: NT$ 500
|
||
- 網域名稱: NT$ 400
|
||
|
||
### 可選支出 (NT$ 1,500)
|
||
- Logo 設計: NT$ 500
|
||
- 廣告測試: NT$ 1,000
|
||
|
||
**總預算**: NT$ 2,400
|
||
|
||
## 🤝 貢獻指南
|
||
|
||
1. Fork 本專案
|
||
2. 建立功能分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 開啟 Pull Request
|
||
|
||
## 📞 聯絡資訊
|
||
|
||
- 專案負責人: [Your Name]
|
||
- Email: [your.email@example.com]
|
||
- GitHub: [Your GitHub Profile]
|
||
|
||
## 📄 授權
|
||
|
||
本專案採用 MIT 授權 - 詳見 [LICENSE](LICENSE) 檔案
|
||
|
||
---
|
||
|
||
**最後更新**: 2025-09-14
|
||
**維護者**: Drama Ling 開發團隊
|
||
**版本**: v4.0 - HTML/CSS元件庫建立，取代Figma設計工具 |