Công nghệ sử dụng:

• Nextjs Typescript (Using Pages Router)

• tailwindcss style giao diện

  • plugins:tailwind-scrollbar
  • plugins:tailwindcss-animate
  • plugins:tailwind-merge

• react-aria-components unstyled components

• react-aria xử lý các hành động với các components

• react-stately xử lý trạng thái trong components stately

  • rac-tailwind

• react-hook-form xử lý thao tác với form

• Yup xác thực dữ liệu

• Dayjs xử lý các tác vụ thời gian

• react-use xử lý các hooks phổ biến

Cấu trúc dự án

.
├── src
│   ├── components
│   ├── app
│   ├── public
│   ├── redux
│   └── [..]
└── [..]

Cài đặt

Cài lib

yarn install

Biến môi trường

Tạo file .env.local ở thư mục gốc, thêm các biến môi trường cần thiết:

NEXT_PUBLIC_API_ENDPOINT=https://development.imaxhitech.com:10000

Convention

• Sử dụng absolute import path @/*

  // Import bằng absolute path ✅
  import ABC from "@/components/layout/ABC";

• Các page (trang chính) sẽ được viết trong src/app/** như document của NextJS

• Trong src/app/_components/** chứa các component sử dụng xuyên suốt toàn trang

  Các components đều unstyled nên khi sử dụng cần thêm vào class tailwindcss để style đc như ý.

• Trong src/types định nghĩa các type sử dụng

  đặt tên type T${type_name} = {} để dễ dàng gợi ý từ VScode khi gõ T

• Internationalization (i18n) trong src/i18n/*

  sử dụng thông qua hooks useTranslation

• Gõ rafc-default để đc gợi ý snippet cấu trúc code cho file

  đc cài đặt ở trong ./.vscode/vscode.code-snippets

• Lint và format code:

  Lưu lại file sẽ đc tự động format code

  Các import đc tự sắp xếp và đc xóa những cái ko dùng đến

• Commit lint:

  type(scope?): subject

  với:

  • type là mộ trong những keyword dưới (tham khảo Angular)

    • build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
    • ci: Changes to our CI configuration files and scripts (example scopes: Gitlab CI, Circle, BrowserStack, SauceLabs)
    • chore: add something without touching production code (Eg: update npm dependencies)
    • docs: Documentation only changes
    • feat: A new feature
    • fix: A bug fix
    • perf: A code change that improves performance
    • refactor: A code change that neither fixes a bug nor adds a feature
    • revert: Reverts a previous commit
    • style: Changes that do not affect the meaning of the code (Eg: adding white-space, formatting, missing semi-colons, etc)
    • test: Adding missing tests or correcting existing tests scope là optional, phạm vi ảnh hưởng của commit hiện tại

  • subject là nội dung của commit

  # VD commit khi thêm tính năng gọi API login:
  git commit -m "feat: add call API login