🛍️ Ecommerce Multi Vendor Project

Website Multi Vendor Ecommerce React 19, TypeScript và Vite.

---

🚀 Công nghệ sử dụng

• ⚛️ React 19
• 🧠 TypeScript
• ⚡ Vite 7 – công cụ build siêu nhanh
• 🎨 Tailwind CSS
• 🧰 Redux Toolkit – quản lý state , giao tiếp BE & FE
• 📦 react-slick – Carousel/Slider
• 🔗 React Router – Routing cho SPA
• 📡 Axios – Gửi HTTP request

---

📁 Cấu trúc thư mục

src/
├── components/      # Các component dùng chung
├── pages/           # Các trang chính (Home, Product, etc.)
├── redux/           # Redux store, slices
├── types/           # TypeScript type definitions
├── assets/          # Ảnh, icon, font
├── App.tsx
└── main.tsx
└── Store.ts        #Cấu hình và khởi tạo Redux Store để quản lý toàn bộ state toàn cục (global state) trong ứng dụng React.

Thư mục	Vai trò chính
Config	Chứa cấu hình API, route, constants (ví dụ api.ts, env.ts, routes.ts)
Redux Toolkit	Chứa store, slices, thunks, selectors
Theme	Chứa custom theme cho MUI hoặc Tailwind
Types	Chứa các interface, type (VD: User, Product, Seller, Report, etc.)
assets	Ảnh, icon, font, logo,...
admin	Code giao diện & logic cho người quản trị
customer	Code cho phía khách hàng
seller	Code cho người bán

Redux Toolkit: -slice được sử dụng để quản lý tất cả các trạng thái và tương tác API

Ecommerce Multivendor Project

1.Giao diện cho Customer

1.1. Trang chủ

1.2. Xem thông tin sản phẩm

1.3. Giỏ hàng, đặt hàng , thanh toán

1.4. Xem đơn hàng

1.5. Đăng ký làm KOC

2.Giao diện cho Seller

2.1.Đăng ký làm Seller

2.2.Trang chủ Seller

2.3.Xem đơn hàng , thêm sản phẩm , giao dịch của Seller

2.3.Xem xóa sửa chiến dịch của Seller

2.4.Duyệt KOC tham gia chiến dịch của Seller

3.Giao diện cho Manager

3.1.Giao diện quản lý Seller

3.2.Giao diện quản lý Koc

3.3.Giao diện quản lý các mã coupon

4.Giao diện cho Koc

4.1.Giao diện trang chủ của Koc

4.2.Giao diện xem các chiến dịch cua Koc

4.3.Giao diện xem các link sản phẩm khi Koc được duyệt vô chiến dịch