Skip to content

Phát triển giao diện người dùng của hệ thống, tập trung vào trải nghiệm mượt và thân thiện với người dùng. Sử dụng công nghệ như ReactJS, NextJS, Typescript, TaiwindCss, ShadcnUi, ReactQuery, Zustand

Notifications You must be signed in to change notification settings

toolkitcore/DATN-FE

 
 

Repository files navigation

CourseMeLy - Hệ thống học tập trực tuyến

Giới thiệu

CourseMeLy là nền tảng học tập trực tuyến hiện đại được xây dựng trên nền tảng Laravel và MySQL, được thiết kế để mang đến trải nghiệm học tập số hóa vượt trội. Với giao diện thân thiện và hệ thống tính năng toàn diện, CourseMeLy tạo ra không gian kết nối liền mạch giữa giáo viên và học viên trong môi trường học tập trực tuyến hiệu quả, linh hoạt và an toàn.

CourseMeLy Logo

Nền tảng học tập trực tuyến hiện đại, linh hoạt và toàn diện

NextJS Laravel MySQL Tailwind License

📋 Tổng quan

CourseMeLy là nền tảng học tập trực tuyến toàn diện được phát triển bởi nhóm sinh viên Cao đẳng FPT Polytechnic Hà Nội. Dự án kết hợp công nghệ hiện đại với trải nghiệm người dùng xuất sắc, tạo ra môi trường học tập số hóa vượt trội, kết nối giáo viên và học viên một cách liền mạch, hiệu quả.

🌟 Tầm nhìn của chúng tôi

Chúng tôi tin rằng giáo dục chất lượng cao phải được tiếp cận dễ dàng cho tất cả mọi người. CourseMeLy được xây dựng với mục tiêu tạo ra một nền tảng học tập:

  • Toàn diện - đáp ứng mọi nhu cầu từ giáo viên đến học viên
  • Linh hoạt - học mọi lúc, mọi nơi, trên mọi thiết bị
  • Tương tác - tạo môi trường giao tiếp sôi động giữa các thành viên
  • An toàn - bảo vệ dữ liệu và quyền riêng tư của người dùng

✨ Tính năng nổi bật

🎓 Quản lý khóa học thông minh

  • Hệ thống phân cấp chương/bài học trực quan
  • Lộ trình học tập cá nhân hóa
  • Bảng điều khiển quản lý toàn diện cho giáo viên
  • Phân quyền chi tiết và linh hoạt

📊 Phân tích học tập chuyên sâu

  • Theo dõi tiến độ học tập theo thời gian thực
  • Báo cáo và thống kê trực quan
  • Phân tích điểm mạnh/yếu của học viên
  • Đề xuất nội dung học tập thông minh

🎬 Nội dung đa phương tiện phong phú

  • Video bài giảng HD với điều khiển nâng cao
  • Tài liệu tương tác có tính năng ghi chú
  • Thư viện tài nguyên phong phú
  • Tích hợp với các nền tảng lưu trữ đám mây

✅ Hệ thống kiểm tra đa dạng

  • Nhiều loại câu hỏi: trắc nghiệm, tự luận, ghép đôi...
  • Chấm điểm tự động và phản hồi tức thì
  • Bảo mật bài thi với giám sát trực tuyến
  • Phân tích kết quả và đề xuất cải thiện

💬 Tương tác thời gian thực

  • Phòng học trực tuyến với video HD
  • Bảng trắng tương tác và chia sẻ màn hình
  • Diễn đàn thảo luận chuyên đề
  • Hệ thống thông báo thông minh

💳 Thanh toán an toàn & linh hoạt

  • Hỗ trợ đa dạng phương thức thanh toán
  • Hệ thống giảm giá và học bổng tích hợp
  • Quản lý đăng ký và gia hạn tự động
  • Bảo mật giao dịch đa lớp

🔧 Công nghệ sử dụng

Laravel NextJS MySQL Tailwind CSS React Query ShadcnUI

Backend

  • Framework: Laravel 10.x với PHP 8.2
  • Database: MySQL 8.0
  • Caching & Queue: Redis
  • Authentication: Laravel Sanctum
  • API: RESTful API, Laravel Resources

Frontend

  • Framework: NextJS (React)
  • Styling: Tailwind CSS, ShadcnUI
  • State Management: Zustand
  • Fetching: React Query

Tích hợp

  • Thanh toán: VNPAY, Momo
  • Đa phương tiện: Mux, Cloudinary
  • Triển khai: Vercel.app

🚀 Cài đặt và khởi chạy

Yêu cầu hệ thống

  • Node.js 16.x hoặc cao hơn
  • PHP 8.1 hoặc cao hơn
  • MySQL 8.0 hoặc cao hơn
  • Redis (cho cache và queue)

Bước 1: Clone dự án

git clone https://github.com/your-username/coursemely.git
cd coursemely

Bước 2: Cài đặt dependency

npm install

Bước 3: Cấu hình môi trường

cp .env.example .env
# Chỉnh sửa tệp .env với cấu hình của bạn (database, API keys...)

Bước 4: Chạy ứng dụng

# Chế độ phát triển
npm run dev

# Kiểm tra lỗi
npm run lint

# Chạy kiểm thử
npm test

# Build cho môi trường production
npm run build

# Khởi chạy phiên bản production
npm start

Sau khi khởi chạy, truy cập http://localhost:3000 để xem trang web.

📁 Cấu trúc dự án

coursemely/
├── app/                  # Thư mục chính của ứng dụng Next.js
│   ├── api/              # API routes
│   ├── courses/          # Trang khóa học
│   ├── dashboard/        # Bảng điều khiển người dùng
│   ├── auth/             # Trang xác thực
│   └── page.tsx          # Trang chủ
├── components/           # React components
│   ├── common/           # UI components dùng chung
│   ├── layouts/          # Layout components
│   └── features/         # Feature-specific components
├── lib/                  # Thư viện và tiện ích
│   ├── api/              # API clients
│   ├── utils/            # Helper functions
│   └── hooks/            # Custom React hooks
├── models/               # Mô hình dữ liệu
├── public/               # Tài nguyên tĩnh
├── styles/               # CSS và tệp style
└── next.config.js        # Cấu hình Next.js
## Các lệnh hữu ích

```bash
# Phát triển
npm run dev

# Kiểm tra lỗi
npm run lint

# Chạy kiểm thử
npm test

# Xây dựng cho môi trường sản xuất
npm run build

# Khởi chạy môi trường sản xuất
npm start

🚢 Triển khai

CourseMeLy được thiết kế để triển khai dễ dàng lên nền tảng Vercel:

# Cài đặt Vercel CLI
npm install -g vercel

# Triển khai
vercel

Xem thêm tài liệu về triển khai Next.js để biết các lựa chọn khác.

👨‍💻 Đội ngũ phát triển

Trương Văn Tùng
Trương Văn Tùng
Frontend Developer
Phạm Văn Hợp
Phạm Văn Hợp
Frontend Developer
Nguyễn Xuân Lâm
Nguyễn Xuân Lâm
Frontend Developer
Trần Thế Nguyên
Trần Thế Nguyên
Frontend Developer
Lê Đức Anh
Lê Đức Anh
Backend Developer
Nguyễn Thành Long
Nguyễn Thành Long
Backend Developer
Đặng Việt Hoàng
Đặng Việt Hoàng
DBackend Developer
Join Us
Bạn?
Tham gia ngay

💼 Đóng góp

Chúng tôi luôn chào đón đóng góp từ cộng đồng! Để bắt đầu:

  1. Fork dự án
  2. Tạo branch cho tính năng của bạn (git checkout -b feature/amazing-feature)
  3. Commit các thay đổi (git commit -m 'Add amazing feature')
  4. Push lên branch (git push origin feature/amazing-feature)
  5. Mở Pull Request

Xem tệp CONTRIBUTING.md để biết thêm chi tiết.

Giấy phép

CourseMely được phát hành dưới Giấy phép MIT.


Được phát triển với ❤️ bởi Nhóm CourseMeLy
© 2025 CourseMeLy. Tất cả các quyền được bảo lưu.

About

Phát triển giao diện người dùng của hệ thống, tập trung vào trải nghiệm mượt và thân thiện với người dùng. Sử dụng công nghệ như ReactJS, NextJS, Typescript, TaiwindCss, ShadcnUi, ReactQuery, Zustand

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 87.1%
  • CSS 12.9%