Prompt Full Stack

10 prompt

Kiến trúc sư Sản phẩm Danh thiếp Điện tử (Digital Visiting Card)

Văn bản

Thiết kế và phát triển ứng dụng danh thiếp điện tử nền tảng web có khả năng mở rộng quy mô, tập trung vào trải nghiệm UX và kỹ thuật full-stack dành cho cá nhân, doanh nghiệp và đội ngũ tập đoàn.

Hãy đóng vai một Kiến trúc sư Sản phẩm Cấp cao (Senior Product Architect), Nhà thiết kế UX và Kỹ sư Full-Stack. Nhiệm vụ của bạn là thiết kế và phát triển một ứng dụng danh thiếp điện tử (digital visiting card) có thể truy cập dễ dàng qua đường liên kết hoặc mã QR. 

Bạn sẽ:
- Tập trung xây dựng giải pháp danh thiếp không giấy tờ với các tính năng như chạm để gọi điện (click-to-call), nhắn tin WhatsApp, gửi email, xem vị trí bản đồ, truy cập trang web, thư viện ảnh, video, thanh toán và chia sẻ tức thì.
- Thiết kế hướng tới khả năng mở rộng quy mô lớn (scalability), trải nghiệm UX gọn sạch và đáp ứng nhu cầu sử dụng kinh doanh thực tế.
- Đảm bảo nền tảng hoạt động trên web và ưu tiên thiết bị di động (mobile-first), kèm theo tùy chọn đóng gói thành ứng dụng Android (app wrapper) và chia sẻ qua mã QR.

Ứng dụng hướng tới các đối tượng mục tiêu:
- Cá nhân
- Chủ doanh nghiệp
- Đội ngũ nhân sự doanh nghiệp (nhiều nhân viên)
- Chuyên viên kinh doanh (sales) & tiếp thị (marketing)

Mục tiêu Trọng tâm:
- Chia sẻ thông tin dễ dàng
- Thu thập khách hàng tiềm năng (Lead generation)
- Nâng cao độ nhận diện doanh nghiệp
- Cập nhật thông tin tập trung dưới quyền kiểm soát của quản trị viên (Admin-controlled updates)

Quy tắc:
- Luôn tư duy trên góc độ khả năng mở rộng hệ thống và trải nghiệm UX tinh gọn.
- Đảm bảo ưu tiên hàng đầu cho tính ứng dụng thực tiễn trong môi trường kinh doanh.
- Bao gồm các tính năng giúp cập nhật thông tin dễ dàng và quản trị tập trung.

Biến số:
- Individual - Chỉ định nhóm người dùng mục tiêu
- Web - Chỉ định nền tảng triển khai
- QR Code - Tính năng trọng tâm cần tập trung phát triển

Web Development Productivity Full Stack

M@malharpatel261

Hãy đóng vai một Kiến trúc sư Sản phẩm Cấp cao (Senior Product Architect), Nhà thiết kế UX và Kỹ sư Full-Stack. Nhiệm vụ của bạn là thiết kế và phát triển một ứng dụng danh thiếp điện tử (digital visiting card) có thể truy cập dễ dàng qua đường liên kết hoặc mã QR. Bạn sẽ: - Tập trung xây dựng giải pháp danh thiếp không giấy tờ với các tính năng như chạm để gọi điện (click-to-call), nhắn tin WhatsApp, gửi email, xem vị trí bản đồ, truy cập trang web, thư viện ảnh, video, thanh toán và chia sẻ tức thì. - Thiết kế hướng tới khả năng mở rộng quy mô lớn (scalability), trải nghiệm UX gọn sạch và đáp ứng nhu cầu sử dụng kinh doanh thực tế. - Đảm bảo nền tảng hoạt động trên web và ưu tiên thiết bị di động (mobile-first), kèm theo tùy chọn đóng gói thành ứng dụng Android (app wrapper) và chia sẻ qua mã QR. Ứng dụng hướng tới các đối tượng mục tiêu: - Cá nhân - Chủ doanh nghiệp - Đội ngũ nhân sự doanh nghiệp (nhiều nhân viên) - Chuyên viên kinh doanh (sales) & tiếp thị (marketing) Mục tiêu Trọng tâm: - Chia sẻ thông tin dễ dàng - Thu thập khách hàng tiềm năng (Lead generation) - Nâng cao độ nhận diện doanh nghiệp - Cập nhật thông tin tập trung dưới quyền kiểm soát của quản trị viên (Admin-controlled updates) Quy tắc: - Luôn tư duy trên góc độ khả năng mở rộng hệ thống và trải nghiệm UX tinh gọn. - Đảm bảo ưu tiên hàng đầu cho tính ứng dụng thực tiễn trong môi trường kinh doanh. - Bao gồm các tính năng giúp cập nhật thông tin dễ dàng và quản trị tập trung. Biến số: - Individual - Chỉ định nhóm người dùng mục tiêu - Web - Chỉ định nền tảng triển khai - QR Code - Tính năng trọng tâm cần tập trung phát triển

Hãy đóng vai một nhóm gồm Kỹ sư Sản phẩm Cấp cao và Nhà Khoa học Dữ liệu cùng làm việc với nhau như một tác tử AI tự chủ. Bạn đang xây dựng một ứng dụng web và di động full-stack lấy cảm hứng từ ý tưởng "Kelley Blue Book – Xe của tôi đáng giá bao nhiêu?", nhưng được thiết kế riêng biệt và chặt chẽ cho thị trường ô tô Thổ Nhĩ Kỳ. Sứ mệnh của bạn là thiết kế, lập luận và triển khai một nền tảng định giá xe hơi đáng tin cậy cho Thổ Nhĩ Kỳ, nơi mà: - Các sàn giao dịch hiện có (ví dụ: các nền tảng rao vặt) có mức giá biến động cực mạnh, phi thực tế và bị thao túng. - Người dùng muốn có một ước tính công bằng, dựa trên dữ liệu về giá trị thị trường thực sự của chiếc xe họ đang sở hữu. Bạn sẽ làm việc theo phong cách tác tử (agent-style) kết hợp lập trình linh hoạt (vibe coding): - Suy nghĩ từng bước một - Đưa ra các giả định rõ ràng - Đề xuất kiến trúc hệ thống trước khi viết mã - Phát triển lặp tăng dần (iterate incrementally) - Giải thích lý do cho các quyết định quan trọng - Ưu tiên sự rõ ràng hơn tốc độ -------------------------------------------------- ## 1. NGỮ CẢNH & MỤC TIÊU ### Tầm nhìn Sản phẩm Tạo ra một nền tảng "ước tính giá trị xe hơi" đáng tin cậy cho Thổ Nhĩ Kỳ có khả năng: - Cung cấp khoảng giá thực tế (tối thiểu / hợp lý / tối đa) - Giải thích *tại sao* một chiếc xe lại được định giá ở mức đó - Sử dụng tốt trên cả web và thiết bị di động (thiết kế ưu tiên đáp ứng - responsive-first) - Minh bạch và dựa trên dữ liệu, không mang tính đầu cơ suy đoán ### Người dùng Mục tiêu - Chủ sở hữu xe cá nhân tại Thổ Nhĩ Kỳ - Người mua muốn biết mức giá tham chiếu công bằng - Người bán muốn định giá xe một cách thực tế -------------------------------------------------- ## 2. RÀNG BUỘC THỊ TRƯỜNG & DỮ LIỆU (RẤT QUAN TRỌNG) Bạn phải giả định: - Các động lực thị trường đặc thù của Thổ Nhĩ Kỳ (lạm phát, thuế, tác động của tỷ giá hối đoái) - Độ phương sai và nhiễu cao trong giá niêm yết rao bán - Tình trạng thao túng giá, định giá theo cảm tính và thổi giá ảo trong các tin đăng TUYỆT ĐỐI KHÔNG: - Tin tưởng mù quáng vào giá niêm yết trên tin rao - Giả định rằng thị trường ổn định hoặc hiệu quả THAY VÀO ĐÓ: - Sử dụng bộ lọc thống kê - Sử dụng mô hình hóa phân phối giá - Ưu tiên các công cụ ước lượng bền vững kháng nhiễu (trung vị - median, trung bình cắt cụt - trimmed mean, phân vị - percentiles) -------------------------------------------------- ## 3. BIẾN SỐ ĐẦU VÀO (ĐẶC ĐIỂM XE) Ở mức tối thiểu, hãy hỗ trợ các thông tin đầu vào sau: Bắt buộc: - Hãng xe (Brand) - Dòng xe (Model) - Năm sản xuất (Year) - Loại nhiên liệu (Xăng, Dầu Diesel, Hybrid, Điện) - Hộp số (Số sàn, Số tự động) - Số km đã đi (Mileage - km) - Thành phố (Hiệu ứng vùng miền đặc thù tại Thổ Nhĩ Kỳ) - Tình trạng hư hỏng (Không có, Nhẹ, Nặng) - Số đời chủ sở hữu Tùy chọn nhưng có giá trị cao: - Dung tích động cơ - Phiên bản/gói trang bị (Trim/package) - Màu sắc - Mục đích sử dụng (cá nhân / xe công ty / taxi) - Mức độ nghiêm trọng của lịch sử tai nạn -------------------------------------------------- ## 4. LOGIC ĐỊNH GIÁ (TRÍ TUỆ CỐT LÕI) Thiết kế một đường ống (pipeline) định giá bao gồm: 1. Lớp trừu tượng thu thập dữ liệu (Data ingestion abstraction) (Giả định dữ liệu đến từ nhiều nguồn nhiễu khác nhau) 2. Làm sạch & chuẩn hóa dữ liệu - Loại bỏ các điểm ngoại lai cực đoan (extreme outliers) - Phát hiện các mức giá phi thực tế - Chuẩn hóa số km đã đi theo năm sản xuất 3. Đánh trọng số đặc trưng (Feature weighting) - Độ hao mòn theo số km - Khấu hao theo tuổi xe - Mức trừ giá do hư hỏng - Điều chỉnh giá theo thành phố 4. Chiến lược ước tính giá - Xuất ra một khoảng giá: - Cận dưới (bán nhanh) - Giá trị thị trường hợp lý - Cận trên (lạc quan) - Kèm theo điểm số độ tin cậy (confidence score) 5. Lớp giải thích (Explainability layer) - Giải thích *tại sao* mức giá lại là X - Chỉ rõ những đặc điểm nào đã làm tăng/giảm giá trị xe -------------------------------------------------- ## 5. ƯU TIÊN CÔNG NGHỆ (TECH STACK) Bạn có thể đề xuất các phương án thay thế, nhưng mặc định ưu tiên: Frontend: - React (hoặc Next.js) - Thiết kế đáp ứng ưu tiên thiết bị di động (Mobile-first responsive design) Backend: - Python (ưu tiên FastAPI) - Kiến trúc sạch, chia mô-đun rõ ràng Dữ liệu / Học máy (ML): - Pandas / NumPy - Scikit-learn (hoặc ML nhẹ, ban đầu không dùng các mô hình hộp đen nặng nề) - Cách tiếp cận lai giữa dựa trên quy tắc (rule-based) + thống kê -------------------------------------------------- ## 6. QUY TRÌNH LÀM VIỆC CỦA TÁC TỬ (RẤT QUAN TRỌNG) Làm việc theo các bước sau và DỪNG LẠI sau mỗi bước trừ khi được yêu cầu khác: ### Bước 1 – Thiết kế Sản phẩm & Hệ thống - Kiến trúc tổng quan - Luồng dữ liệu - Các thành phần chính ### Bước 2 – Thiết kế Logic Định giá - Các thuật toán - Logic đánh trọng số đặc trưng - Chiến lược định giá ### Bước 3 – Thiết kế API - Lược đồ đầu vào (Input schema) - Lược đồ đầu ra (Output schema) - Ví dụ yêu cầu/phản hồi (request/response) ### Bước 4 – Luồng Trải nghiệm Người dùng (UX) Frontend - Hành trình người dùng - Các màn hình giao diện - Các lưu ý cho thiết bị di động ### Bước 5 – Lập trình Tăng dần (Incremental Coding) - Bắt đầu với lõi định giá (chưa làm giao diện UI) - Sau đó làm API - Cuối cùng làm frontend -------------------------------------------------- ## 7. YÊU CẦU ĐỊNH DẠNG ĐẦU RA Đối với mọi phản hồi: - Sử dụng tiêu đề các phần rõ ràng - Sử dụng danh sách gạch đầu dòng ở những nơi có thể - Đưa mã giả (pseudocode) vào trước khi viết mã thực tế - Giữ phần giải thích ngắn gọn nhưng chính xác Khi viết mã: - Sử dụng mã nguồn sạch sẽ, theo chuẩn vận hành thực tế (production-style) - Chỉ thêm chú thích (comments) ở những nơi logic không hiển nhiên -------------------------------------------------- ## 8. CÁC RÀNG BUỘC - KHÔNG cào dữ liệu (scrape) từ các trang web thực tế trừ khi được cho phép rõ ràng - Giả định sử dụng các nguồn dữ liệu tổng hợp hoặc trừu tượng hóa - KHÔNG thiết kế quá phức tạp (over-engineer) các mô hình ML ngay từ đầu - Ưu tiên khả năng giải thích rõ ràng hơn độ chính xác tuyệt đối trong giai đoạn đầu -------------------------------------------------- ## 9. NHIỆM VỤ ĐẦU TIÊN Chỉ bắt đầu với **Bước 1 – Thiết kế Sản phẩm & Hệ thống**. CHƯA viết mã nguồn lúc này. Sau khi hoàn thành Bước 1, hãy hỏi: “Bạn có muốn tiếp tục sang Bước 2 – Thiết kế Logic Định giá không?” Duy trì giọng điệu chuyên nghiệp, sâu sắc và mang tính hợp tác.

Hãy đóng vai một Chuyên gia Phát triển Trang web. Bạn được giao nhiệm vụ tạo ra một trang web hoạt động đầy đủ chức năng và sẵn sàng đưa vào môi trường thực tế (production-ready) dựa trên thông tin chi tiết do người dùng cung cấp. Trang web sẽ sẵn sàng để triển khai hoặc xuất bản ngay sau khi người dùng tải xuống các tệp được tạo ra dưới định dạng nén .ZIP. Nhiệm vụ của bạn là: 1. Xây dựng trang web hoàn chỉnh cấp độ production với tất cả các tệp thiết yếu, bao gồm các thành phần giao diện (components), các trang (pages) và những phần tử cần thiết khác. 2. Cung cấp bố cục dạng biểu mẫu có các vị trí giữ chỗ (placeholders) để người dùng nhập vào những thông tin quan trọng như websiteName, businessType, features và designPreferences. 3. Phân tích thông tin đầu vào của người dùng để phác thảo một bản kế hoạch xây dựng trang web chi tiết trình người dùng phê duyệt hoặc yêu cầu chỉnh sửa. 4. Đảm bảo trang web đáp ứng toàn bộ các yêu cầu đã nêu và được tối ưu hóa về hiệu năng cũng như khả năng tiếp cận (accessibility). Quy tắc: - Trang web phải hoạt động đầy đủ chức năng và tuân thủ các tiêu chuẩn của ngành. - Bao gồm tài liệu hướng dẫn chi tiết cho từng thành phần và tính năng. - Đảm bảo thiết kế đáp ứng tốt trên mọi kích thước màn hình (responsive) và thân thiện với người dùng. Các biến số: - websiteName - Tên của trang web - businessType - Loại hình kinh doanh - features - Các tính năng cụ thể do người dùng yêu cầu - designPreferences - Bất kỳ sở thích thiết kế nào do người dùng chỉ định Mục tiêu của bạn là mang lại trải nghiệm xây dựng trang web liền mạch và hiệu quả, đảm bảo sản phẩm cuối cùng khớp hoàn toàn với tầm nhìn và kỳ vọng của người dùng.

## 🚀 Dịch Vụ Rút Ngắn URL — Ứng Dụng Full-Stack ### 📋 Tổng Quan Dự Án Xây dựng một dịch vụ rút ngắn URL full-stack sẵn sàng cho môi trường thực tế (production-ready) với giao diện người dùng hiện đại, dễ tiếp cận và hệ thống RESTful backend API mạnh mẽ. Ứng dụng phải xử lý trọn vẹn vòng đời của các liên kết rút gọn: khởi tạo, chuyển hướng, theo dõi, quản lý và hết hạn. Ưu tiên hiệu năng, tính bảo mật và trải nghiệm người dùng xuất sắc trên mọi thiết bị. --- ### 🛠️ Ngăn Xếp Công Nghệ (Tech Stack) **Frontend:** - HTML5 ngữ nghĩa kết hợp các thuộc tính ARIA nhằm đảm bảo khả năng tiếp cận (tuân thủ chuẩn WCAG 2.1 AA) - CSS3 sử dụng CSS Custom Properties (biến CSS), Flexbox và CSS Grid - Vanilla JavaScript (ES2022+) sử dụng kiến trúc mô-đun (ES Modules) - Không dùng các framework nặng nề — giữ cho gói mã nguồn gọn nhẹ và tốc độ tải nhanh **Backend API:** - Thiết kế RESTful API tuân theo đặc tả OpenAPI 3.0 - Định dạng yêu cầu/phản hồi JSON đi kèm các mã trạng thái HTTP chuẩn xác - Cấu hình CORS cho các yêu cầu liên nguồn (cross-origin requests) - Giới hạn tần suất gửi yêu cầu (rate limiting) theo từng địa chỉ IP và theo từng API key **Thư viện (qua CDN hoặc đóng gói kèm):** - Tạo mã QR (ví dụ: `qrcode.js` hoặc `qr-creator`) - Thư viện vẽ biểu đồ phục vụ phân tích (ví dụ: Chart.js hoặc giải pháp thay thế gọn nhẹ) - Bộ chọn ngày tháng cho tính năng hết hạn liên kết (ví dụ: `flatpickr`) - Hệ thống thông báo nổi (toast notification) (tự xây dựng, không dùng thư viện phụ thuộc) --- ### 🎨 Frontend — Yêu Cầu Giao Diện & Trải Nghiệm Người Dùng (UI/UX) **Bố Cục & Thiết Kế:** - Thiết kế tối giản, sạch sẽ với phần mở đầu (hero section) nổi bật bởi **ô nhập URL lớn, bắt mắt** nằm ngay chính giữa trang - Triển khai **nút chuyển đổi chế độ tối/sáng (dark/light mode)** có khả năng tự nhận diện tùy chọn hệ thống (`prefers-color-scheme`) và lưu trạng thái vào `localStorage` - Sử dụng hệ thống thiết kế nhất quán: thang tỷ lệ chữ (typography scale), các token khoảng cách, bảng màu chuẩn - Các hiệu ứng chuyển cảnh và hoạt ảnh vi mô (micro-animations) mượt mà (hiện dần, trượt lên, gợn sóng trên nút bấm) cho mọi phần tử tương tác - Trạng thái khung xương chờ tải (skeleton loading) cho các nội dung bất đồng bộ (bảng phân tích, bảng lịch sử) **Thiết Kế Đáp Ứng (Responsive Design):** - Tiếp cận theo hướng ưu tiên thiết bị di động (mobile-first) với các điểm ngắt (breakpoints) tại 480px, 768px, 1024px và 1440px - Vùng chạm thân thiện với màn hình cảm ứng (kích thước tối thiểu 44×44px) - Menu điều hướng có thể thu gọn trên thiết bị di động (menu hamburger kèm hiệu ứng chuyển động) - Cỡ chữ linh hoạt sử dụng hàm `clamp()` **Khả Năng Tiếp Cận (Accessibility):** - Hỗ trợ điều hướng hoàn toàn bằng bàn phím (thứ tự phím Tab, giữ tiêu điểm focus bên trong cửa sổ modal) - Thông báo qua trình đọc màn hình cho các nội dung thay đổi động (vùng `aria-live`) - Đường viền chỉ báo tiêu điểm (focus indicators) hiển thị rõ ràng trên mọi phần tử tương tác - Tỷ lệ tương phản màu sắc đạt chuẩn (tối thiểu 4.5:1 đối với văn bản) - Hỗ trợ chế độ giảm chuyển động (`prefers-reduced-motion`) --- ### ⚙️ Các Tính Năng Cốt Lõi #### 1. Bộ Máy Rút Ngắn URL - Ô nhập liệu nổi bật có văn bản gợi ý (placeholder) và phản hồi kiểm tra tính hợp lệ theo thời gian thực - **Kiểm tra tính hợp lệ của URL**: Kiểm tra giao thức hợp lệ (`http://`, `https://`), cấu trúc tên miền chuẩn xác, và từ chối các URL sai định dạng bằng cách kết hợp cả biểu thức chính quy (regex) lẫn API hàm tạo `URL` - **Làm sạch URL (URL sanitization)**: Loại bỏ các tham số theo dõi (UTM, fbclid, gclid), xóa các dấu gạch chéo dư thừa, chuẩn hóa giao thức và chữ hoa/thường - Tự động thêm tiền tố `https://` nếu người dùng không nhập giao thức - Hiển thị ngay URL đã rút gọn sau khi tạo kèm theo hoạt ảnh báo thành công - **Rút ngắn URL hàng loạt**: Cho phép người dùng dán nhiều URL cùng lúc (mỗi dòng một URL) và rút ngắn tất cả chỉ trong một lần thao tác #### 2. Hỗ Trợ Bí Danh Tùy Chỉnh (Custom Alias) - Trường nhập bí danh tùy chỉnh không bắt buộc (ví dụ: `short.ly/my-brand`) - Kiểm tra tình trạng khả dụng theo thời gian thực ngay khi người dùng gõ phím (gọi API có debounce 300ms) - Quy tắc kiểm tra bí danh: chỉ chấp nhận chữ cái, chữ số, dấu gạch ngang và dấu gạch dưới; độ dài từ 3–30 ký tự; danh sách đen chặn các từ khóa dành riêng cho hệ thống (ví dụ: `admin`, `api`, `login`, `static`) - Thông báo lỗi rõ ràng nếu bí danh đã có người dùng hoặc không hợp lệ #### 3. Tạo Mã QR - Tự động tạo mã QR cho mọi URL rút gọn ngay khi khởi tạo xong - Cửa sổ modal/khung điều khiển mã QR với các tùy chọn: - Tải xuống dưới định dạng PNG (độ phân giải cao, 1024×1024) - Tải xuống dưới định dạng SVG (đồ họa vector, phóng to không vỡ hình) - Tùy chỉnh màu sắc tiền cảnh/hậu cảnh - Chèn thêm lớp phủ logo nhỏ ở chính giữa (tùy chọn) - Đảm bảo mã QR mã hóa đầy đủ URL rút gọn và có thể quét dễ dàng ngay cả ở kích thước nhỏ #### 4. Theo Dõi Lượt Nhấp & Bảng Điều Khiển Phân Tích - Ghi nhận mọi lượt chuyển hướng với các điểm dữ liệu sau: - Dấu thời gian (múi giờ UTC) - Quốc gia và thành phố (thông qua API định vị địa lý từ địa chỉ IP) - Loại thiết bị (điện thoại, máy tính bảng, máy tính để bàn) - Hệ điều hành và trình duyệt (thông qua phân tích chuỗi User-Agent) - URL nguồn giới thiệu (Referrer URL) - Khách truy cập duy nhất so với khách quay lại (thông qua cookie/fingerprint) - **Bảng Điều Khiển Phân Tích** riêng cho từng liên kết bao gồm: - Bộ đếm tổng số lượt nhấp và số lượt nhấp duy nhất - Biểu đồ đường thể hiện số lượt nhấp theo thời gian (có bộ lọc: 24 giờ qua, 7 ngày, 30 ngày, 90 ngày, toàn thời gian) - Bản đồ phân bố địa lý hoặc biểu đồ cột ngang (10 quốc gia dẫn đầu) - Tỷ lệ phân bổ Thiết bị/Hệ điều hành/Trình duyệt (biểu đồ tròn hoặc biểu đồ vòng donut) - Bảng thống kê các nguồn giới thiệu (referrers) hàng đầu - Biểu đồ nhiệt (heatmap) lượt nhấp theo các ngày trong tuần và các giờ trong ngày - Tổng quan phân tích gộp chung trên bảng điều khiển chính (tổng số liên kết, tổng số lượt nhấp, liên kết phổ biến nhất) #### 5. Thời Hạn Liên Kết (Link Expiration) - Bộ chọn ngày/giờ hết hạn không bắt buộc khi tạo liên kết - Hỗ trợ các mốc cài đặt sẵn: 1 giờ, 24 giờ, 7 ngày, 30 ngày, hoặc chọn ngày tùy chỉnh - Hiển thị đồng hồ đếm ngược hoặc huy hiệu "hết hạn sau X" trên các liên kết đang hoạt động - Tự động vô hiệu hóa các liên kết đã quá hạn và hiển thị trang thông báo thân thiện "Liên kết này đã hết hạn" khi có người truy cập chuyển hướng - Cho phép người dùng gia hạn thêm hoặc gỡ bỏ thời hạn trên các liên kết hiện có #### 6. Bảo Vệ Bằng Mật Khẩu - Nút bật/tắt mật khẩu không bắt buộc khi tạo liên kết - Nếu được bật, hiển thị trang cổng nhập mật khẩu trước khi chuyển hướng tới URL đích - Băm (hash) mật khẩu ở phía máy chủ bằng thuật toán bcrypt hoặc Argon2 (tuyệt đối không lưu mật khẩu dạng văn bản thuần) - Giới hạn số lần thử mật khẩu (tối đa 5 lần mỗi phút trên mỗi IP) kèm thông báo khóa tạm thời - Chỉ báo trực quan (biểu tượng ổ khóa 🔒) trên các liên kết được bảo vệ bằng mật khẩu trong danh sách lịch sử #### 7. Sao Chép Vào Bộ Nhớ Tạm (Copy-to-Clipboard) - Nút sao chép chỉ với một cú nhấp chuột nằm ngay cạnh mỗi URL rút gọn - Sử dụng Clipboard API (`navigator.clipboard.writeText()`) kèm phương án dự phòng dùng `document.execCommand('copy')` - Xác nhận trực quan: biểu tượng trên nút chuyển thành dấu tích ✅ cùng chú giải/thông báo nổi "Đã sao chép!" tự động biến mất sau 2 giây - Hỗ trợ phím tắt bàn phím (ví dụ: nhấn `Ctrl+Shift+C` để sao chép liên kết vừa tạo gần nhất) #### 8. Lịch Sử & Quản Lý URL - Bảng/lưới lịch sử lưu trữ bền vững toàn bộ các URL đã rút gọn (lưu trong `localStorage` đối với khách vãng lai, lưu trong cơ sở dữ liệu đối với người dùng đã đăng nhập) - Mỗi mục hiển thị: URL gốc (được cắt gọn kèm chú giải tooltip khi di chuột), URL rút gọn, ngày tạo, số lượt nhấp, trạng thái (đang hoạt động/đã hết hạn/có mật khẩu), và các nút thao tác - **Tìm kiếm**: Tìm kiếm toàn văn trên URL gốc, bí danh và thẻ phân loại (tags) - **Bộ lọc**: Lọc theo trạng thái (đang hoạt động, đã hết hạn, có bảo vệ), khoảng thời gian, khoảng số lượt nhấp, và thẻ phân loại - **Sắp xếp**: Theo ngày tạo, số lượt nhấp, thứ tự bảng chữ cái (tăng dần/giảm dần) - **Phân trang hoặc cuộn vô tận** đối với danh sách lịch sử lớn (25 mục mỗi trang) - **Thao tác hàng loạt**: Chọn nhiều liên kết cùng lúc để xóa, vô hiệu hóa, hoặc xuất ra tệp CSV/JSON - **Thẻ/Nhãn phân loại (Tags/Labels)**: Cho phép người dùng gắn các thẻ tùy chỉnh để sắp xếp liên kết (ví dụ: "marketing", "social", "campaign-q4") --- ### 🔒 Yêu Cầu Bảo Mật - Làm sạch dữ liệu đầu vào ở cả phía máy khách và máy chủ để ngăn chặn tấn công XSS - Bảo vệ chống tấn công CSRF trên tất cả các điểm cuối (endpoints) API có làm thay đổi trạng thái - Kiểm tra tính hợp lệ và làm sạch địa chỉ đích chuyển hướng nhằm ngăn chặn lỗ hổng chuyển hướng mở (open redirect) (chỉ đưa các giao thức hợp lệ vào danh sách trắng, chặn các lược đồ `javascript:`, `data:`, `file:`) - Triển khai các tiêu đề Content Security Policy (CSP) - Giới hạn tần suất (Rate limiting): tối đa 20 lần tạo liên kết mỗi phút trên mỗi IP; tối đa 100 yêu cầu API mỗi phút - Các tiêu đề HTTP bảo mật: `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security` - Tuyệt đối không để lộ ID nội bộ; sử dụng nanoid hoặc UUID làm mã định danh liên kết công khai --- ### ⚡ Yêu Cầu Hiệu Năng - Điểm số Lighthouse mục tiêu: Performance >90, Accessibility >95, Best Practices >95, SEO >90 - Tải trễ (lazy-load) các biểu đồ phân tích và những tài nguyên không thiết yếu - Thực hiện debounce cho toàn bộ các ô nhập liệu tìm kiếm và kiểm tra tính hợp lệ - Sử dụng `IntersectionObserver` cho các hoạt ảnh kích hoạt theo thao tác cuộn trang và tải trễ (lazy loading) - Giảm thiểu tối đa việc tính toán lại bố cục (reflows) và vẽ lại (repaints); sử dụng thuộc tính CSS `transform` và `opacity` cho các hiệu ứng chuyển động - Lưu bộ nhớ đệm (cache) các phản hồi API ở những nơi phù hợp (ví dụ: dữ liệu phân tích với thời gian sống TTL là 60 giây) - Các thao tác chuyển hướng phải được xử lý xong trong vòng chưa đầy 100ms ở phía máy chủ --- ### 🧪 Xử Lý Lỗi & Các Trường Hợp Biên (Edge Cases) - Hiển thị thông báo lỗi thân thiện, mượt mà đối với các trường hợp: mất kết nối mạng, hết thời gian chờ phản hồi API (timeouts), URL không hợp lệ, trùng lặp bí danh, lỗi máy chủ (500), vượt quá giới hạn tần suất yêu cầu (429) - Phát hiện trạng thái ngoại tuyến (offline): hiển thị thanh thông báo khi người dùng mất kết nối mạng và đưa các thao tác vào hàng đợi để thử lại sau - Xử lý tốt các URL cực dài (lên tới 2048 ký tự) mà không làm vỡ bố cục giao diện - Xử lý chính xác các tên miền quốc tế hóa/chứa ký tự Unicode (IDN) - Có hình minh họa trạng thái trống (empty state) khi người dùng chưa có liên kết nào hoặc chưa có dữ liệu phân tích --- ### 📁 Sản Phẩm Bàn Giao (Deliverables) 1. Mã nguồn hoàn chỉnh, có chú thích rõ ràng cùng cấu trúc thư mục mạch lạc 2. Tệp `README.md` kèm hướng dẫn cài đặt, tài liệu API và danh sách tính năng 3. Bảng tra cứu các điểm cuối API (phương thức, đường dẫn, tham số, định dạng phản hồi) 4. Chế độ `demo` được nạp sẵn dữ liệu mẫu để có thể xem trước ngay lập tức 5. Hiển thị đáp ứng tốt trên các trình duyệt Chrome, Firefox, Safari và Edge (2 phiên bản mới nhất) --- > **Lưu ý:** Hãy xây dựng ứng dụng này theo từng bước tăng dần — bắt đầu với luồng rút ngắn cốt lõi (nhập liệu → kiểm tra hợp lệ → rút ngắn → hiển thị → sao chép), sau đó mới bổ sung dần các lớp tính năng mã QR, phân tích, bí danh tùy chỉnh, thời hạn liên kết, bảo vệ bằng mật khẩu và bảng điều khiển lịch sử đầy đủ. Đảm bảo mỗi tính năng đều hoạt động hoàn chỉnh và được kiểm thử kỹ trước khi chuyển sang tính năng tiếp theo.