Giao diện mới của Back Office, xây dựng lại với cấu trúc tốt hơn để dễ dàng bảo trì và mở rộng hơn.
- Đánh giá dự án cũ & mục tiêu phát triển dự án mới
- Công nghệ sử dụng
- Quy tắc phát triển
- Tài liệu tham khảo
Nêu ra những đều dự án cũ còn thiếu sót và những điểm đã được cải thiện trong dự án mới.
- Cấu trúc code còn khá lộn xộn, khó khăn trong việc tìm kiếm và bảo trì.
- Thiếu sử dụng TypeScript, dẫn đến nhiều lỗi không mong muốn trong quá trình phát triển.
- Sử dụng React saga một cách không hiệu quả. Không thực hiện tốt việc quản lý state, khiến cho việc theo dõi và cập nhật dữ liệu trở nên phức tạp.
- Thiếu các thành phần giao diện chung, dẫn đến việc lặp lại code và không đồng nhất trong giao diện người dùng.
- Không có đánh giá những lần contribute, làm giảm chất lượng code.
- Sử dụng TypeScript cho tất cả các tệp mã nguồn. Hạn chế các lỗi không mong muốn và cải thiện khả năng bảo trì.
- Tổ chức cấu trúc code tường minh, không mất nhiều thơi gian để đọc hiểu và tìm kiếm.
- Tạo ra bộ giao diện chung để tái sử dụng, giảm thiểu việc lặp lại code và đảm báo tính đồng nhất.
- Phát triển theo mô hình feature-based, giúp quản lý và phát triển các tính năng dễ dàng hơn.
- Cố gắng duy trì chất lượng code cao thông qua việc đánh giá các lần đóng góp (code reviews).
Sau đây là những thư viện chính được sử dụng trong dự án:
- React 19
- TanStack Query
- TanStack Router (File-based routing)
- TanStack Table
- Mantine UI
Còn nhiều thư viện khác được sử dụng trong dự án, vui lòng tham khảo file package.json để biết thêm chi tiết.
- Tuân thủ các quy tắc về viết code và cấu trúc dự án đã đề ra.
- Đọc các tài liệu của các thư viện để hiểu được cách sử dụng (nên đọc lưới qua lần đầu để nắm các tính năng, sau đó đọc kỹ khi cần sử dụng).
- Luôn bật auto format để các bản code được đồng nhất về định dạng.
- Nếu sử dụng AI phải nắm rõ code được AI tạo ra, không nên sử dụng mù quáng.
Dự án được tổ chức theo cấu trúc feature-based, giúp dễ dàng quản lý và phát triển các tính năng riêng biệt. Dưới đây là cấu trúc thư mục chính trong dự án:
Ngoài ra còn các thư mục kèm theo khác.
src/
├── assets/ # Tài nguyên tĩnh (hình ảnh, biểu tượng, v.v.)
├── components/ # Các thành phần giao diện chung tái sử dụng được
├── features/ # Các tính năng chính của ứng dụng, mỗi tính năng trong một thư mục riêng
├── routes/ # Định tuyến ứng dụng (sử dụng TanStack Router)
Định hướng sẽ không sử dụng trực tiếp các component từ thư viện UI (như Mantine) mà sẽ tạo các custom input component riêng. Sau đó sẽ sử dụng các custom input component này trong toàn bộ dự án để đảm bảo tính đồng nhất và dễ dàng bảo trì.
UI Library Component --> Custom Component (cs-**.tsx) --> Form Component (field-**.tsx)