Source code website bán giày Sneaker Shop Fullstack được xây dựng bằng ReactJS, Vite, NodeJS, Express và MongoDB. Dự án phù hợp cho sinh viên học tập, làm đồ án, tham khảo cách xây dựng website thương mại điện tử hoặc phát triển tiếp thành website bán hàng thực tế.
Công nghệ sử dụng:
- Frontend: ReactJS 18, Vite, React Router DOM, Axios, CSS, i18next, lucide-react.
- Backend: NodeJS, ExpressJS, MongoDB, Mongoose, JWT, Multer, Nodemailer.
- Database: MongoDB.
- Xác thực: JWT token.
- Upload file: hỗ trợ upload ảnh sản phẩm, avatar, QR thanh toán, bằng chứng chuyển khoản.
Chức năng phía người dùng:
- Xem trang chủ.
- Xem danh sách sản phẩm.
- Lọc sản phẩm theo giới tính, loại sản phẩm, bộ sưu tập, sport, tag.
- Tìm kiếm sản phẩm.
- Xem chi tiết sản phẩm.
- Xem gallery ảnh sản phẩm.
- Chọn màu, size, số lượng.
- Thêm sản phẩm vào giỏ hàng.
- Quản lý giỏ hàng.
- Đăng ký, đăng nhập tài khoản.
- Quản lý thông tin cá nhân.
- Đặt hàng với tài khoản hoặc khách vãng lai.
- Thanh toán COD.
- Thanh toán chuyển khoản ngân hàng.
- Upload ảnh bằng chứng thanh toán.
- Đánh giá sản phẩm.
- Wishlist.
- Hỗ trợ giao diện sáng/tối.
- Hỗ trợ đa ngôn ngữ Việt/Anh.
Chức năng phía admin:
- Dashboard thống kê tổng quan.
- Quản lý sản phẩm.
- Thêm, sửa, xóa sản phẩm.
- Quản lý ảnh sản phẩm.
- Quản lý size, màu sắc, tồn kho.
- Quản lý mô tả sản phẩm.
- Quản lý SEO và trạng thái hiển thị sản phẩm.
- Quản lý đơn hàng.
- Cập nhật trạng thái đơn hàng.
- Xác nhận hoặc từ chối thanh toán chuyển khoản.
- Quản lý người dùng.
- Khóa hoặc mở khóa tài khoản.
- Quản lý media library.
- Quản lý banner, hero section, nội dung trang chủ.
- Cài đặt thông tin ngân hàng và mã QR thanh toán.
- Có API coupon ở backend.
- Có chức năng backup/restore dữ liệu MongoDB.
Cấu trúc dự án:
- frontend: chứa giao diện ReactJS.
- backend: chứa API NodeJS Express.
- backend/src/controllers: xử lý logic API.
- backend/src/models: khai báo model MongoDB.
- backend/src/routes: khai báo route API.
- backend/src/middleware: middleware xác thực, upload, phân quyền.
- frontend/src/pages: các trang chính của website.
- frontend/src/components: component tái sử dụng.
- frontend/src/services: các file gọi API.
- frontend/src/context: quản lý auth, cart, theme.
Điểm nổi bật:
- Giao diện hiện đại, phù hợp website bán giày/thời trang.
- Có trang admin riêng để quản lý dữ liệu.
- Code được tách frontend/backend rõ ràng.
- Có nhiều chức năng thực tế của một website thương mại điện tử.
- Có thể dùng làm đồ án tốt nghiệp, bài tập lớn, portfolio cá nhân hoặc phát triển tiếp.
- Có database mẫu và seed data để chạy thử nhanh.
Lưu ý:
- Đây là source code tham khảo học tập và phát triển dự án cá nhân.
- Cần cấu hình file .env trước khi chạy backend và frontend.
- Cần cài MongoDB local hoặc dùng MongoDB Atlas.
- Không nên dùng trực tiếp cho production nếu chưa kiểm tra lại bảo mật, thanh toán và dữ liệu người dùng.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Yêu cầu môi trường:
- NodeJS phiên bản 18 trở lên.
- NPM.
- MongoDB local hoặc MongoDB Atlas.
- Visual Studio Code.
Bước 1: Giải nén source code.
Bước 2: Cài đặt backend.
Mở terminal tại thư mục backend và chạy:
cd backend
npm install
Tạo file .env trong thư mục backend theo mẫu:
PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/nike-shop
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:5173
Sau đó chạy backend:
npm run dev
Backend mặc định chạy tại:
http://localhost:5000
Bước 3: Cài đặt frontend.
Mở terminal tại thư mục frontend và chạy:
cd frontend
npm install
Tạo file .env trong thư mục frontend:
VITE_API_URL=http://localhost:5000/api
Sau đó chạy frontend:
npm run dev
Frontend mặc định chạy tại:
http://localhost:5173
Bước 4: Import dữ liệu mẫu.
Nếu source có sẵn script seed, chạy trong thư mục backend:
npm run seed
Hoặc import dữ liệu MongoDB bằng file JSON/database mẫu đi kèm nếu có.
Bước 5: Đăng nhập admin.
Sau khi seed dữ liệu, dùng tài khoản admin mẫu trong file hướng dẫn đi kèm hoặc tạo tài khoản admin trong database.
Bước 6: Kiểm tra chức năng.
- Truy cập trang chủ.
- Xem sản phẩm.
- Thêm vào giỏ hàng.
- Đặt hàng thử.
- Truy cập trang admin để quản lý sản phẩm, đơn hàng, user, banner và thanh toán.
Một số lỗi thường gặp:
1. Không kết nối được MongoDB:
- Kiểm tra MongoDB đã chạy chưa.
- Kiểm tra lại MONGO_URI trong file .env.
2. Frontend không gọi được API:
- Kiểm tra backend đã chạy chưa.
- Kiểm tra VITE_API_URL trong frontend/.env.
- Kiểm tra CORS trong backend.
3. Không hiển thị ảnh:
- Kiểm tra đường dẫn ảnh trong public hoặc uploads.
- Kiểm tra backend có serve static file chưa.
4. Lỗi npm:
- Xóa node_modules và package-lock.json.
- Chạy lại npm install.
Lệnh build frontend:
cd frontend
npm run build
Lệnh chạy backend production:
cd backend
npm start