# 🎬 DramaLing - AI 英語詞彙學習平台

**專案狀態**: 🔄 後端重寫中 (.NET Core)
**開發週期**: 6 週 (2025-09-16 ~ 2025-10-27)
**技術棧**: Next.js + .NET Core + PostgreSQL + Gemini AI
**目標**: 100 個活躍用戶，40% 留存率

## 🏗️ 架構概覽

```
Frontend (Next.js 15)     Backend (.NET Core 8)
http://localhost:3001  ←→  http://localhost:5000
        ↓                         ↓
   React Pages            ASP.NET Core Web API
   Tailwind CSS           Entity Framework Core
        ↓                         ↓
                PostgreSQL (Supabase)
                Google Gemini AI
```

## 🚀 快速開始

### 前端啟動 (已完成)
```bash
./start-frontend.sh
# 前端運行在: http://localhost:3001
```

### 後端啟動 (.NET Core)
```bash
# 1. 啟動 .NET API
./start-dotnet-api.sh

# 2. API 端點
# http://localhost:5000/api/flashcards
# http://localhost:5000/swagger (API 文檔)
# http://localhost:5000/health (健康檢查)
```

## 📁 專案結構 (前後端分離)

```
dramaling-vocab-learning/
├── frontend/              # Next.js 前端專案 (完成)
│   ├── app/              # 前端頁面
│   │   ├── dashboard/    # 儀表板頁面
│   │   ├── flashcards/   # 詞卡管理
│   │   ├── learn/        # 學習頁面
│   │   ├── generate/     # AI 生成
│   │   └── login/register/ # 認證頁面
│   │
│   ├── public/           # 靜態資源
│   ├── package.json      # 前端依賴
│   ├── tailwind.config.ts # 樣式配置
│   ├── next.config.mjs   # Next.js 配置
│   └── tsconfig.json     # TypeScript 配置
│
├── backend/               # .NET Core 後端專案 (開發中)
│   └── DramaLing.Api/    # API 專案
│       ├── Controllers/  # API 控制器
│       ├── Services/     # 業務邏輯
│       ├── Models/       # 數據模型
│       ├── Data/         # Entity Framework
│       └── Program.cs    # 啟動配置
│
├── docs/                 # 專案文檔
│   ├── 01_requirement/   # 需求文檔
│   ├── 02_design/        # 設計文檔
│   └── 03_development/   # 開發文檔
│
├── README.md             # 專案說明
├── start-frontend.sh     # 前端啟動腳本
└── start-dotnet-api.sh   # 後端啟動腳本
```

## 🎯 核心功能

### ✅ 已完成 (前端)
- 🎨 **完整 UI/UX** - 所有頁面設計完成
- 📱 **響應式設計** - 支援手機/平板/桌面
- 🎯 **學習模式** - 翻卡、選擇題、填空、聽力、口說
- 🤖 **AI 生成界面** - 智能詞卡生成流程
- 📊 **統計儀表板** - 學習進度追蹤

### 🔧 開發中 (後端)
- 🏗️ **ASP.NET Core API** - 高性能 RESTful API
- 🧠 **SM-2 學習算法** - 間隔重複記憶系統
- 🤖 **AI 服務整合** - Google Gemini API
- 📊 **統計分析** - 多維度學習數據
- 🔒 **JWT 認證** - 安全的用戶系統

## 📈 開發進度

```
Phase 1: 前端 Prototype     ✅ 100% 完成
Phase 2: 後端重寫 (.NET)    🔧 80% 完成
Phase 3: 前後端整合         ⏳ 待開始
Phase 4: 測試與部署         ⏳ 待開始
```

## 🎨 前端預覽

瀏覽器打開：http://localhost:3001

### 主要頁面：
- `/` - 產品首頁
- `/dashboard` - 學習儀表板
- `/flashcards` - 詞卡管理
- `/learn` - 智能學習模式
- `/generate` - AI 詞卡生成

## 🔧 開發者指南

### 文檔位置
- **後端開發計劃**: `docs/03_development/api/backend-development-plan.md`
- **專案結構**: `docs/03_development/setup/folder-structure.md`
- **.NET 重寫計劃**: `docs/03_development/dotnet-rewrite-plan.md`

### 技術亮點
- 🚀 **性能**: .NET Core 比 Node.js 快 30-50%
- 🛡️ **型別安全**: C# 強型別系統
- 🏢 **企業級**: 成熟的架構和工具鏈
- 🔧 **維護性**: 清晰的專案結構

---

> **注意**: 目前正在從 Next.js API Routes 重寫為 .NET Core Web API，以獲得更好的性能和維護性。