Dự án này là một trang web thương mại điện tử được xây dựng bằng nhiều công nghệ và thư viện khác nhau. Dưới đây là một số công nghệ và chức năng chính:
Công nghệ:
-
React.js: Một thư viện JavaScript để xây dựng giao diện người dùng.
-
Redux/Toolkit: Một thư viện để quản lý trạng thái ứng dụng.
-
React Router Dom v6: Một thư viện để xây dựng Single Page Application (SPA).
-
React helmet async: Một thư viện để cải thiện SEO.
-
Swiper: Một thư viện để tạo carousel slider.
-
React-i18next: Một thư viện để hỗ trợ đa ngôn ngữ cho trang web.
-
Postcss plugin và SASS: Được sử dụng để style cho trang web.
-
Vite: Một công cụ để xây dựng và phát triển ứng dụng web.
Chức năng:
-
Xác thực người dùng và quản lý tài khoản.
-
Lưu trữ tất cả hành động và thay đổi của người dùng cục bộ để đảm bảo trải nghiệm duyệt web liền mạch.
-
Giỏ hàng và quy trình thanh toán.
-
Theo dõi trạng thái đơn hàng và xem lịch sử đơn hàng.
-
Trang chi tiết sản phẩm với tính năng phóng to.
-
Chức năng tìm kiếm sản phẩm theo tên hoặc danh mục.
-
Lưu sản phẩm vào danh sách yêu thích / giỏ hàng.
-
Thiết kế đáp ứng hoàn toàn trên tất cả các thiết bị, bao gồm máy tính để bàn, máy tính bảng và điện thoại di động.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
npm i
npm start
Để cài đặt một dự án React với React Router Dom v6, React helmet async, Swiper, và React-i18next từ mã nguồn, bạn cần làm theo các bước sau:
Đầu tiên, bạn cần cài đặt Node.js và npm (Node Package Manager) trên máy tính của bạn. Bạn có thể tải Node.js và npm từ trang web chính thức của Node.js.
Sau khi cài đặt Node.js và npm, bạn cần mở Terminal (hoặc Command Prompt trên Windows) và điều hướng đến thư mục chứa mã nguồn của dự án.
Khi bạn đã ở trong thư mục chứa mã nguồn, bạn cần chạy lệnh sau để cài đặt các gói phụ thuộc của dự án:
Sau khi tất cả các gói phụ thuộc đã được cài đặt, bạn có thể khởi động dự án bằng cách chạy lệnh sau:
Dự án của bạn sẽ được khởi động và bạn có thể truy cập nó từ trình duyệt của mình tại địa chỉ http://localhost:3000 (hoặc cổng khác nếu bạn đã thay đổi cổng mặc định trong mã nguồn).
Lưu ý: Các bước trên giả định rằng mã nguồn của bạn đã được cấu hình đúng và không có lỗi. Nếu bạn gặp lỗi trong quá trình cài đặt hoặc khởi động dự án, bạn cần kiểm tra mã nguồn và đảm bảo rằng tất cả các gói phụ thuộc cần thiết đã được khai báo đúng trong file package.json.
Nguồn: Topcode.vn
