Hệ Thống Quản Lý Học Tập (Edu LMS)

Dự án Frontend cho nền tảng học trực tuyến và luyện thi chứng chỉ AP. Ứng dụng được xây dựng với mục tiêu cung cấp trải nghiệm học tập mượt mà, quản lý khóa học linh hoạt và hệ thống thi cử trực quan.

🚀 Công Nghệ Sử Dụng (Tech Stack)

Dự án sử dụng các công nghệ mới nhất để đảm bảo hiệu suất và khả năng mở rộng:

• Core: React 19, TypeScript, Vite.
• Routing: React Router 7 (phiên bản mới nhất với nhiều cải tiến về hiệu năng).
• State Management & Data Fetching: TanStack Query v5 (React Query) & Axios.
• Styling: Tailwind CSS 4, Tailwind-merge, và clsx để quản lý class linh hoạt.
• Animation: Motion (Framer Motion) và CSS Animate mang lại trải nghiệm UI mượt mà.
• UI Components & Icons: Lucide React, React Icons, và React Toastify cho thông báo.

Tính Năng Đặc Thù:

• Drag and Drop: React DnD cho tính năng xây dựng khóa học.
• PDF Viewer: React PDF hỗ trợ xem tài liệu bài giảng.

✨ Tính Năng Chính

Dựa trên cấu trúc dự án, hệ thống được phân quyền rõ ràng cho 3 đối tượng:

1. Dành cho Học viên (Student)

• Dashboard: Theo dõi tiến độ học tập và các khóa học đã đăng ký.
• Learning Interface: Giao diện học tập tích hợp trình phát Video và trình xem tài liệu PDF.
• Quiz System: Làm bài thi thử, xem lại lịch sử thi và kết quả chi tiết.
• Profile: Quản lý thông tin cá nhân và thay đổi mật khẩu.

2. Dành cho Giảng viên (Teacher)

• Course Builder: Công cụ tạo khóa học trực quan với tính năng kéo thả (Drag & Drop) để sắp xếp chương hồi và bài học.
• Question Bank: Quản lý ngân hàng câu hỏi, hỗ trợ nhập câu hỏi từ tệp.
• Exam Management: Tạo và quản lý các kỳ thi, bài kiểm tra.
• Analytics: Theo dõi thống kê kết quả làm bài của học viên qua biểu đồ.

3. Dành cho Quản trị viên (Admin)

• User Management: Quản lý danh sách người dùng và phân quyền (Role).
• Course Overview: Quản lý và kiểm soát toàn bộ danh sách khóa học trên hệ thống.

🛠 Hướng Dẫn Cài Đặt và Sử Dụng

Yêu cầu hệ thống

• Node.js (phiên bản 18.x hoặc mới hơn).
• npm hoặc yarn.

Các bước cài đặt

1. Clone dự án:

   git clone [url-cua-ban]
   cd lms-website

2. Cài đặt thư viện:

   npm install

3. Chạy dự án ở chế độ phát triển (Development):

   npm run dev

   Mặc định ứng dụng sẽ chạy tại: http://localhost:5173

4. Xây dựng bản Production (Build):

   npm run build

📁 Cấu Trúc Thư Mục Quan Trọng

• src/components: Chứa các component dùng chung và component theo từng vai trò (Admin, Teacher, Student).
• src/services: Chứa các cấu hình Axios và API calls cho từng module (auth, course, quiz, etc.).
• src/hooks: Các Custom Hooks để quản lý logic nghiệp vụ và dữ liệu từ React Query.
• src/layouts: Định nghĩa các khung giao diện khác nhau cho từng đối tượng người dùng.
• src/routes: Hệ thống cấu hình route tập trung.