Dareplay Tournament Frontend

Frontend UI cho Dareplay Tournament Frontend, sử dụng các công nghệ sau:

• ViteJS
• React
• Typescript
• TailwindCSS
• Ant-Design

Cài đặt môi trường

• Cài đặt NodeJS. Khuyến cáo sử dụng nodenv:

nodenv install 16.14.0

• Hoặc tải trực tiếp từ: https://nodejs.org/en/

Lấy các biến môi trường

Các biến môi trường (dùng cho step ngay phía dưới) nằm ở đây.

Khởi chạy môi trường dev

• Clone project:

git clone [email protected]:dare-dev/dareplay-tournament.git

• Cài đặt dependency:

npm ci

• Chạy ở môi trường dev (cổng mặc định là 3000):

cp .env.dev .env
npm run dev

• Build ra bundle HTML CSS cho production:

npm run build

• Chạy storybook (để preview component, chức năng,...)

npm run storybook

Sau đó mở localhost ở cổng 6006, có thể tùy chỉnh ở file package.json

Cấu trúc project

src
├── app.tsx
├── dapp
│   └── provider
├── favicon.svg
├── datasource
├── features
│   ├── authen-page
│   ├── farming
│   ├── game-events
│   ├── game-page
│   ├── ido
│   ├── ino
│   └── settings
├── index.css
├── layouts
│   ├── authen-layout.tsx
│   └── guest-layout.tsx
├── localization
├── logo.svg
├── main.tsx
├── shared
│   ├── components
│   ├── hooks
│   └── themes
├── types.d.ts
└── vite-env.d.ts

Mục tiêu: Chia các thành phần của project sao cho mỗi thư mục con của src/ có thể được tách ra làm module riêng, hoặc thậm chí tạo package npm riêng sau này để có thể tái sử dụng. Bao gồm:

• dapp: Chứa các contracts, các hook, config các chain,... , để tương tác với blockchain / ví.
• features: Chứa các trang (route) chính và các component con (không tái sử dụng được) trong các trang đó. Mỗi page sẽ có một folder riêng, file index.tsx export dạng default bên ngoài và các component con nằm trong thư mục cùng cấp với file index đó.
• datasource: Chứa các module liên quan đến gửi/nhận dữ liệu. Sẽ có 3 folder con, tuỳ mục đích sử dụng:
  • remote: Chứa các http client / api client để gửi / nhận dữ liệu từ các server remote, có thể là qua HTTP / FTP,...
  • local: Chứa các helper / utility để lấy dữ liệu persistent từ local (có thể là localStorage của trình duyệt, hoặc cookie, local database,...)
• layouts: Chứa các file layout trang, thường chỉ có 2 loại là authen và guest layout, sử dụng tương ứng cho: Các trang hiển thị sau khi đăng nhập và trước khi đăng nhập.
• localization: Chứa các file translation, config để làm module đa ngôn ngữ. Các file translation nên để dạng json và có khuôn mẫu giống nhau.
• shared: Bao gồm các folder con tương ứng nhu sau:
  • components: Chứa các component tái sử dụng nhiều lần, hoặc các component wrap các component khác từ third party.
  • hooks: Chứa các hook (cũng có thể tái sử dụng nhiều lần ở các project khác nhau), như hook quản lý debounce, hook chạy interval,...
  • themes: Chứa thông tin về theming, palette màu sắc, kích cỡ chữ, kiểu màu sáng / tối,...

Lưu ý và quy ước

Project sử dụng 2 framework cho UI là Ant-Design (antd) và TailwindCSS (tailwind). Mục đích là để có thể code component nhanh và có thể gỡ bỏ / thay thế sau này nếu không phù hợp. Tuy nhiên do 2 framework này có một số cơ chế chung (như tên class trong className cả hai đều có) nên có một số quy ước như sau để tránh conflict:

• Chỉ sử dụng các utility class name của Tailwind. Đọc tài liệu tham khảo tại đây.
• Tránh sử dụng các class name có prefix là ant- vì sẽ trùng với các class name của ant design.
• Không sử dụng các component import từ ant design trực tiếp mà viết wrapper trong shared/components hoặc thư mục con trong features/ tương ứng.
• Tuân thủ design guideline từ thiết kế của designer (bảng màu, số lượng font chữ, các cỡ chữ,...). Tốt nhất là define (hoặc viết nếu đã có sẵn) vào themes/ để tái sử dụng.

Link tham khảo

ViteJS IceStark: FAQ | Docs

Backend API Docs

Link

Authors

• @lchenrique
• Kelvin Pham (DareNFT)

Copyright

Copyrights (c) 2022 - DareNFT - Alpha Waves PTE. LTD