Công nghệ & Công cụ sử dụng
Front-end
React.js: Thư viện JavaScript cho việc xây dựng giao diện người dùng.
HTML5 & CSS3: Ngôn ngữ đánh dấu và kiểu dáng cho trang web.
React Context API: Được sử dụng cho quản lý trạng thái dữ liệu, là một phương pháp thay thế cho Redux.
React Toastify: Thư viện để hiển thị thông báo.
React Router: Thư viện cho việc điều hướng trong ứng dụng đơn trang (SPA).
React Reveal: Thư viện cho việc thêm hiệu ứng hoạt hình.
Back-end
Node.js: Môi trường chạy JavaScript phía server, được sử dụng để triển khai API thanh toán dưới dạng cloud function.
Firebase: Cung cấp các dịch vụ như xác thực, lưu trữ, cơ sở dữ liệu không SQL (Firestore), và hosting.
Công cụ
Stripe: Dùng cho tích hợp cổng thanh toán.
Firebase Authentication: Dùng cho xác thực người dùng.
Firebase Hosting: Dùng cho lưu trữ trang web.
Firebase Auto Deployment: Tự động triển khai ứng dụng lên Firebase.
Firebase Firestore: Cơ sở dữ liệu không SQL của Firebase.
Chức năng chính
Mua hàng: Người dùng có thể chọn sản phẩm và thêm vào giỏ hàng.
Thanh toán: Tích hợp Stripe để người dùng có thể thanh toán cho đơn hàng của mình.
Xem lịch sử đơn hàng: Người dùng có thể xem lịch sử mua hàng sau khi đã thanh toán.
Đăng nhập/Đăng ký: Tích hợp Firebase Authentication để người dùng có thể tạo tài khoản và đăng nhập.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Nếu bạn đã tải mã nguồn về, giải nén (nếu cần) và mở thư mục dự án trong terminal hoặc command prompt.
Cài đặt các gói phụ thuộc
Mở terminal hoặc command prompt và chuyển đến thư mục gốc của dự án (nơi chứa file package.json).
npm install
Chuyển đến thư mục functions để cài đặt các gói phụ thuộc cho Firebase Functions
cd functions
npm install
Quay lại thư mục gốc của dự án sau khi cài đặt xong.
Cấu hình Firebase
Đảm bảo bạn đã tạo một dự án trên Firebase và cấu hình các thông tin cần thiết trong file src/firebase.js.
Cập nhật file .firebaserc với project ID của dự án Firebase của bạn.
Chạy dự án
Từ thư mục gốc của dự án, chạy lệnh sau để khởi động ứng dụng trên môi trường phát triển
npm start
Ứng dụng sẽ tự động mở trong trình duyệt web mặc định tại địa chỉ http://localhost:3000.
Triển khai dự án (tùy chọn)
Để triển khai dự án lên Firebase Hosting, đảm bảo bạn đã cài đặt Firebase CLI và đăng nhập vào tài khoản Firebase của mình.
Chạy lệnh sau từ thư mục gốc của dự án để triển khai
firebase deploy
Nguồn: Topcode.vn
