dramaling-vocab-learning/README.md

DramaLing - AI 英語詞彙學習平台

專案狀態: 🚀 MVP 開發中 開發週期: 6 週 (2025-09-16 ~ 2025-10-27) 技術棧: Next.js + TypeScript + Supabase + Gemini AI 目標: 100 個活躍用戶，40% 留存率

🚀 快速開始

# 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

📋 專案文檔

核心文檔

• 專案架構說明 - 完整的文件結構和組織
• 開發執行計劃 - 詳細的開發計劃和每日執行指南
• 6週開發總計劃 - MVP 開發藍圖
• 技術架構詳解 - 技術選型和架構設計

設計文檔

• 用戶流程設計 - 完整的用戶體驗流程
• 產品提案 - 產品價值主張和市場定位

開發指南

• 環境設置指南 - 開發環境配置步驟
• 網頁vs原生App比較 - 技術方案對比分析

🏗️ 技術架構

前端

• 框架: 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 檔案

---

最後更新: 2025-09-14 維護者: Drama Ling 開發團隊 版本: v4.0 - HTML/CSS元件庫建立，取代Figma設計工具