Dự án này là một ứng dụng web thương mại điện tử phát triển bằng công nghệ Next.js, React, và CSS Modules. Dự án sử dụng @stripe/stripe-js để xử lý thanh toán. Dưới đây là một số chức năng chính và công nghệ được sử dụng trong dự án:
Công nghệ:
Next.js: Một framework của React cho phép phát triển ứng dụng web với tính năng Server Side Rendering (SSR) và Static Site Generation (SSG), giúp tối ưu hóa hiệu suất và tốc độ tải trang.
React: Thư viện JavaScript để xây dựng giao diện người dùng.
CSS Modules: Phương pháp để cô lập và quản lý CSS trong các ứng dụng JavaScript, giúp tránh xung đột tên lớp và tăng khả năng tái sử dụng mã.
Stripe: Dịch vụ thanh toán trực tuyến giúp xử lý các giao dịch thanh toán một cách an toàn.
Chức năng:
Hiển thị sản phẩm: Sử dụng dữ liệu từ products.json để hiển thị danh sách sản phẩm trên trang chủ và trang chi tiết sản phẩm.
Giỏ hàng: Tích hợp chức năng giỏ hàng cho phép người dùng thêm sản phẩm vào giỏ hàng và quản lý số lượng sản phẩm thông qua hook useCart.
Thanh toán: Tích hợp Stripe để xử lý thanh toán cho các sản phẩm trong giỏ hàng thông qua hàm initiateCheckout trong thư mục lib.
Giao diện người dùng: Sử dụng CSS Modules để tạo giao diện người dùng, bao gồm các thành phần như thanh điều hướng (Nav), bảng sản phẩm (Table), và các trang sản phẩm
Vạch sọc
danh từ
đường sọc, vằn của lông thú
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:
Clone dự án từ repository (nếu bạn đã có source code trên máy, bỏ qua bước này).
Di chuyển vào thư mục dự án: cd e-commerce-frontend.
Cài đặt các dependencies bằng cách chạy lệnh:
Sau khi cài đặt xong, bạn có thể chạy dự án trên môi trường phát triển bằng cách sử dụng lệnh:
Dự án sẽ được chạy ở chế độ phát triển, và bạn có thể truy cập vào địa chỉ http://localhost:3000 trên trình duyệt để xem dự án.
Để build dự án cho môi trường production, sử dụng lệnh:
Sau đó, để chạy dự án trên môi trường production, sử dụng lệnh:
Các lệnh này được định nghĩa trong file package.json.