Tương tác với API

Xây dựng trang web E-commerce đơn giản hiển thị danh sách sản phẩm từ API với các tính năng:

Lọc (filter): Lọc theo trường (ví dụ: category)
Live search: Tìm kiếm (search) theo tên sản phẩm
Sắp xếp (sort):
- Tạo input range để sort theo price
- Sort theo "asc" hoặc "desc" của tên sản phẩm
Phân trang (pagination): Tạo phân trang để xem dữ liệu từng trang

Yêu cầu thực hiện

Giao diện: Tham khảo các trang thương mại điện tử phổ biến (Shopee, Tiki, Amazon...) để tạo ra giao diện đẹp mắt và thân thiện với người dùng
Mỗi lần thay đổi filter, sort, hoặc trang → gọi API tương ứng để cập nhật kết quả
Thêm debounce khi nhập search (chờ 300ms)
Kết hợp nhiều điều kiện cùng lúc (search + category + sort)
Hiển thị flexbox hoặc gridbox card sản phẩm gồm:
- Ảnh thumbnail
- Tên sản phẩm
- Giá
- Danh mục
Hiển thị số trang hiện tại và tổng số trang. Mỗi trang hiển thị 12 sản phẩm.
Dùng fetch API hoặc axios để gọi API
UX/UI: Thêm loading state, empty state, và error handling để tăng trải nghiệm người dùng
Responsive: Đảm bảo website hiển thị tối ưu trên mọi thiết bị

Documents: https://dummyjson.com/docs/products
Base URL: https://dummyjson.com/products

Tính năng	Endpoint	Ví dụ
Lấy danh sách sản phẩm	`/products?limit=10&skip=0`	https://dummyjson.com/products?limit=10&skip=0
Tìm kiếm sản phẩm	`/products/search?q=phone`	https://dummyjson.com/products/search?q=phone
Lọc theo category	`/products/category/smartphones`	https://dummyjson.com/products/category/smartphones
Lấy danh sách category	`/products/categories`	https://dummyjson.com/products/categories