Giới thiệu Demo dự án lập trình Website shop bán đồ điện tử || sử dụng reactjs + nodejs + mongodb
Công nghệ lập trình: ,ReactJs, NodeJs, API (axios), Express, Mongodb
Công cụ lập trình: Visual Studio, Mongodb, Nodejs
Cơ sở dữ liệu: Mongodb
Mô tả website: Nền tảng website mua hàng sử dụng MongoDB, ReactJS và Node.js mang đến hệ thống mua sắm trực tuyến hiệu quả. Frontend ReactJS hỗ trợ hiển thị sản phẩm, tìm kiếm, giỏ hàng, thanh toán và giao diện quản trị. Backend Node.js với Express.js cung cấp API RESTful quản lý người dùng, sản phẩm, đơn hàng và thanh toán, MongoDB được sử dụng để lưu trữ dữ liệu
Các chức năng chính của gồm có:
Phân quyền: người quản trị và khách hàng
***Đối với khách hàng
- Đăng ký / Đăng nhập/ Đăng xuất
- Đổi mật khẩu
- Quản lý profile
- Xem chi tiết sản phẩm
- Tìm kiếm sản phẩm theo từ khóa, bộ lọc theo giá cả
- Xem danh sách sản phẩm, chi tiết sản phẩm
- Đặt hàng thanh toán
- Lịch sử mua hàng, xem trạng thái đơn hàng
- Yêu thích sản phẩm, xem lại yêu thích
- Bình luận đánh giá sản phẩm
***Đối với quản trị viên
- Đăng nhập/ Đăng xuất
- Thêm xóa sửa tìm kiếm
- Quản lý danh mục sản phẩm
- Quản lý sản phẩm
- Duyệt đơn hàng
- Tìm kiếm đơn hàng
- Quản lý banner
- Thống kê dạng số tổng lượng theo: khách hàng, đơn hàng, sản phẩm, danh mục
- Xem danh sách đơn hàng trong ngày hôm nay
***Hướng dẫn test API
Check xem api đã hoạt động hay chưa: truy cập đường dẫn: http127.0.0.1:8000/api/order/get-all-orders
Cấu hình database: Folder backend -> app.js
Thông tin về API: Folder backend -> Controller
Call API: Folder FrontEnd -> mở chế độ search ra tìm từ khóa: ${apiURL} sẽ ra được những đoạn có call API
HÌNH ẢNH DEMO
Hướng dẫn cài đặt website
-
1. Chuẩn bị môi trường
- MongoDb: sử dụng web
- Node.js: môi trường phát triển ReactJS
- Visual studio code: công cụ lập trình
2. Cài đặt dự án
2.1. Chạy file backend
- Xóa file nodemodul
- Mở terminal chạy lần lượt lệnh: npm i, npm start
2.2. Chạy file Client
- Xóa file nodemodul
- Mở terminal chạy lần lượt lệnh: npm i, npm start
- nhập lên trình duyệt đường dẫn: http://localhost:3000/
2.2. Phía MongoDB
- Trong file .env của folder backend đây là nơi config database
- Các bạn có thể thay thành mongodb khác hoặc liên hệ shop để cấp quyền truy cập
*Lưu ý: Đảm bảo kết nối Internet để get dữ liệu từ mongodb về
*Một số tài khoản người dùng trong hệ thống:
- Tài khoản admin: demotk@gmail.com mk 12345678
- Tài khoản khách hàng: có thể đăng ký rồi đăng nhập
Hỗ trợ cài đặt sau khi mua code vui lòng liên hệ ZALO hoặc FACEBOOK