1. Giới thiệu

• Hệ thống Quản lý sinh viên gồm hai thành phần chính: Frontend và Backend.
• Backend (Node.js/Express + MongoDB): Đảm nhiệm xử lý nghiệp vụ (business logic), quản lý truy xuất dữ liệu (data access), cung cấp API cho frontend qua RESTful.
• Frontend (Next.js/React): Đảm nhiệm giao diện người dùng (UI/UX), thực hiện các thao tác CRUD qua API, hiển thị dữ liệu và cung cấp trải nghiệm người dùng.

2. Kiến trúc hệ thống

Ứng dụng tuân thủ mô hình kiến trúc phân tán (distributed architecture), tách biệt rõ ràng giữa tầng trình bày (presentation layer) và tầng xử lý nghiệp vụ (business logic layer). Điều này giúp tăng khả năng maintainability, scalability, testability và đảm bảo separation of concerns.

+-------------------+         HTTP (RESTful API)         +-------------------+
|   Frontend (FE)   | <------------------------------->  |   Backend (BE)    |
|  Next.js / React  |                                    | Node.js / Express |
+-------------------+                                    +-------------------+
                                                                   |
                                                                   v
+-------------------+     +-------------------+     +-------------------+     +-------------------+     +-------------------+
|   Presentation,   |     |    Application    |     |      Domain       |     |  Infrastructure   |     |      Database     |
|   (controllers,   | --> |    (usecases,     | --> |     (entities,    | --> |  (repositories)   | --> |     (MongoDB)     |
|    middlewares,   |     |    validators)    |     |    repositories)  |     |                   |     |                   |
|    routes)        |     |                   |     |                   |     |                   |     |                   |
+-------------------+     +-------------------+     +-------------------+     +-------------------+     +-------------------+
         |                          |                         |                         |                        |
         +-------------------------------------------------------------------------------------------------------+
                                                              |
                                                   +---------------------+
                                                   |       Shared        |
                                                   | (constants, types,  |
                                                   |       utils)        |
                                                   +---------------------+

Hệ thống bao gồm 2 project:

• Frontend (FE): Xây dựng bằng Next.js/React, tổ chức theo hướng component, chia nhỏ UI, sử dụng service để gọi API.
• Backend (BE): Xây dựng bằng Node.js/Express, tổ chức theo Clean Architecture với các tầng rõ ràng: Presentation, Application, Domain, Infrastructure, Shared.

Phía FE giao tiếp với phía BE thông qua giao thức HTTP (RESTful API).

3. Frontend (Next.js/React - Component-based Architecture)

Frontend sử dụng kiến trúc component-based, tách biệt rõ ràng giữa UI, logic xử lý và gọi API.

3.1. Tổng quan các thành phần

Components/Pages: