Dịch Vụ Rút Ngắn URL — Ứng Dụng Full-Stack

## 🚀 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.