Go to file

鄭沛軒 1d0acf5111 feat: 實作 DramaLing MVP prototype - 建立 Next.js 14 專案架構與 TypeScript 配置 - 實作核心頁面：首頁、登入/註冊、儀表板、詞卡管理、AI生成、學習模式 - 配置 Tailwind CSS 設計系統與響應式布局 - 建立完整的文檔結構與設計規範 - 實現用戶流程與互動原型 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>		2025-09-15 22:55:29 +08:00
.claude	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
app	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
docs	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
.env.example.old	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
.gitignore	refactor: Reorganize documentation structure	2025-09-15 21:07:01 +08:00
README.old.md	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
next.config.mjs	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
package-lock.json	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
package.json	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
postcss.config.js	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
tailwind.config.ts	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00
tsconfig.json	feat: 實作 DramaLing MVP prototype	2025-09-15 22:55:29 +08:00

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

📋 專案文檔

核心文檔

專案架構說明 - 完整的文件結構和組織
開發執行計劃 - 詳細的開發計劃和每日執行指南
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

🤝 貢獻指南

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

README.old.md Unescape Escape