Content is user-generated and unverified.

Quy tắc chuẩn thiết kế Frontend & Backend

1. Định dạng ngày tháng

Trường hợp	Frontend Display	Backend API	Database Storage	Ví dụ
Ngày hiển thị	`dd/MM/yyyy`	`ISO 8601`	`DATETIME/TIMESTAMP`	`15/07/2025`, `2025-07-15T10:30:00Z`
Ngày sinh	`dd/MM/yyyy`	`yyyy-MM-dd`	`DATE`	`15/07/1990`, `1990-07-15`
Thời gian realtime	`HH:mm dd/MM/yyyy`	`ISO 8601`	`TIMESTAMP`	`10:30 15/07/2025`, `2025-07-15T10:30:00Z`
Ngày tạo/cập nhật	`dd/MM/yyyy HH:mm`	`ISO 8601`	`TIMESTAMP`	`15/07/2025 10:30`, `2025-07-15T10:30:00Z`

2. Quy tắc chữ hoa/thường

Trường hợp	Frontend	Backend	Quy tắc	Ví dụ
Email	`lowercase`	`lowercase`	Luôn chuyển về lowercase	`user@example.com`
Username	`lowercase`	`lowercase`	Chỉ cho phép a-z, 0-9, _	`john_doe123`
Password	`giữ nguyên`	`hash + salt`	Không thay đổi case	`MyPassword123!`
URL/Slug	`lowercase`	`lowercase`	Lowercase, dấu gạch ngang	`bai-viet-moi`
Tên người	`Title Case`	`giữ nguyên`	Chữ đầu viết hoa	`Nguyễn Văn An`
Tên công ty	`giữ nguyên`	`giữ nguyên`	Theo đúng tên thương hiệu	`CÔNG TY ABC`
Code/ID	`UPPERCASE`	`UPPERCASE`	Mã định danh	`USER_001`, `ORD_20250715`

3. Định dạng tiền tệ

Loại tiền tệ	Frontend Display	Backend Storage	API Format	Ví dụ
VND	`123.456.789 ₫`	`DECIMAL(15,2)`	`number`	`1000000.00`
USD	`$1,234.56`	`DECIMAL(15,2)`	`number`	`1234.56`
EUR	`€1.234,56`	`DECIMAL(15,2)`	`number`	`1234.56`
Multi-currency	`123.456 VND`	`amount + currency`	`{amount: number, currency: string}`	`{amount: 1000000, currency: "VND"}`

4. Validation Rules

Field Type	Frontend Validation	Backend Validation	Regex Pattern	Ví dụ
Email	Required, Email format	Required, Email format, Unique	`^[^\s@]+@[^\s@]+\.[^\s@]+$`	`user@domain.com`
Phone (VN)	Required, 10-11 digits	Required, VN format	`^(0[3	5
Password	Min 8 chars, 1 upper, 1 lower, 1 number	Hash + Salt, Strength check	`^(?=.[a-z])(?=.[A-Z])(?=.\d)[a-zA-Z\d@$!%?&]{8,}$`	`MyPass123!`
URL	Valid URL format	Valid URL, Sanitize	`^https?://.*`	`https://example.com`
Số CMND/CCCD	9 hoặc 12 số	Required, Unique	`^[0-9]{9}$	^[0-9]{12}$`

5. Naming Conventions

Scope	Convention	Format	Ví dụ
Database Tables	`snake_case`	Số nhiều	`users`, `order_items`
Database Columns	`snake_case`	Số ít	`user_id`, `created_at`
API Endpoints	`kebab-case`	RESTful	`/api/v1/users`, `/api/v1/order-items`
JSON Fields	`camelCase`	Số ít	`userId`, `createdAt`
CSS Classes	`kebab-case`	BEM methodology	`.user-card`, `.btn--primary`
JavaScript Variables	`camelCase`	Descriptive	`userInfo`, `isLoggedIn`
JavaScript Functions	`camelCase`	Verb + noun	`getUserInfo()`, `validateEmail()`
JavaScript Constants	`UPPER_SNAKE_CASE`	Descriptive	`API_BASE_URL`, `MAX_FILE_SIZE`

6. File & Folder Structure

Scope	Convention	Format	Ví dụ
Frontend Components	`PascalCase`	Descriptive	`UserCard.vue`, `LoginForm.jsx`
Frontend Pages	`PascalCase`	Descriptive	`HomePage.vue`, `UserProfile.jsx`
Frontend Utils	`camelCase`	Descriptive	`formatDate.js`, `validateEmail.js`
Backend Models	`PascalCase`	Singular	`User.php`, `OrderItem.js`
Backend Controllers	`PascalCase`	Controller suffix	`UserController.php`, `AuthController.js`
Backend Services	`PascalCase`	Service suffix	`UserService.php`, `EmailService.js`
Images	`kebab-case`	Descriptive	`user-avatar.jpg`, `logo-primary.png`
CSS/SCSS Files	`kebab-case`	Descriptive	`user-card.scss`, `main-layout.css`

7. Status & State Management

Trạng thái	Frontend Display	Backend Value	Color Code	Ví dụ
Active	`Hoạt động`	`active`	`#28a745`	User status
Inactive	`Không hoạt động`	`inactive`	`#6c757d`	User status
Pending	`Đang chờ`	`pending`	`#ffc107`	Order status
Completed	`Hoàn thành`	`completed`	`#28a745`	Order status
Cancelled	`Đã hủy`	`cancelled`	`#dc3545`	Order status
Draft	`Bản nháp`	`draft`	`#6c757d`	Content status
Published	`Đã xuất bản`	`published`	`#28a745`	Content status

8. Error Handling

Loại lỗi	Frontend Message	Backend Response	HTTP Status	Ví dụ
Validation	`Vui lòng nhập email hợp lệ`	`{field: "email", message: "Invalid email format"}`	`400`	Email format
Authentication	`Vui lòng đăng nhập`	`{message: "Unauthorized"}`	`401`	Login required
Authorization	`Bạn không có quyền thực hiện thao tác này`	`{message: "Forbidden"}`	`403`	Access denied
Not Found	`Không tìm thấy dữ liệu`	`{message: "Resource not found"}`	`404`	Resource missing
Server Error	`Đã có lỗi xảy ra, vui lòng thử lại`	`{message: "Internal server error"}`	`500`	System error

9. API Response Format

Trạng thái	Format	Ví dụ
Success	`{success: true, data: {}, message: ""}`	`{success: true, data: {user: {...}}, message: "User created successfully"}`
Error	`{success: false, error: {}, message: ""}`	`{success: false, error: {field: "email"}, message: "Email already exists"}`
Pagination	`{success: true, data: [], pagination: {}}`	`{success: true, data: [...], pagination: {page: 1, limit: 10, total: 100}}`

10. Security Standards

Scope	Rule	Implementation	Ví dụ
Password	Min 8 chars, complexity	Hash với bcrypt/argon2	`bcrypt.hash(password, 12)`
API Keys	Environment variables	Không hardcode	`process.env.API_KEY`
SQL Injection	Prepared statements	Parameterized queries	`SELECT * FROM users WHERE id = ?`
XSS	Input sanitization	HTML encoding	`htmlspecialchars($input)`
CSRF	Token validation	CSRF tokens	`csrf_token()`
CORS	Restricted origins	Whitelist domains	`origin: ['https://mydomain.com']`

11. Performance Guidelines

Scope	Rule	Implementation	Ví dụ
Database	Index optimization	Index các column thường query	`CREATE INDEX idx_user_email ON users(email)`
API	Caching	Redis/Memcached	`cache.set('user:123', userData, 3600)`
Frontend	Lazy loading	Dynamic imports	`const Component = lazy(() => import('./Component'))`
Images	Optimization	WebP format, compression	`image.webp`, `quality: 80`
Bundle	Code splitting	Chunk optimization	`splitChunks: {chunks: 'all'}`

12. Accessibility (A11y)

Element	Requirement	Implementation	Ví dụ
Images	Alt text	`alt` attribute	`<img src="..." alt="User avatar">`
Forms	Labels	`label` for inputs	`<label for="email">Email</label>`
Buttons	Descriptive text	Clear action	`<button>Đăng nhập</button>`
Colors	Contrast ratio	Min 4.5:1	`color: #333; background: #fff;`
Focus	Keyboard navigation	Tab order	`tabindex="0"`

Lưu ý quan trọng:

Luôn validate dữ liệu ở cả frontend và backend
Sử dụng TypeScript để type safety
Implement logging đầy đủ cho debug
Regular security audit và dependency updates
Test coverage tối thiểu 80%
Document tất cả API endpoints
Backup database định kỳ

Content is user-generated and unverified.

Quy tắc chuẩn thiết kế Frontend & Backend | Claude