Dự án này là một trang web thương mại điện tử được xây dựng sử dụng Next.js, một framework của React cho phép tạo các ứng dụng web động với khả năng Server Side Rendering (SSR) và Static Site Generation (SSG). Dự án này cũng tích hợp với Sanity.io để quản lý nội dung và Stripe để xử lý thanh toán.
Công nghệ sử dụng:
Next.js: Framework của React cho phép tạo các ứng dụng web động. Sử dụng cho cả front-end và back-end (SSR và API Routes).
Sanity.io: Hệ thống quản lý nội dung (CMS) giúp quản lý và lưu trữ dữ liệu sản phẩm, bài viết.
Stripe: Dịch vụ thanh toán trực tuyến để xử lý các giao dịch mua hàng.
React Hot Toast: Thư viện để hiển thị thông báo trong giao diện người dùng.
React Icons: Thư viện biểu tượng cho React.
Chức năng chính:
Hiển thị sản phẩm: Sử dụng Product component để hiển thị thông tin sản phẩm.
Quản lý giỏ hàng: Sử dụng Cart component và StateContext để quản lý trạng thái giỏ hàng.
Thanh toán: Tích hợp Stripe thông qua getStripe để xử lý thanh toán.
Quản lý nội dung: Sử dụng Sanity.io để quản lý nội dung sản phẩm, bài viết, và các thông tin khác trên trang web.
Banner quảng cáo: Sử dụng HeroBanner để hiển thị banner quảng cáo trên trang chủ.
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, bạn cần thực hiện các bước sau:
1. Cài đặt các phụ thuộc cho phần front-end:
Mở terminal và chạy lệnh sau trong thư mục gốc của dự án (next-ecommerce):
2. Cài đặt Sanity Studio:
Đầu tiên, di chuyển vào thư mục sanity-ecommerce:
Sau đó, chạy lệnh sau để cài đặt các phụ thuộc cho Sanity Studio:
3. Cấu hình biến môi trường:
Tạo một file .env.local trong thư mục gốc của dự án (next-ecommerce) và thêm các biến môi trường cần thiết. Ví dụ:
SANITY_PROJECT_ID=g2a01rm2
SANITY_DATASET=production
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
Lưu ý: Thay thế your_stripe_secret_key và your_stripe_publishable_key bằng khóa API của Stripe của bạn.
4. Chạy dự án:
Sau khi đã cài đặt xong các phụ thuộc và cấu hình biến môi trường, bạn có thể chạy dự án bằng cách quay lại thư mục gốc của dự án (next-ecommerce) và chạy lệnh sau
Dự án sẽ chạy ở chế độ phát triển và có thể truy cập thông qua địa chỉ http://localhost:3000.
5. Chạy Sanity Studio:
Để chạy Sanity Studio, ở trong thư mục sanity-ecommerce, chạy lệnh sau:
Sanity Studio sẽ chạy và có thể truy cập thông qua địa chỉ http://localhost:3333.
npm install
cd sanity-ecommerce
npm install
npm run dev
npm start
Nguồn: Topcode.vn
