Dự án Adolfha & Co. E-commerce được xây dựng bằng ReactJS và sử dụng một số công nghệ và thư viện khác như:
-
Context API: Được sử dụng để quản lý trạng thái toàn cục của ứng dụng.
-
Material-UI: Thư viện giao diện người dùng được sử dụng để tạo ra thiết kế UI đẹp mắt và nhất quán.
-
CurrencyFormatter: Được sử dụng để định dạng giá cả một cách chính xác.
-
Axios: Một thư viện HTTP client dựa trên Promise, được sử dụng để thực hiện các yêu cầu API đến FakeStoreAPI.
-
React Router DOM: Được sử dụng để xử lý điều hướng giữa các trang và các thành phần khác nhau trong ứng dụng.
Dự án cung cấp các chức năng sau:
-
Trang danh sách sản phẩm: Trang chủ hiển thị danh sách tất cả các sản phẩm có sẵn. Trang này bao gồm một menu lọc dropdown cho phép người dùng lọc sản phẩm theo danh mục.
-
Trang chi tiết sản phẩm: Khi nhấp vào nút "Discover Now" trên bất kỳ thẻ sản phẩm nào, người dùng sẽ được chuyển hướng đến trang chi tiết sản phẩm. Tại đây, người dùng có thể xem thông tin chi tiết về sản phẩm đã chọn. Ngoài ra, còn có một nút "Add to Basket" để thêm sản phẩm vào giỏ hàng của người dùng.
-
Giỏ hàng: Giỏ hàng có thể được truy cập bằng cách nhấp vào biểu tượng giỏ hàng trong thanh điều hướng. Trang này hiển thị danh sách các sản phẩm đã chọn trong giỏ hàng. Mỗi thẻ sản phẩm bao gồm các nút "Remove" và "Add", cho phép người dùng giảm hoặc tăng số lượng của một mặt hàng cụ thể. Các thay đổi về số lượng sẽ được phản ánh trong số đếm hiển thị trên biểu tượng giỏ hàng trong thanh điều hướng.
-
Tóm tắt đơn hàng: Bên cạnh danh sách sản phẩm trong trang giỏ hàng, một thẻ tóm tắt đơn hàng được cung cấp. Thẻ này hiển thị tên, biểu tượng danh mục, và số lượng của các sản phẩm trong giỏ hàng. Giá của mỗi mặt hàng được nhân với số lượng tương ứng để hiển thị tổng giá cho mỗi sản phẩm. Ở phía dưới, tổng giá của tất cả các sản phẩm trong giỏ hàng được tính toán và hiển thị.
-
Thiết kế Responsive: Dự án Adolfha & Co. hoàn toàn phản hồi và tương thích với các kích cỡ màn hình khác nhau. Giao diện người dùng điều chỉnh một cách liền mạch để cung cấp trải nghiệm tối ưu trên máy tính để bàn, máy tính bảng và thiết bị di động.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Để cài đặt dự án này, bạn cần thực hiện các bước sau:
-
tải xuống mã nguồn.
-
Mở Terminal hoặc Command Prompt và điều hướng đến thư mục dự án.
-
Chạy lệnh sau để cài đặt các gói phụ thuộc:
-
Sau khi cài đặt xong, bạn có thể chạy dự án bằng cách sử dụng lệnh sau:
Lưu ý: Bạn cần có Node.js và npm được cài đặt trên máy tính của bạn để thực hiện các bước này.