# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)

เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** เพื่อความสะดวกในการพัฒนาต่อและส่งมอบงาน

---

## 🚀 1. Tech Stack & Tools

เครื่องมือและเทคโนโลยีหลักที่ใช้ในการพัฒนาระบบ:

- **Core Framework:** [Nuxt 3](https://nuxt.com) (Vue 3 Composition API)
- **Language:** TypeScript `^5.0`
- **Styling Engine:**
  - **Tailwind CSS:** สำหรับ Utility classes ส่วนใหญ่
  - **Vanilla CSS / CSS Variables:** สำหรับ Design Tokens และ Theming (Dark/Light mode)
- **State Management:**
  - `ref`, `reactive` (Local Component State)
  - `Composables` (Global State Logic)
- **Internationalization:** `@nuxtjs/i18n` (รองรับภาษา TH / EN)
- **UI Architecture:**
  - **Atomic Design-ish:** แยก Components เป็นส่วนย่อยที่นำกลับมาใช้ใหม่ได้
  - **Slots & Props:** ออกแบบให้ยืดหยุ่นสูง

---

## 📂 2. Project Structure (โครงสร้างไฟล์)

โครงสร้างโฟลเดอร์ถูกจัดระเบียบตามหน้าที่การทำงาน (Feature-based grouping):

### 2.1 `pages/` (Application Routes)

กำหนดเส้นทาง URL ของเว็บไซต์:

| Module        | ไฟล์ (File)                   | Path URL           | หน้าที่ (Description)                                  |
| :------------ | :---------------------------- | :----------------- | :----------------------------------------------------- |
| **Landing**   | `index.vue`                   | `/`                | หน้าแรกบุคคลทั่วไป (Hero Section, Features)            |
| **Auth**      | `auth/login.vue`              | `/auth/login`      | หน้าเข้าสู่ระบบ                                        |
|               | `auth/register.vue`           | `/auth/register`   | หน้าสมัครสมาชิก                                        |
|               | `auth/forgot-password.vue`    | `/auth/forgot..`   | หน้าลืมรหัสผ่าน                                        |
|               | `auth/reset-password.vue`     | `/auth/reset..`    | หน้าตั้งรหัสใหม่                                       |
| **Dashboard** | `dashboard/index.vue`         | `/dashboard`       | หน้าหลักผู้เรียน (Overall Progress)                    |
|               | `dashboard/my-courses.vue`    | `/dashboard/my..`  | **คอร์สของฉัน** (ดึงข้อมูลจริงจาก API)                 |
|               | `dashboard/profile.vue`       | `/dashboard/pro..` | หน้าแก้ไขข้อมูลส่วนตัว                                 |
|               | `dashboard/announcements.vue` | `/dashboard/ann..` | หน้าประกาศข่าวสาร                                      |
| **Catalog**   | `browse/index.vue`            | `/browse`          | หน้ารวมคอร์สแบบ Public                                 |
|               | `browse/discovery.vue`        | `/browse/disc..`   | **หน้าค้นหาคอร์ส** (Filter, Search, API Integration)   |
|               | `browse/opencovery.vue`       | `/browse/open..`   | หน้ารายละเอียดคอร์ส (Public View)                      |
| **Classroom** | `classroom/learning.vue`      | `/classroom/lea..` | **ห้องเรียนออนไลน์** (Video Player, Progress Tracking) |
|               | `classroom/quiz.vue`          | `/classroom/quiz`  | ระบบสอบวัดผล                                           |

### 2.2 `components/` (Reusable UI)

ชิ้นส่วน UI ที่ใช้ซ้ำได้บ่อย:

- **Layout & Navigation:**
  - `AppHeader.vue`, `AppSidebar.vue` (ส่วนหัวและเมนูหลัก)
  - `LanguageSwitcher.vue` (ปุ่มเปลี่ยนภาษา)
  - `UserMenu.vue`, `MobileNav.vue`
- **Display & Content:**
  - `CourseCard.vue`: **Smart Card** รองรับสถานะ (ทั่วไป / ลงทะเบียนแล้ว / เรียนจบ)
  - `UserAvatar.vue`: รูปโปรไฟล์พร้อม Fallback
- **Feedback & Loading:**
  - `LoadingSpinner.vue`, `LoadingSkeleton.vue`

### 2.3 `composables/` (Core Logic & API)

ศูนย์รวม Logic ของระบบ (Business Logic Layer):

| Composable             | หน้าที่หลัก (Responsibilities)                                              |
| :--------------------- | :-------------------------------------------------------------------------- |
| `useAuth.ts`           | จัดการ Login, Register, Logout และเก็บ State ผู้ใช้                         |
| `useCourse.ts`         | **Course Management:** ค้นหา, ลงทะเบียน, ดึงเนื้อหาบทเรียน, บันทึก Progress |
| `useCategory.ts`       | **Category Management:** ดึงหมวดหมู่สำหรับ Filter                           |
| `useFormValidation.ts` | Helper สำหรับตรวจสอบความถูกต้องของฟอร์ม                                     |

---

## 🔐 3. Security & Core Systems

- **Middleware (`middleware/auth.ts`):** ดักจับ Route ป้องกันไม่ให้ผู้ที่ยังไม่ล็อกอินเข้าถึงหน้า Dashboard/Classroom
- **Localization (`i18n/`):**
  - แยกไฟล์ภาษาชัดเจน: `locales/th.json`, `locales/en.json`
  - ใช้ `$t('key')` ใน Template ทั้งหมด
- **Theming:** รองรับ Dark Mode สมบูรณ์แบบด้วย Tailwind `dark:` classes และ CSS Variables

---

## 🆕 4. Recent Updates (บันทึกการอัปเดตล่าสุด)

### ✅ Phase 1: Authentication & UI Refactor

- ย้ายระบบ Auth ทั้งหมดเข้า Module `pages/auth/`
- ปรับปรุง UI หน้า Dashboard และ Landing Page
- ติดตั้งระบบ **i18n** รองรับ 2 ภาษาเต็มรูปแบบ

### ✅ Phase 2: Course Discovery (Browse)

- เชื่อมต่อ API `/api/courses` สำหรับหน้าค้นหา
- เพิ่มระบบ Filter หมวดหมู่ (ย่อ/ขยายได้) และ Search Real-time
- ปรับปรุงการ์ดแสดงผลคอร์สให้รองรับข้อมูลจริงจาก Backend

### ✅ Phase 3: Full Learning Experience (Current)

- **Classroom Integration (`learning.vue`):**
  - เปลี่ยนจาก Mock Data เป็น **Real API Data**
  - **Video Player:** เล่นวิดีโอจาก URL จริง
  - **Feature:**
    - 🔒 **Locking:** ล็อกบทเรียนที่ยังเรียนไม่ได้
    - 💾 **Progress:** บันทึกเวลาเรียนอัตโนมัติทุก 10 วินาที
    - ✅ **Auto-Complete:** จบบทเรียนอัตโนมัติเมื่อดูวิดีโอจบ
- **API Expansion:** เพิ่ม Endpoints ครบวงจรใน `useCourse.ts` (`fetchLesson`, `saveProgress`, `enroll`)

---

> _เอกสารนี้อัปเดตล่าสุด: 2026-01-20_