Dự án "archipark-store" là một ứng dụng web thương mại điện tử được xây dựng sử dụng React. Dự án này sử dụng một số công nghệ và thư viện phổ biến trong phát triển web hiện đại. Dưới đây là một số công nghệ và chức năng chính của dự án:
Công nghệ:
React (v18.2.0): Một thư viện JavaScript để xây dựng giao diện người dùng. (react)
React Router Dom (v5.2.0): Thư viện để quản lý định tuyến trong ứng dụng React. (react-router-dom)
Axios (v1.1.3): Thư viện HTTP client dùng để thực hiện các yêu cầu HTTP từ Node.js hoặc XMLHttpRequests từ trình duyệt. (axios)
Styled-components (v5.3.6): Thư viện cho phép viết CSS trong JavaScript để style các component của React. (styled-components)
React Icons (v4.6.0): Thư viện cung cấp các icon từ nhiều nguồn khác nhau để sử dụng trong dự án React. (react-icons)
(v10.16.0): Thư viện để tích hợp thanh toán qua Stripe vào ứng dụng. (stripe)
Chức năng:
Quản lý sản phẩm: Dự án có khả năng lấy thông tin sản phẩm từ một API (sử dụng Axios) và quản lý chúng trong trạng thái ứng dụng. (products_context.js)
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. (cart_context.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 các tiêu chí như giá, danh mục, màu sắc, và sắp xếp sản phẩm theo giá. (filter_context.js)
Thanh toán: Dự án tích hợp với Stripe để xử lý thanh toán. (@stripe/react-stripe-js, @stripe/stripe-js)
Quản lý trạng thái ứng dụng: Sử dụng React Context và useReducer để quản lý trạng thái ứng dụng, bao gồm trạng thái của giỏ hàng, sản phẩm, và bộ lọc. (products_context.js, cart_context.js, filter_context.js)
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Để cài đặt dự án này trên máy tính của bạn cho mục đích phát triển và kiểm thử, bạn cần thực hiện các bước sau:
Đảm bảo bạn đã cài đặt Git và Node.js (bao gồm npm) trên máy tính của bạn. Phiên bản yêu cầu:
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
cd archipark-store
npm install
npm start
Lệnh này sẽ khởi động ứng dụng trên localhost:3000.
Nguồn: Topcode.vn
