FULL CODE WEBSITE BÁN QUẦN ÁO - NEXTJS MONGODB

[Mã code 46743]
  1 Đánh giá    Viết đánh giá
 0      57      6
Phí tải: 899 Xu (1Xu = 1.000đ)
Danh mục
Thể loại
Nhóm code
Ngày đăng
10-11-2025
Loại file
Full code
Dung lượng
#
Code đã kiểm thử
Cam kết hỗ trợ
Không chứa mã độc
Có demo thực tế
Có hướng dẫn cài đặt

Fashion Store - Nền tảng thương mại điện tử thời trang. Next.js 15, React 19, TypeScript, MongoDB. Tính năng: Sản phẩm 3D, Giỏ hàng, Checkout, ZaloPay, Đánh giá, Mã giảm giá, Dashboard. Giao diện Liqu


MÔ TẢ CHI TIẾT

FASHION STORE – TÍNH NĂNG CHI TIẾT

1. TÍNH NĂNG NGƯỜI DÙNG

1.1 Xác Thực & Bảo Mật

1.      Đăng ký tài khoản với email

2.      Xác thực email bằng OTP 6 số

3.      Đăng nhập / Đăng xuất

4.      Quên mật khẩu & đặt lại mật khẩu

5.      JWT Authentication + Refresh Token

6.      Quản lý session & lịch sử đăng nhập

7.      Bảo mật 2FA (tùy chọn)

1.2 Quản Lý Hồ Sơ

1.      Xem & chỉnh sửa thông tin

2.      Upload avatar

3.      CRUD địa chỉ giao hàng

4.      Đặt địa chỉ mặc định

5.      Đổi mật khẩu

6.      Quản lý preferences

1.3 Mua Sắm

1.      Duyệt sản phẩm, có filters & search

2.      Xem chi tiết sản phẩm, hỗ trợ 3D viewer

3.      Thêm vào giỏ hàng + quản lý giỏ (CRUD)

4.      Áp dụng mã giảm giá

5.      Checkout đa phương thức thanh toán

6.      Theo dõi đơn hàng real-time

7.      Lịch sử đơn hàng

8.      Hủy đơn hàng

9.      Yêu cầu trả hàng

1.4 Sản Phẩm

1.      Xem danh sách với pagination

2.      Tìm kiếm

3.      Lọc theo category / brand / price / rating

4.      Sort theo: giá / phổ biến / mới nhất

5.      Chi tiết sản phẩm

6.      Xem 3D model (GLB/GLTF)

7.      Chọn variants (size / color / material)

8.      Xem đánh giá / review

9.      Thêm wishlist

10. Chia sẻ sản phẩm

1.5 Đánh Giá & Wishlist

1.      Viết đánh giá (chỉ đơn đã nhận)

2.      Upload hình ảnh đánh giá

3.      Đánh dấu đánh giá hữu ích

4.      Quản lý wishlist

5.      Chuyển wishlist → giỏ hàng

1.6 Mã Giảm Giá

1.      Xem danh sách voucher

2.      Claim mã giảm giá

3.      Áp dụng mã giảm giá

4.      Xem mã đã claim

 

2. TÍNH NĂNG QUẢN TRỊ VIÊN

2.1 Dashboard

1.      Tổng quan doanh thu (today / week / month / year)

2.      Thống kê đơn hàng

3.      Thống kê khách hàng

4.      Thống kê sản phẩm

5.      Biểu đồ doanh thu

6.      Top sản phẩm bán chạy

7.      Top categories

8.      Reports & Analytics

2.2 Quản Lý Sản Phẩm

1.      Danh sách + filters

2.      Tạo sản phẩm

3.      Chỉnh sửa sản phẩm

4.      Xóa (soft delete)

5.      Upload hình ảnh

6.      Upload model 3D

7.      Quản lý variants

8.      Quản lý inventory

9.      Bulk import/export

10. SEO metadata

2.3 Quản Lý Đơn Hàng

1.      Danh sách + filters

2.      Chi tiết đơn hàng

3.      Update trạng thái

4.      Cập nhật tracking

5.      Chọn đơn vị vận chuyển

6.      Xử lý cancel

7.      Xử lý return

8.      Xử lý refund

9.      In hóa đơn

10. Export đơn hàng

2.4 Quản Lý Khách Hàng

1.      Danh sách

2.      Xem chi tiết

3.      Lịch sử order

4.      Ban / Unban user

5.      Roles & permission

6.      Thống kê khách hàng

2.5 Quản Lý Mã Giảm Giá

1.      Danh sách

2.      Tạo mã

3.      Chỉnh sửa

4.      Xóa

5.      Usage limits

6.      Validity period

7.      Restriction theo categories / product / user

2.6 Quản Lý Đánh Giá

1.      Danh sách + filter

2.      Approve / Reject review

3.      Xem chi tiết review

4.      Xóa review

5.      Moderation queue

2.7 Quản Lý Danh Mục

1.      Danh sách dạng tree

2.      Tạo category

3.      Chỉnh sửa

4.      Xóa

5.      Quản lý hierarchy

6.      SEO metadata

2.8 Quản Lý Cài Đặt

1.      Cài đặt chung

2.      Payment

3.      Shipping

4.      Email

5.      SEO

6.      Social media

 

3. CÔNG NGHỆ SỬ DỤNG

3.1 Frontend

1.      Next.js 15 App Router

2.      React 19

3.      TypeScript

4.      Tailwind CSS

5.      Framer Motion

6.      Three.js

3.2 Backend

1.      Next.js API routes

2.      MongoDB + Mongoose

3.      JWT Auth

4.      Nodemailer

5.      ZaloPay API

6.      Zod Validation

3.3 Security

1.      JWT tokens

2.      bcrypt hashing

3.      Rate limiting

4.      RBAC

5.      Input validation

6.      CORS

 

4. Giao Diện & UX

1.      Liquid Glass Design

2.      Responsive

3.      Framer Motion animation

4.      3D product viewer

5.      Dark / Light Mode

6.      Loading states

7.      Error handling friendly

Toast notification

 


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

 

HÌNH ẢNH DEMO

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

web bán quần áo,fashion store manager,nextjs,mongodb,dashboard,full code bán quần áo thời trang

Nguồn: Sharecode.vn



HƯỚNG DẪN CÀI ĐẶT

 

1. YÊU CẦU HỆ THỐNG

- Node.js: 18.0+

- npm: 9.0+ (hoặc yarn)

- MongoDB: 6.0+ (local hoặc Atlas)

- Git để clone repository

2. CLONE REPOSITORY

git clone <repository-url>

cd fashion-store

3. CÀI ĐẶT DEPENDENCIES

            npm install

4. CẤU HÌNH ENVIRONMENT VARIABLES

Tạo file .env ở root:

# Database

MONGODB_URI=mongodb://localhost:27017/fashion-store

 

# JWT

JWT_SECRET=your-jwt-secret-key-here

JWT_EXPIRES_IN=15m

JWT_REFRESH_SECRET=your-jwt-refresh-secret-key-here

JWT_REFRESH_EXPIRES_IN=7d

 

# Email (Nodemailer)

SMTP_HOST=smtp.gmail.com

SMTP_PORT=587

[email protected]

SMTP_PASS=your-app-password

[email protected]

 

# Payment (ZaloPay)

ZALOPAY_APP_ID=your-zalopay-app-id

ZALOPAY_APP_KEY=your-zalopay-app-key

ZALOPAY_CALLBACK_URL=http://localhost:3000/api/webhooks/zalopay

 

# App

NODE_ENV=development

NEXT_PUBLIC_API_URL=http://localhost:3000/api/v1

NEXT_PUBLIC_APP_URL=http://localhost:3000

 

# Admin

[email protected]

5. CẤU HÌNH MONGODB

5.1 Sử dụng Local

- Cài MongoDB

- Start service

- Gán MONGODB_URI như trên

5.2 Sử dụng MongoDB Atlas

- Tạo tài khoản

- Tạo cluster

- Lấy connection string

- Gán vào file .env

- Whitelist IP của bạn

 

6. CẤU HÌNH EMAIL SERVICE

6.1 Gmail SMTP

Bật 2-Step Verification

Tạo App Password

Copy vào SMTP_PASS

6.2 SMTP khác

→ cấu hình theo provider

 

7. CẤU HÌNH PAYMENT ZALOPAY

Tạo tài khoản developer

Lấy App ID / App Key

Gán vào .env

Gán callback URL

 

8. RUN DEVELOPMENT SERVER

npm run dev

http://localhost:3000

9. BUILD PRODUCTION

npm run build

npm start

10. TRIỂN KHAI PRODUCTION

10.1 Vercel (khuyến nghị)

Push code lên GitHub

Import vào Vercel

Add env variables

Deploy

10.2 Docker

File Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Build & run:

docker build -t fashion-store .

docker run -p 3000:3000 fashion-store

 

10.3 VPS / Server

- Cài Node + Mongo

- Clone repo

- npm install

- npm run build

- pm2 start

- cấu hình nginx reverse proxy

- thêm SSL

 

11. ENVIRONMENT VARIABLES PRODUCTION

MONGODB_URI

JWT_SECRET

JWT_REFRESH_SECRET

SMTP_*

ZALOPAY_*

NEXT_PUBLIC_API_URL

NEXT_PUBLIC_APP_URL

 

12. KIỂM TRA

Kiểm tra Mongo connection

Test API: /api/v1/products

Test UI

Test auth

Test email verify

 

13. TROUBLESHOOTING

13.1 Mongo lỗi

check service

check connection string

check IP whitelist nếu Atlas

13.2 Email lỗi

SMTP credentials

Gmail: phải dùng App Password

kiểm tra port 587/465

13.3 Build lỗi

xóa node_modules + .next

check Node >=18

fix TS errors

 

 

 

 
 
LINK DOWNLOAD

fashion-store.rar [#]

File đã được kiểm thử
     Báo vi phạm bản quyền
Pass giải nén (Nếu có):
sharecode.vn
DOWNLOAD
(899 Xu)
Bạn có code hay
ĐĂNG BÁN NGAY

BÌNH LUẬN



ĐÁNH GIÁ


ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
21:29 - 10/11/2025
Code rất tốt
Code rất tốt và phù hợp để phát triển

 HỖ TRỢ TRỰC TUYẾN