Tạo Giao Diện Web Ứng Dụng Với ReactJS và Material UI
Tạo giao diện frontend cho ứng dụng web với ReactJS và Material UI (MUI) Đầu trang Hiển thị logo tài khoản. Hiển thị cấp độ tài khoản kèm theo liên kết nâng cấp. Tùy chọn chỉnh sửa thông tin tài khoản: thay đổi mật khẩu, avatar, số điện thoại. Nút Đăng xuất. Trang Chính: Thanh Tìm kiếm: Tạo thanh tìm kiếm ở góc phải. Header: Sử dụng AppBar từ MUI để tạo thanh header hiển thị tên ứng dụng và menu điều hướng. Box nhập link và tải lên:Tạo ô nhập để người dùng có thể dán link từ Google Drive, Dropbox, hoặc OneDrive. Thêm chức năng tải ảnh lên từ máy chủ. Form Tạo Album: Bao gồm các ô nhập để tạo tên khách hàng và tên album. Nút “Bắt đầu” để người dùng khởi động quy trình tải ảnh lên Google Drive của server (xử lý ở backend). Trang Album: Thông tin Album: Hiển thị số lượng album đã tạo, bên cạnh Hiển thị dung lượng đã dùng / 10GB (dành cho tài khoản Standard). Danh sách Album: Hiển thị các album dưới dạng lưới (sử dụng Grid từ MUI): Mỗi album hiển thị một ảnh đại diện (thumbnail), cùng với ngày tạo album và các nút hành động:Xóa album,Tải xuống album, chia sẻ link album để người dùng truy cập vào album, Thả tim cho album: sử dụng IconButton với biểu tượng “heart” để người dùng yêu thích album. Khi người dùng thả tim vào ảnh, ảnh sẽ được lưu vào mục yêu thích. Trang Yêu Thích: Tạo tab hoặc menu cho phép admin truy cập vào các ảnh mà người dùng đã thả tim của album Mỗi ảnh yêu thích hiển thị dưới dạng lưới (dùng Grid của MUI), tương tự giao diện Google Photos. Các thông tin hiển thị cho ảnh yêu thích:Ngày tạo album, số ảnh trong album Các nút hành động như xóa album, tải xuống,Export định dạng tên bức ảnh sang txt Giao diện Responsive và Thân Thiện Người Dùng: Đảm bảo giao diện tự động điều chỉnh để hiển thị tốt trên cả thiết bị di động và desktop. Sử dụng Grid và Box của MUI để tạo cấu trúc linh hoạt và dễ sử dụng. Tạo khoảng cách hợp lý giữa các thành phần và dùng Typography của MUI để hiển thị tiêu đề và văn bản.
