Giới Thiệu Công Nghệ Sử Dụng

Hệ thống quản lý thực tập & đồ án tốt nghiệp — Nhóm N1 Team 3

---

Mục lục

• Tổng quan kiến trúc
• Backend
• Frontend
• Hạ tầng
• Tóm tắt stack

---

Tổng quan kiến trúc

Dự án áp dụng kiến trúc Client-Server với mô hình RESTful API, tách biệt hoàn toàn giữa frontend và backend. Cả hai giao tiếp với nhau thông qua HTTP request sử dụng JSON.

[Frontend - React]  ←──── HTTP/JSON ────→  [Backend - Laravel API]  ←──→  [MySQL]
     (Port 3000)                                  (Port 8000)

---

Backend

PHP 8.2 + Laravel 12

Laravel là PHP framework theo mô hình MVC (Model - View - Controller).

Tại sao chọn Laravel?

• Cú pháp rõ ràng, năng suất cao: Các tính năng như Eloquent ORM, Route, Middleware giúp viết code nhanh và dễ đọc.
• Hệ sinh thái phong phú: Có sẵn các package chính thức xử lý xác thực, queue, mail, v.v.
• Phù hợp với nhóm sinh viên: Tài liệu phong phú, cộng đồng lớn, dễ học.
• Laravel 12 — phiên bản mới nhất, hỗ trợ PHP 8.2 với hiệu năng cải thiện đáng kể.

Laravel Sanctum (Xác thực)

Tại sao chọn Sanctum thay vì JWT hay Passport?

• Nhẹ và đơn giản: Sanctum được thiết kế riêng cho SPA và mobile API — không cồng kềnh như Passport.
• Hỗ trợ đa hình (Polymorphic Token): Trong dự án có nhiều loại tài khoản (Admin, Sinh viên, Giảng viên, Doanh nghiệp...) — Sanctum lưu token kèm tokenable_type và tokenable_id, tự động nhận diện đúng model mà không cần bảng users chung.
• Tích hợp sẵn trong Laravel: Không cần cài thêm thư viện bên ngoài.

MySQL (Cơ sở dữ liệu)

Tại sao chọn MySQL?

• Hệ quản trị cơ sở dữ liệu quan hệ phổ biến nhất, phù hợp với đặc tính dữ liệu có cấu trúc rõ ràng (sinh viên, đề tài, thực tập...).
• Tích hợp tốt với Laravel Eloquent ORM.

---

Frontend

React 19 + Vite 7

React là thư viện JavaScript của Meta để xây dựng giao diện theo mô hình Component.

Tại sao chọn React?

• Component-based: Chia giao diện thành các thành phần tái sử dụng (nút, bảng, form...), dễ bảo trì và mở rộng.
• React 19 — phiên bản mới nhất với nhiều cải tiến về hiệu năng và Server Components.
• Cộng đồng lớn nhất trong các JS framework hiện tại.

Tại sao chọn Vite thay vì Create React App?

• Khởi động cực nhanh: Vite sử dụng ES Module, tốc độ hot-reload nhanh hơn CRA nhiều lần.
• Build production nhẹ và tối ưu hơn.

TailwindCSS 4 (Styling)

Tại sao chọn Tailwind?

• Viết CSS trực tiếp trong JSX bằng class có sẵn — không cần tạo file .css riêng.
• Nhất quán về design system, dễ responsive.
• Tailwind v4 là phiên bản mới nhất, nhanh hơn đáng kể so với v3.

shadcn/ui (UI Components)

Tại sao chọn shadcn/ui?

• Bộ component đẹp, chuẩn accessibility, xây dựng trên Radix UI.
• Code component được copy thẳng vào project — không cần import từ npm, toàn quyền tùy chỉnh.
• Kết hợp tốt với TailwindCSS.

Các thư viện hỗ trợ khác

Thư viện	Mục đích
react-router-dom v7	Điều hướng trang (routing)
axios	Gọi HTTP request đến API
zustand	Quản lý state toàn cục (lưu token, thông tin user đăng nhập)
react-hook-form + yup	Xử lý và validate form
@tanstack/react-table	Hiển thị bảng dữ liệu phức tạp (phân trang, filter...)
sonner	Hiển thị thông báo toast
lucide-react	Bộ icon đẹp, nhẹ

---

Hạ tầng (Infrastructure)

Docker + Docker Compose

Tại sao chọn Docker?

• Đồng nhất môi trường: Mọi thành viên trong nhóm chạy đúng cùng một môi trường (PHP, MySQL, v.v.) — không còn lỗi "chạy được trên máy tôi nhưng không chạy trên máy anh".
• Dễ triển khai: Chỉ cần một lệnh docker compose up là toàn bộ hệ thống (Laravel API + MySQL) khởi động.
• Phù hợp cho môi trường phát triển nhóm.

---

Tóm tắt stack

Tầng	Công nghệ
Frontend	React 19, Vite 7, TailwindCSS 4, shadcn/ui
Backend	PHP 8.2, Laravel 12, Laravel Sanctum
Database	MySQL
Infra / DevOps	Docker, Docker Compose
Giao tiếp	RESTful API (JSON over HTTP)