[Mã code 69259]

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

  (1 Đánh giá)
  0       10    

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

Danh mục
Thể loại
Ngày đăng
10-11-2025
Loại file
Full code
File download
 fashion-store.rar [#]
CAM KẾT TỪ NGƯỜI BÁN
Thông tin code đúng như mô tả
Hỗ trợ người mua sau khi tải code

(Hạng vàng)
Xem trang

Source code
7

Đánh giá (12)
5/5

Ngày tham gia
5/11/2023

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


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

SMTP_USER=your-email@gmail.com

SMTP_PASS=your-app-password

SMTP_FROM=noreply@fashionstore.com

 

# 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

ADMIN_EMAIL=admin@fashionstore.com

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

 

 

 




Nguồn: Topcode.vn

BÌNH LUẬN (0)


ĐÁNH GIÁ (1)

Đ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á
01:30 - 31/12/2025
Code rất tốt
Code chất lượng, hỗ trợ tốt
HỖ TRỢ TRỰC TUYẾN