Công nghệ:
React: Một thư viện JavaScript để xây dựng giao diện người dùng, được sử dụng cho toàn bộ dự án, bao gồm các trang và thành phần giao diện.
React Router: Để điều hướng giữa các trang trong ứng dụng một trang (SPA).
Auth0: Được sử dụng để xác thực người dùng, cho phép đăng nhập và quản lý phiên người dùng.
Stripe: Dùng để xử lý thanh toán, tích hợp các chức năng liên quan đến thanh toán và quản lý giỏ hàng.
Netlify Functions: Để xử lý các chức năng phía máy chủ như tạo intent thanh toán với Stripe.
Context API của React: Để quản lý trạng thái toàn cục, như thông tin người dùng, sản phẩm, giỏ hàng và bộ lọc.
useReducer và useEffect Hooks: Để quản lý trạng thái nội bộ phức tạp và tương tác với API hoặc thực hiện các hiệu ứng phụ.
Material UI: Cung cấp các thành phần giao diện người dùng và hỗ trợ thiết kế responsive.
Swiper: Thư viện JavaScript để tạo các slider đẹp mắt cho các sản phẩm nổi bật.
Chức năng:
Xác thực người dùng: Cho phép người dùng đăng nhập và đăng ký thông qua Auth0.
Hiển thị sản phẩm: Các sản phẩm được hiển thị trên trang chủ và có thể được lọc theo các tiêu chí như giá, màu sắc, danh mục.
Quản lý giỏ hàng: Người dùng có thể thêm sản phẩm vào giỏ hàng, xem 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.
Thanh toán: Tích hợp Stripe để xử lý thanh toán, bao gồm tạo intent thanh toán và xử lý thông tin thẻ thanh toán.
Responsive Design: Giao diện được thiết kế để tương thích với các thiết bị khác nhau, từ điện thoại di động đến máy tính để bàn.
Quản lý trạng thái ứng dụng: Sử dụng Context API và useReducer để quản lý trạng thái của ứng dụng, bao gồm thông tin người dùng, sản phẩm, giỏ hàng và bộ lọc.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
cd E-commerce--Comfy-Sloth
npm install
npm run dev
npm run build
Nguồn: Topcode.vn
