# 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設計工具