Website bán giày ReactJS Redux toolkit React router dom React loading skeleton Custom hooks CSS modules NodeJS ExpressJS MongoDB JWT ReCAPTCHA EmailJS created using Vite
Công nghệ:
Frontend:
React: Một thư viện JavaScript để xây dựng giao diện người dùng. Các thành phần chính như App.jsx, Navbar.jsx, và ProductsList.jsx được xây dựng sử dụng React.
Redux: Được sử dụng để quản lý trạng thái ứng dụng. Ví dụ, cartSlice.jsx và userSlice.jsx cho thấy việc sử dụng Redux để quản lý giỏ hàng và thông tin người dùng.
React Router: Để điều hướng trong ứng dụng SPA (Single Page Application).
Backend:
Node.js và Express: Sử dụng để xây dựng server-side của ứng dụng. app.js khởi tạo một ứng dụng Express với các middleware như CORS và Helmet cho bảo mật.
Mongoose: Một ODM (Object Data Modeling) cho MongoDB, được sử dụng để tương tác với cơ sở dữ liệu MongoDB. Ví dụ, mongo.js cung cấp các hàm để kết nối và ngắt kết nối với MongoDB.
Chức năng:
Quản lý sản phẩm: Người dùng có thể xem danh sách sản phẩm thông qua useProducts.js và chi tiết sản phẩm.
Quản lý giỏ hàng: Người dùng có thể thêm sản phẩm vào giỏ hàng và xem giỏ hàng của mình. Cart.jsx hiển thị giỏ hàng và các sản phẩm đã chọn.
Xác thực người dùng: Người dùng có thể đăng ký và đăng nhập. Backend xử lý xác thực thông qua users.router.js và các hàm trong users.model.js.
Yêu thích: Người dùng có thể thêm sản phẩm vào danh sách yêu thích của mình và xem danh sách này.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Cài đặt các phụ thuộc cho cả frontend và backend:
Cài đặt các phụ thuộc cho server (backend
npm run install-server
npm run install-frontend
MONGO_URL=mongodb+srv://<username>:<password>@<your-cluster-url>/<dbname>?retryWrites=true&w=majority
npm start
npm run start-server
npm run start-frontend
ruy cập ứng dụng:
Mở trình duyệt và truy cập địa chỉ http://localhost:3000 (hoặc cổng khác nếu bạn đã cấu hình khác trong vite.config.js hoặc server.js).
Nguồn: Topcode.vn
