鄭沛軒
102643d96c
- Added error report button to flip card mode - Unified error report button position across all modes (top-right) - Implemented error report modal with optional reason input - Removed example sentences from quiz mode results - Updated modal to display test mode and card information 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .claude | ||
| app | ||
| docs | ||
| public/images/examples | ||
| .env.example.old | ||
| .gitignore | ||
| README.old.md | ||
| next.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.ts | ||
| tsconfig.json | ||
README.old.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
📋 專案文檔
核心文檔
設計文檔
開發指南
- 環境設置指南 - 開發環境配置步驟
- 網頁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
🤝 貢獻指南
- Fork 本專案
- 建立功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 開啟 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設計工具