Chức năng:
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. Điều này được quản lý bởi StateContext trong thư mục context.
Thanh toán: Dự án tích hợp Stripe để xử lý thanh toán. Công nghệ này được cài đặt trong getStripe trong thư mục lib.
Hiển thị sản phẩm: Các sản phẩm được hiển thị thông qua component Product và có thể được thêm vào giỏ hàng.
Layout và Navigasi: Dự án sử dụng các component như Navbar, Footer để tạo layout chung cho ứng dụng. Layout được sử dụng trong _app.js để bao bọc các trang và component chính.
Công nghệ:
Next.js: Framework chính cho ứng dụng, hỗ trợ tạo trang web động và tối ưu hóa SEO.
React: Thư viện JavaScript cho việc xây dựng giao diện người dùng.
Stripe: Dịch vụ thanh toán trực tuyến cho phép xử lý các giao dịch thanh toán trực tuyến.
Sanity: Một hệ thống quản lý nội dung được sử dụng để quản lý dữ liệu sản phẩm và nội dung trang web.
React Hot Toast: Thư viện để hiển thị thông báo trong ứng dụng.
ESLint: Công cụ giúp phát hiện và sửa các vấn đề về mã trong JavaScript/React, cấu hình được tìm thấy trong .eslintrc.json.
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, bạn cần thực hiện các bước sau cho cả phần frontend và backend (Sanity Studio):
Frontend (Next.js)
Mở terminal và chuyển đến thư mục gốc của dự án (trendytreasures):
cd path/to/trendytreasures
npm install
# hoặc
yarn install
npm run dev
# hoặc
yarn dev
Backend (Sanity Studio)
Chuyển đến thư mục sanityelectronic:
cd path/to/trendytreasures/sanityelectronic
npm install
# hoặc
yarn install\
npm run dev
# hoặc
yarn dev
Lưu ý: Đảm bảo bạn đã cài đặt Node.js và npm/yarn trên máy tính của mình trước khi thực hiện các bước trên.
Nguồn: Topcode.vn
