một ứng dụng thương mại điện tử được xây dựng sử dụng ReactJS và một số công nghệ và thư viện khác. Dưới đây là một số chức năng chính và công nghệ được sử dụng trong dự án này:
Chức Năng Chính
Hiển Thị Sản Phẩm: Dự án có khả năng hiển thị danh sách sản phẩm từ API (https://api.pujakaitem.com/api/products) và hiển thị chi tiết một sản phẩm cụ thể khi người dùng chọn. Xem trong SingleProduct.js.
Quản Lý Giỏ Hàng: Người dùng có thể thêm sản phẩm vào giỏ hàng, cập nhật số lượng sản phẩm, và xóa sản phẩm khỏi giỏ hàng. Xem trong cartContext.js.
Lọc và Sắp Xếp Sản Phẩm: Người dùng có thể lọc sản phẩm theo danh mục, công ty, màu sắc, và giá cả. Ngoài ra, có thể sắp xếp sản phẩm theo giá. Xem trong filterContext.js.
Công Nghệ và Thư Viện
ReactJS: Là thư viện JavaScript cho việc xây dựng giao diện người dùng.
Styled-components: Thư viện giúp viết CSS trong JavaScript, được sử dụng để tạo ra các styled component trong ứng dụng.
React Router: Được sử dụng để xử lý định tuyến trong ứng dụng SPA (Single Page Application).
Context API và useReducer: Được sử dụng để quản lý trạng thái toàn cục của ứng dụng, như thông tin sản phẩm, giỏ hàng, và bộ lọc.
Axios: Thư viện HTTP client dùng để gọi API và xử lý dữ liệu từ server.
Local Storage: Được sử dụng để lưu trữ dữ liệu giỏ hàng trên trình duyệt của người dùng, giúp giữ giỏ hàng khi tải lại trang.
React Icons: Cung cấp các biểu tượng cho giao diện người dù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 trong terminal hoặc command prompt:
Đảm bảo bạn đã cài đặt Node.js và npm. Bạn có thể kiểm tra bằng cách chạy node -v và npm -v trong terminal để xem phiên bản.
Clone dự án về máy của bạn (nếu bạn chưa có mã nguồn). Sử dụng lệnh git clone với URL của repository (nếu có).
Di chuyển vào thư mục dự án vừa clone về. Sử dụng lệnh cd path/to/project.
Chạy lệnh npm install để cài đặt các dependencies được liệt kê trong file package.json.
npm install
npm start
Lệnh này sẽ khởi động dự án ở chế độ phát triển. Mở http://localhost:3000 để xem dự án trong trình duyệt của bạn. Trang sẽ tự động tải lại nếu bạn thực hiện thay đổi mã nguồn.