Tạo base theo công nghệ dưới đây

[yopaz-binhlt]

• Nextjs phiên bản mới nhất
• Material tailwind (https://www.material-tailwind.com/docs/react/installation)
• React hook form + yup (https://react-hook-form.com/)
• Redux toolkit (https://redux-toolkit.js.org/)
• Atomic design (https://viblo.asia/p/atomic-design-voi-react-YWOZrB2pZQ0)

[yopaz-minhbt]

Đề xuất sử dụng các packages sau thay thế:

• UI Components Library: shadcn/ui
• Form handing + validation: React Hook Form + Zod
• State management: TanstackQuery + Zustand()
• HTTP client fetching: Axios
• Css utility: (Tailwind)[https://tailwindcss.com/]

Lý do (so sánh với các package tương ứng a đề cập bên trên):

• shadcn/ui:
  1. Dùng component nào, cài component đó -> nhẹ hơn cài cả lib
  2. Không phụ thuộc version (MUI có bị conflict khi cài @type/react ở những version mới), shadcn/ui component đc cài lẻ nên ko phụ thuộc nhiều version
  3. Nhiều star trên github hơn -> community mạnh hơn, issue search dễ hơn
• zod:
  1. Là thư viện hỗ trợ validate cho Typescript, yup phù hợp cho vanilla JS hơn. https://zod.dev/?id=yup
• TanstackQuery:
  1. Hỗ trợ fetching, caching rất tốt phía client, cực nhiều features hay ho.
• Zustand:
  1. Dễ triển khai hơn Redux, nhẹ hơn và hạn chế re-render component vì nó quản lý state bằng hook. Trong khi đó, redux sẽ có 1 trung tâm store ở global. Khiến nó re-render nhiều hơn.
  2. Cá nhân e thấy TanstackQuery + Zustand > redux-toolkit

Tất cả packages ở trên đều cực nổi mấy năm gần đây, nên việc debug hay research đều rất ok ạ.