學習來自 YT: compiletab
影片: Build & Deploy Full Stack E-commerce Website | Redux | MERN Stack Project
Github assets: 連結
Thank you, teacher
建立 & 部署全端商業網站
影片時間戳
00:00:00 – Introduction
00:01:56 – Demo
00:05:26 – Installation & set up
05:50:25 – Admin UI
07:20:25 – Backend setup
07:32:40 – user routes
08:05:40 – Products routes
09:18:56 – cart routes
10:13:26 – checkout routes
10:57:55 – Admin routes
11:58:30 – Redux
Frontend (前端)
專案開始
- 建立 rabbit 專案資料夾
- 在 rabbit 資料夾裡面建立 frontend、backend 資料夾
Install Tailwind CSS with Vite (使用 Vite 安裝 Tailwind CSS)
Using React (使用 React)
- Create your project (建立你的專案)
- Install Tailwind CSS (安裝 Tailwind CSS)
- Configure your template paths (配置你的模板路徑)
- Add the Tailwind directives to your CSS (將 Tailwind 指令添加到你的 CSS 中)
- Start your build process (啟動你的構建過程)
- Start using Tailwind in your project (開始在你的專案中使用 Tailwind)
// 1. Create your project
// Terminal - 終端機
npm create vite@latest my-project -- --template react
cd my-project// 2. Install Tailwind CSS
// Terminal - 終端機
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p// 3. Configure your template paths
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}// 4. Add the Tailwind directives to your CSS
// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;// 5. Start your build process
// Terminal - 終端機
npm run dev// 6. Start using Tailwind in your project
// App.jsx
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}載入 Inter Google Fonts
- 選擇在 index.html 載入 <link>
- 修正 index.css 文字樣式
// 1. 選擇在 index.html 載入 <link>
// frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rabbit E-Commerce</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
// 2. 修正 index.css 文字樣式
@tailwind base;
@tailwind components;
@tailwind utilities;
#root {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
安裝 React Router、React Icons 套件
// frontend
// terminal - 終端機
npm i react-router-dom react-icons
探討資料夾結構
- components
- Admin
- Cart
- Common
- Layout
- Products
- pages
- Home page
- Admin Home page
- Login page
- Collection page
建立 components、pages 資料夾
- 在 frontend/src 資料夾裡面建立 components、pages 資料夾
- 在 components 資料夾裡面建立 Admin、Cart、Common、Layout、Products …等資料夾
在 App.jsx 撰寫 React Router 程式碼內容
- 撰寫 React Router
- Layout 資料夾裡面建立 UserLayout.jsx 檔案
// 1. 撰寫 React Router、載入 UserLayout.jsx 檔案
// App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// 2.
// frontend/src/components/Layout/UserLayout.jsx
import React from "react";
const UserLayout = () => {
return <div>UserLayout</div>;
};
export default UserLayout;
UserLayout 頁面使用者介面設計草圖
UserLayout 建立、撰寫使用者介面相關程式碼
// frontend/src/components/Layout/UserLayout.jsx
import React from "react";
import Header from "../Common/Header";
const UserLayout = () => {
return (
<>
{/* Header */}
<Header />
{/* Main content */}
{/* Footer */}
</>
);
};
export default UserLayout;
// frontend/src/components/Common/Header.jsx
import React from "react";
import Topbar from "../Layout/Topbar";
import Navbar from "./Navbar";
const Header = () => {
return (
<header className="border-b border-gray-200">
{/* Topbar - 頂部欄 */}
<Topbar />
{/* Navbar - 導覽列 */}
<Navbar />
{/* Cart Drawer 購物車抽屜 */}
</header>
);
};
export default Header;
// frontend/src/components/Layout/Topbar.jsx
import React from "react";
import { TbBrandMeta } from "react-icons/tb";
import { IoLogoInstagram } from "react-icons/io";
import { RiTwitterXLine } from "react-icons/ri";
const Topbar = () => {
return (
<div className="bg-[#ea2e0e] text-white">
<div className="container mx-auto flex justify-between items-center py-3 px-4">
<div className="hidden md:flex items-center space-x-4">
<a href="#" className="hover:text-gray-300">
<TbBrandMeta className="h-5 w-5" />
</a>
<a href="#" className="hover:text-gray-300">
<IoLogoInstagram className="h-5 w-5" />
</a>
<a href="#" className="hover:text-gray-300">
<RiTwitterXLine className="h-4 w-4" />
</a>
</div>
<div className="text-sm text-center flex-grow">
<span>We ship worldwide - Fast and reliable shipping!</span>
</div>
<div className="text-sm hidden md:block">
<a href="tel:+1234567890" className="hover:text-gray-300">
+1 (234) 567-890
</a>
</div>
</div>
</div>
);
};
export default Topbar;
// frontend/src/components/Common/Navbar.jsx
import React from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
const Navbar = () => {
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button className="relative hover:text-black">
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
4
</span>
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
</>
);
};
export default Navbar;
// frontend/src/components/Common/SearchBar.jsx
import React, { useState } from "react";
import { HiMagnifyingGlass, HiMiniXMark } from "react-icons/hi2";
const SearchBar = () => {
const [searchTerm, setSearchTerm] = useState("");
const [isOpen, setIsOpen] = useState(false);
const handleSearchToggle = () => {
setIsOpen(!isOpen);
};
const handleSearch = (e) => {
e.preventDefault();
console.log("Search Term:", searchTerm);
setIsOpen(false);
};
return (
<div
className={`flex items-center justify-center w-full transition-all duration-300 ${
isOpen ? "absolute top-0 left-0 w-full bg-white h-24 z-50" : "w-auto"
}`}
>
{isOpen ? (
<form
onSubmit={handleSearch}
className="relative flex items-center justify-center w-full"
>
<div className="relative w-1/2">
<input
type="text"
placeholder="Search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="bg-gray-100 px-4 py-2 pl-2 pr-12 rounded-lg focus:outline-none w-full placeholder:text-gray-700"
/>
{/* search icon - 搜尋圖示 */}
<button
type="submit"
className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-600 hover:text-gray-800"
>
<HiMagnifyingGlass className="h-6 w-6" />
</button>
</div>
{/* close button - 關閉的按鈕 */}
<button
type="button"
onClick={handleSearchToggle}
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-600 hover:text-gray-800"
>
<HiMiniXMark className="h-6 w-6" />
</button>
</form>
) : (
<button onClick={handleSearchToggle}>
<HiMagnifyingGlass className="h-6 w-6" />
</button>
)}
</div>
);
};
export default SearchBar;
客製化 tailwind.config.js 樣式
// frontend/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"rabbit-red": "#ea2e0e",
},
},
},
plugins: [],
};
製作購物車抽屜、購物車內容組件、手機版導覽
// frontend/src/components/Layout/CartDrawer.jsx
import React, { useState } from "react";
import { IoMdClose } from "react-icons/io";
import CartContents from "../Cart/CartContents";
const CartDrawer = ({ drawerOpen, toggleCartDrawer }) => {
return (
<div
className={`fixed top-0 right-0 w-3/4 sm:w-1/2 md:w-[30rem] h-full bg-white shadow-lg transform transition-transform duration-300 flex flex-col z-50 ${
drawerOpen ? "translate-x-0" : "translate-x-full"
}`}
>
{/* Close Button - 關閉的按鈕 */}
<div className="flex justify-end p-4">
<button onClick={toggleCartDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
{/* Cart contents with scrollable area - 具有可滾動區域的購物車內容 */}
<div className="flex-grow p-4 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4">Your Cart</h2>
{/* Component for Cart Contents - 購物車內容組件 */}
<CartContents />
</div>
{/* Checkout button fixed at the bottom - 結帳按鈕固定在底部 */}
<div className="p-4 bg-white sticky bottom-0">
<button className="w-full bg-black text-white py-3 rounded-lg font-semibold hover:bg-gray-800 transition">
Checkout
</button>
<p className="text-sm tracking-tighter text-gray-500 mt-2 text-center">
Shipping, taxes, and discount codes calculated at checkout.
</p>
</div>
</div>
);
};
export default CartDrawer;
// frontend/src/components/Common/Navbar.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
import CartDrawer from "../Layout/CartDrawer";
import { IoMdClose } from "react-icons/io";
const Navbar = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [navDrawerOpen, setNavDrawerOpen] = useState(false);
const toggleNavDrawer = () => {
setNavDrawerOpen(!navDrawerOpen);
};
const toggleCartDrawer = () => {
setDrawerOpen(!drawerOpen);
};
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button
onClick={toggleCartDrawer}
className="relative hover:text-black"
>
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
4
</span>
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button onClick={toggleNavDrawer} className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
<CartDrawer drawerOpen={drawerOpen} toggleCartDrawer={toggleCartDrawer} />
{/* Mobile Navigation - 手機版導覽 */}
<div
className={`fixed top-0 left-0 w-3/4 sm:w-1/2 md:w-1/3 h-full bg-white shadow-lg transform transition-transform duration-300 z-50 ${
navDrawerOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex justify-end p-4">
<button onClick={toggleNavDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
<div className="p-4">
<h2 className="text-xl font-semibold mb-4">Menu</h2>
<nav className="space-y-4">
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Men
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Women
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Top Wear
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Bottom Wear
</Link>
</nav>
</div>
</div>
</>
);
};
export default Navbar;
// frontend/src/components/Cart/CartContents.jsx
import React from "react";
import { RiDeleteBin3Line } from "react-icons/ri";
const CartContents = () => {
const cartProducts = [
{
productId: 1,
name: "T-shirt",
size: "M",
color: "Red",
quantity: 1,
price: 15,
image: "https://picsum.photos/200?random=1",
},
{
productId: 2,
name: "Jeans",
size: "L",
color: "Blue",
quantity: 1,
price: 25,
image: "https://picsum.photos/200?random=2",
},
];
return (
<div>
{cartProducts.map((product, index) => (
<div
key={index}
className="flex items-start justify-between py-4 border-b"
>
<div className="flex items-start">
<img
src={product.image}
alt={product.name}
className="w-20 h-24 object-cover mr-4 rounded"
/>
<div>
<h3>{product.name}</h3>
<p className="text-sm text-gray-500">
size: {product.size} | color: {product.color}
</p>
<div className="flex items-center mt-2">
<button className="border rounded px-2 py-1 text-xl font-medium">
-
</button>
<span className="mx-4">{product.quantity}</span>
<button className="border rounded px-2 py-1 text-xl font-medium">
+
</button>
</div>
</div>
</div>
<div>
<p>$ {product.price.toLocaleString()}</p>
<button>
<RiDeleteBin3Line className="h-6 w-6 mt-2 text-red-600" />
</button>
</div>
</div>
))}
</div>
);
};
export default CartContents;
製作 Footer Section (頁尾區域)
// frontend/src/components/Common/Footer.jsx
import React from "react";
import { Link } from "react-router-dom";
import { TbBrandMeta } from "react-icons/tb";
import { IoLogoInstagram } from "react-icons/io";
import { RiTwitterXLine } from "react-icons/ri";
import { FiPhoneCall } from "react-icons/fi";
const Footer = () => {
return (
<footer className="border-t py-12">
<div className="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-4 lg:px-0">
<div>
<h3 className="text-lg text-gray-800 mb-4">Newsletter</h3>
<p className="text-gray-500 mb-4">
Be the first to hear about new products, exclusive events, and
online offers.
</p>
<p className="font-medium text-sm text-gray-600 mb-6">
Sign up and get 10% off your first order.
</p>
{/* Newsletter form */}
<form className="flex">
<input
type="email"
placeholder="Enter your email"
className="p-3 w-full text-sm border-t border-l border-b border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all"
required
/>
<button
type="submit"
className="bg-black text-white px-6 py-3 text-sm rounded-r-md hover:bg-gray-800 transition-all"
>
Subscribe
</button>
</form>
</div>
{/* Shop links - 購物連結 */}
<div>
<h3 className="text-lg text-gray-800 mb-4">Shop</h3>
<ul className="space-y-2 text-gray-600">
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
Men's Top Wear
</Link>
</li>
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
Women's Top Wear
</Link>
</li>
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
Men's Bottom Wear
</Link>
</li>
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
Women's Bottom Wear
</Link>
</li>
</ul>
</div>
{/* Support Links - 支援連結 */}
<div>
<h3 className="text-lg text-gray-800 mb-4">Support</h3>
<ul className="space-y-2 text-gray-600">
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
Contact Us
</Link>
</li>
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
About Us
</Link>
</li>
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
FAQs
</Link>
</li>
<li>
<Link to="#" className="hover:text-gray-600 transition-colors">
Features
</Link>
</li>
</ul>
</div>
{/* Follow us - 追蹤我們 */}
<div>
<h3 className="text-lg text-gray-800 mb-4">Follow Us</h3>
<div className="flex items-center space-x-4 mb-6">
<a
href="https://www.facebook.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-gray-500"
>
<TbBrandMeta className="h-5 w-5" />
</a>
<a
href="https://www.instagram.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-gray-500"
>
<IoLogoInstagram className="h-5 w-5" />
</a>
<a
href="https://x.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-gray-500"
>
<RiTwitterXLine className="h-4 w-4" />
</a>
</div>
<p className="text-gray-500">Call Us</p>
<p>
<FiPhoneCall className="inline-block mr-2" />
0123-456-789
</p>
</div>
</div>
{/* Footer Bottom - 頁尾底部 */}
<div className="container mx-auto mt-12 px-4 lg:px-0 border-t border-gray-200 pt-6">
<p className="text-gray-500 text-sm tracking-tighter text-center">
© 2025, Learning From CompileTab. All Rights Reserved.
</p>
</div>
</footer>
);
};
export default Footer;
// frontend/src/components/Layout/UserLayout.jsx
import React from "react";
import Header from "../Common/Header";
import Footer from "../Common/Footer";
const UserLayout = () => {
return (
<>
{/* Header */}
<Header />
{/* Main content */}
{/* Footer */}
<Footer />
</>
);
};
export default UserLayout;
製作 Main Content (主要內容)
// frontend/src/pages/Home.jsx
import React from "react";
import Hero from "../components/Layout/Hero";
import GenderCollectionSection from "../components/Products/GenderCollectionSection";
import NewArrivals from "../components/Products/NewArrivals";
import ProductDetails from "../components/Products/ProductDetails";
import ProductGrid from "../components/Products/ProductGrid";
import FeaturedCollection from "../components/Products/FeaturedCollection";
import FeaturesSection from "../components/Products/FeaturesSection";
const placeholderProducts = [
{
_id: 1,
name: "Product 1",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=3",
},
],
},
{
_id: 2,
name: "Product 2",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=4",
},
],
},
{
_id: 3,
name: "Product 3",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=5",
},
],
},
{
_id: 4,
name: "Product 4",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=6",
},
],
},
{
_id: 5,
name: "Product 5",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=7",
},
],
},
{
_id: 6,
name: "Product 6",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=8",
},
],
},
{
_id: 7,
name: "Product 7",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=9",
},
],
},
{
_id: 8,
name: "Product 8",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=10",
},
],
},
];
const Home = () => {
return (
<div>
<Hero />
<GenderCollectionSection />
<NewArrivals />
{/* Best Seller - 暢銷商品 */}
<h2 className="text-3xl text-center font-bold mb-4">Best Seller</h2>
<ProductDetails />
<div className="container mx-auto">
<h2 className="text-3xl text-center font-bold mb-4">
Top Wears for Women
</h2>
<ProductGrid products={placeholderProducts} />
</div>
<FeaturedCollection />
<FeaturesSection />
</div>
);
};
export default Home;
// frontend/src/components/Layout/Hero.jsx
import React from "react";
import heroImg from "../../assets/rabbit-hero.webp";
import { Link } from "react-router-dom";
const Hero = () => {
return (
<section className="relative">
<img
src={heroImg}
alt="Rabbit"
className="w-full h-[400px] md:h-[600px] lg:h-[750px] object-cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-5 flex items-center justify-center">
<div className="text-center text-white p-6">
<h1 className="text-4xl md:text-9xl font-bold tracking-tighter uppercase mb-4">
Vacation <br /> Ready
</h1>
<p className="text-sm tracking-tighter md:text-lg mb-6">
Explore our vaction-ready outfits with fast worldwide shipping.
</p>
<Link
to="#"
className="bg-white text-gray-950 px-6 py-3 rounded-sm text-lg"
>
Shop Now
</Link>
</div>
</div>
</section>
);
};
export default Hero;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// frontend/src/components/Layout/UserLayout.jsx
import React from "react";
import Header from "../Common/Header";
import Footer from "../Common/Footer";
import { Outlet } from "react-router-dom";
const UserLayout = () => {
return (
<>
{/* Header */}
<Header />
{/* Main content */}
<main>
<Outlet />
</main>
{/* Footer */}
<Footer />
</>
);
};
export default UserLayout;
// frontend/src/components/Products/GenderCollectionSection.jsx
import React from "react";
import mensCollectionImage from "../../assets/mens-collection.webp";
import womenCollectionImage from "../../assets/womens-collection.webp";
import { Link } from "react-router-dom";
const GenderCollectionSection = () => {
return (
<section className="py-16 px-4 lg:px-0">
<div className="container mx-auto flex flex-col md:flex-row gap-8">
{/* Women's Collection - 女裝系列 */}
<div className="relative flex-1">
<img
src={womenCollectionImage}
alt="Women's Collection"
className="w-full h-[700px] object-cover"
/>
<div className="absolute bottom-8 left-8 bg-white bg-opacity-90 p-4">
<h2 className="text-2xl font-bold text-gray-900 mb-3">
Women's Collection
</h2>
<Link
to="/collections/all?gender=Women"
className="text-gray-900 underline"
>
Shop Now
</Link>
</div>
</div>
{/* Men's Collection - 男裝系列 */}
<div className="relative flex-1">
<img
src={mensCollectionImage}
alt="Men's Collection"
className="w-full h-[700px] object-cover"
/>
<div className="absolute bottom-8 left-8 bg-white bg-opacity-90 p-4">
<h2 className="text-2xl font-bold text-gray-900 mb-3">
Men's Collection
</h2>
<Link
to="/collections/all?gender=Men"
className="text-gray-900 underline"
>
Shop Now
</Link>
</div>
</div>
</div>
</section>
);
};
export default GenderCollectionSection;
// frontend/src/components/Products/NewArrivals.jsx
import React, { useEffect, useRef, useState } from "react";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
import { Link } from "react-router-dom";
const NewArrivals = () => {
const scrollRef = useRef(null); // 用於引用滾動容器的 DOM 元素
const [isDragging, setIsDragging] = useState(false);
const [startX, setStartX] = useState(0);
// const [scrollLeft, setScrollLeft] = useState(false);
// scrollLeft 是用來儲存滾動容器水平方向的偏移量，它應該是數字型態而非布林值。
const [scrollLeft, setScrollLeft] = useState(0);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(true);
const newArrivals = [
{
_id: "1",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=1",
altText: "Stylish Jacket",
},
],
},
{
_id: "2",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=2",
altText: "Stylish Jacket",
},
],
},
{
_id: "3",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=3",
altText: "Stylish Jacket",
},
],
},
{
_id: "4",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=4",
altText: "Stylish Jacket",
},
],
},
{
_id: "5",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=5",
altText: "Stylish Jacket",
},
],
},
{
_id: "6",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=6",
altText: "Stylish Jacket",
},
],
},
{
_id: "7",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=7",
altText: "Stylish Jacket",
},
],
},
{
_id: "8",
name: "Stylish Jacket",
price: 120,
images: [
{
url: "https://picsum.photos/500/500?random=8",
altText: "Stylish Jacket",
},
],
},
];
const handleMouseDown = (e) => {
setIsDragging(true); // 開始拖曳
setStartX(e.pageX - scrollRef.current.offsetLeft); // 記錄滑鼠按下時的 X 座標，減去容器的偏移量
setScrollLeft(scrollRef.current.scrollLeft); // 記錄滾動容器當前的 scrollLeft (滾動位置)
};
const handleMouseMove = (e) => {
if (!isDragging) return; // 如果沒有正在拖曳，則不進行後續操作
const x = e.pageX - scrollRef.current.offsetLeft; // 計算滑鼠相對於容器的 X 座標
const walk = x - startX; // 計算滑鼠移動的距離
scrollRef.current.scrollLeft = scrollLeft - walk; // 根據滑鼠移動的距離更新滾動位置
};
const handleMouseUpOrLeave = () => {
setIsDragging(false); // 停止拖曳，將 isDraggin 設為 false
};
const scroll = (direction) => {
const scrollAmount = direction === "left" ? -300 : 300; // 根據方向決定滾動的距離
scrollRef.current.scrollBy({ left: scrollAmount, behaviour: "smooth" }); // 進行平滑滾動
};
// Update Scroll Buttons - 更新滾動的按鈕
const updateScrollButtons = () => {
const container = scrollRef.current; // 取得滾動容器的引用
if (container) {
const leftScroll = container.scrollLeft; // 取得當前滾動容器的滾動位置 (距離左邊的偏移量)
const rightScrollable =
container.scrollWidth > leftScroll + container.clientWidth; // 檢查是否還有內容可以向右滾動
setCanScrollLeft(leftScroll > 0); // 如果滾動位置大於 0，則可以向左滾動
setCanScrollRight(rightScrollable); // 如果總容器寬度大於當前滾動位置加上可視範圍，則可以向右滾動
}
// 用來調試，輸出滾動容器的一些狀態信息
// console.log({
// scrollLeft: container.scrollLeft, // 當前滾動位置
// clientWidth: container.clientWidth, // 容器的可見寬度
// containerScrollWidth: container.scrollWidth, // 容器內容的總寬度
// offsetLeft: scrollRef.current.offsetLeft, // 滾動容器相對於頁面左邊的偏移量
// });
};
useEffect(() => {
const container = scrollRef.current; // 取得滾動容器的 DOM 元素
if (container) {
// 如果容器存在，則添加滾動事件監聽器
container.addEventListener("scroll", updateScrollButtons);
// 呼叫一次 updateScrollButtons 來初始化滾動按鈕狀態
updateScrollButtons();
// 返回清理函數，在組件卸載時移除滾動事件監聽器
return () => container.removeEventListener("scroll", updateScrollButtons);
}
}, []);
return (
<section className="py-16 px-4 lg:px-0">
<div className="container mx-auto text-center mb-10 relative">
<h2 className="text-3xl font-bold mb-4">Explore New Arrivals</h2>
<p className="text-lg text-gray-600 mb-8">
Discover the latest styles straight off the runway, freshly added to
keep your wardrobe on the cutting edge of fashion.
</p>
{/* Scroll Buttons - 滾動按鈕 */}
<div className="absolute right-0 bottom-[-30px] flex space-x-2">
<button
onClick={() => scroll("left")}
disabled={!canScrollLeft}
className={`p-2 rounded border ${
canScrollLeft
? "bg-white text-black"
: "bg-gray-200 text-gray-400 cursor-not-allowed"
}`}
>
<FiChevronLeft className="text-2xl" />
</button>
<button
onClick={() => scroll("right")}
className={`p-2 rounded border ${
canScrollRight
? "bg-white text-black"
: "bg-gray-200 text-gray-400 cursor-not-allowed"
}`}
>
<FiChevronRight className="text-2xl" />
</button>
</div>
</div>
{/* Scrollable Content - 可滾動內容 */}
<div
ref={scrollRef}
className={`container mx-auto overflow-x-scroll flex space-x-6 relative ${
isDragging ? "cursor-grabbing" : "cursor-grab"
}`}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUpOrLeave}
onMouseLeave={handleMouseUpOrLeave}
>
{newArrivals.map((product) => (
<div
key={product._id}
className="min-w-[100%] sm:min-w-[50%] lg:min-w-[30%] relative"
>
<img
src={product.images[0]?.url}
alt={product.images[0]?.altText || product.name}
className="w-full h-[500px] object-cover rounded-lg"
draggable="false"
/>
<div className="absolute bottom-0 left-0 right-0 bg-opacity-50 backdrop-blur-md text-white p-4 rounded-b-lg">
<Link to={`/product/${product._id}`} className="block">
<h4 className="font-medium">{product.name}</h4>
<p className="mt-1">${product.price}</p>
</Link>
</div>
</div>
))}
</div>
</section>
);
};
export default NewArrivals;
// frontend/src/components/Products/ProductDetails.jsx
import React, { useEffect, useState } from "react";
import { toast } from "sonner";
import ProductGrid from "./ProductGrid";
const selectedProduct = {
name: "Stylish Jacket",
price: 120,
originalPrice: 150,
description: "This is a stylish Jacket perfect for any occasion",
brand: "FashionBrand",
material: "Leather",
sizes: ["S", "M", "L", "XL"],
colors: ["Red", "Black"],
images: [
{
url: "https://picsum.photos/500/500?random=1",
altText: "Stylish Jacket 1",
},
{
url: "https://picsum.photos/500/500?random=2",
altText: "Stylish Jacket 2",
},
],
};
const similarProducts = [
{
_id: 1,
name: "Product 1",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=3",
},
],
},
{
_id: 2,
name: "Product 2",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=4",
},
],
},
{
_id: 3,
name: "Product 3",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=5",
},
],
},
{
_id: 4,
name: "Product 4",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=6",
},
],
},
];
const ProductDetails = () => {
const [mainImage, setMainImage] = useState(""); // 用來存儲主圖像的狀態，初始值為空字符串
const [selectedSize, setSelectedSize] = useState(""); // 用來存儲選擇的尺碼的狀態，初始值為空字符串
const [selectedColor, setSelectedColor] = useState(""); // 用來存儲選擇的顏色的狀態，初始值為空字符串
const [quantity, setQuantity] = useState(1); // 用來存儲選擇的購買數量的狀態，初始值為 1
const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 用來控制按鈕是否禁用的狀態，初始值為 false (按鈕可用)
// 使用 useEffect 當 selectedProduct 變化時更新主圖片
useEffect(() => {
// 檢查 selectedProduct 是否有圖片，並且圖片陣列長度大於 0
if (selectedProduct?.images?.length > 0) {
// 更新主圖片為第一張圖片的 URL
setMainImage(selectedProduct.images[0].url);
}
}, [selectedProduct]); // 當 selectedProduct 變化時執行這個效果
// 定義一個函數來處理購買數量的增減操作
const handleQuantityChange = (action) => {
// 如果 action 是 "plus"，則增加數量
if (action === "plus") setQuantity((prev) => prev + 1);
// 如果 action 是 "minus" 且數量大於 1，則減少數量
if (action === "minus" && quantity > 1) setQuantity((prev) => prev - 1);
};
// 定義函數處理將商品加入購物車的操作
const handleAddToCart = () => {
// 檢查用戶是否選擇了尺碼和顏色
if (!selectedSize || !selectedColor) {
// 如果沒有選擇尺碼或顏色，顯示錯誤通知
toast.error("Please select a size and color before adding to cart.", {
duration: 1000, // 設置錯誤通知顯示 1 秒
});
return; // 退出函數，不執行後續操作
}
// 禁用按鈕，防止重複點擊
setIsButtonDisabled(true);
// 設置 500 毫秒延時，模擬加入購物車過程
setTimeout(() => {
// 顯示成功通知，告訴用戶商品已添加到購物車
toast.success("Product added to cart!", {
duration: 1000, // 成功通知顯示 1 秒
});
// 重新啟用按鈕
setIsButtonDisabled(false);
}, 500); // 延時 500 毫秒
};
return (
<div className="p-6">
<div className="max-w-6xl mx-auto bg-white p-8 rounded-lg">
<div className="flex flex-col md:flex-row">
{/* Left Thumbnails - 左側縮圖 */}
<div className="hidden md:flex flex-col space-y-4 mr-6">
{selectedProduct.images.map((image, index) => (
<img
key={index}
src={image.url}
alt={image.altText || `Thumbnail ${index}`}
className={`w-20 h-20 object-cover rounded-lg cursor-pointer border ${
mainImage === image.url ? "border-black" : "border-gray-300"
}`}
onClick={() => setMainImage(image.url)}
/>
))}
</div>
{/* Main Image - 主要的圖片 */}
<div className="md:w-1/2">
<div className="mb-4">
{/* 僅當 mainImage 不是空字符串時，才渲染圖片 */}
{mainImage && (
<img
src={mainImage}
alt="Main Product"
className="w-full h-auto object-cover rounded-lg"
/>
)}
</div>
</div>
{/* Mobile Thumbnail - 手機板型縮圖 */}
<div className="md:hidden flex overflow-x-scroll space-x-4 mb-4">
{selectedProduct.images.map((image, index) => (
<img
key={index}
src={image.url}
alt={image.altText || `Thumbnail ${index}`}
className={`w-20 h-20 object-cover rounded-lg cursor-pointer border ${
mainImage === image.url ? "border-black" : "border-gray-300"
}`}
onClick={() => setMainImage(image.url)}
/>
))}
</div>
{/* Right Side - 右側 */}
<div className="md:w-1/2 md:ml-10">
<h1 className="text-2xl md:text-3xl font-semibold mb-2">
{selectedProduct.name}
</h1>
<p className="text-lg text-gray-600 mb-1 line-through">
{selectedProduct.originalPrice &&
`${selectedProduct.originalPrice}`}
</p>
<p className="text-xl text-gray-500 mb-2">
$ {selectedProduct.price}
</p>
<p className="text-gray-600 mb-4">{selectedProduct.description}</p>
<div className="mb-4">
<p className="text-gray-700">Color:</p>
<div className="flex gap-2 mt-2">
{selectedProduct.colors.map((color) => (
<button
key={color}
onClick={() => setSelectedColor(color)}
className={`w-8 h-8 rounded-full border ${
selectedColor === color
? "border-4 border-black"
: "border-gray-300"
}`}
style={{
backgroundColor: color.toLocaleLowerCase(),
filter: "brightness(0.5)",
}}
></button>
))}
</div>
</div>
<div className="mb-4">
<p className="text-gray-700">Size:</p>
<div className="flex gap-2 mt-2">
{selectedProduct.sizes.map((size) => (
<button
key={size}
onClick={() => setSelectedSize(size)}
className={`px-4 py-2 rounded border ${
selectedSize === size ? "bg-black text-white" : ""
}`}
>
{size}
</button>
))}
</div>
</div>
<div className="mb-6">
<p className="text-gray-700">Quantity:</p>
<div className="flex items-center space-x-4 mt-2">
<button
onClick={() => handleQuantityChange("minus")}
className="px-2 py-1 bg-gray-200 rounded text-lg"
>
-
</button>
<span className="text-lg">{quantity}</span>
<button
onClick={() => handleQuantityChange("plus")}
className="px-2 py-1 bg-gray-200 rounded text-lg"
>
+
</button>
</div>
</div>
<button
onClick={handleAddToCart}
disabled={isButtonDisabled}
className={`bg-black text-white py-2 px-6 rounded w-full mb-4 ${
isButtonDisabled
? "cursor-not-allowed opacity-50"
: "hover:bg-gray-900"
}`}
>
{isButtonDisabled ? "Adding..." : "ADD TO CART"}
</button>
<div className="mt-10 text-gray-700">
<h3 className="text-xl font-bold mb-4">Characteristics:</h3>
<table className="w-full text-left text-sm text-gray-600">
<tbody>
<tr>
<td className="py-1">Brand</td>
<td className="py-1">{selectedProduct.brand}</td>
</tr>
<tr>
<td className="py-1">Material</td>
<td className="py-1">{selectedProduct.material}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="mt-20">
<h2 className="text-2xl text-center font-medium mb-4">
You May Also Like
</h2>
<ProductGrid products={similarProducts} />
</div>
</div>
</div>
);
};
export default ProductDetails;
使用 Sonner 套件
An opinionated toast component for React.Render a toast
// frontend/src/components/Products/ProductGrid.jsx
import React from "react";
import { Link } from "react-router-dom";
const ProductGrid = ({ products }) => {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{products.map((product, index) => (
<Link key={index} to={`/product/${product._id}`} className="block">
<div className="bg-white p-4 rounded-lg">
<div className="w-full h-96 mb-4">
<img
src={product.images[0].url}
alt={product.images[0].altText || product.name}
className="w-full h-full object-cover rounded-lg"
/>
</div>
<h3 className="text-sm mb-2">{product.name}</h3>
<p className="text-gray-500 font-medium text-sm tracking-tighter">
$ {product.price}
</p>
</div>
</Link>
))}
</div>
);
};
export default ProductGrid;
// frontend/src/components/Products/FeaturedCollection.jsx
import React from "react";
import { Link } from "react-router-dom";
import featured from "../../assets/featured.webp";
const FeaturedCollection = () => {
return (
<section className="py-16 px-4 lg:px-0">
<div className="container mx-auto flex flex-col-reverse lg:flex-row items-center bg-green-50 rounded-3xl">
{/* Left Content - 左邊內容 */}
<div className="lg:w-1/2 p-8 text-center lg:text-left">
<h2 className="text-lg font-semibold text-gray-700 mb-2">
Comfort and Style
</h2>
<h2 className="text-4xl lg:text-5xl font-bold mb-6">
Apparel made for your everyday life
</h2>
<p className="text-lg text-gray-600 mb-6">
Discover high-quality, comfortable clothing that effortlessly blends
fashion and function. Designed to make you look and feel great every
day.
</p>
<Link
to="/collection/all"
className="bg-black text-white px-6 py-3 rounded-lg text-lg hover:bg-gray-800"
>
Shop Now
</Link>
</div>
{/* Right Content - 右邊內容 */}
<div className="lg:w-1/2">
<img
src={featured}
alt="Featured Collection"
className="w-full h-full object-cover lg:rounded-tr-3xl lg:rounded-br-3xl"
/>
</div>
</div>
</section>
);
};
export default FeaturedCollection;
// frontend/src/components/Products/FeaturesSection.jsx
import React from "react";
import {
HiArrowPathRoundedSquare,
HiOutlineCreditCard,
HiShoppingBag,
} from "react-icons/hi2";
const FeaturesSection = () => {
return (
<section className="py-16 px-4 bg-white">
<div className="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
{/* Feature 1 - 特色 1 */}
<div className="flex flex-col items-center">
<div className="p-4 rounded-full mb-4">
<HiShoppingBag className="text-xl" />
</div>
<h4 className="tracking-tighter mb-2">FREE INTERNATIONAL SHIPPING</h4>
<p className="text-gray-600 text-sm tracking-tighter">
On all orders over $100.00
</p>
</div>
{/* Feature 2 - 特色 2 */}
<div className="flex flex-col items-center">
<div className="p-4 rounded-full mb-4">
<HiArrowPathRoundedSquare className="text-xl" />
</div>
<h4 className="tracking-tighter mb-2">45 DAYS RETURN</h4>
<p className="text-gray-600 text-sm tracking-tighter">
Money back guarantee
</p>
</div>
{/* Feature 3 - 特色 3 */}
<div className="flex flex-col items-center">
<div className="p-4 rounded-full mb-4">
<HiOutlineCreditCard className="text-xl" />
</div>
<h4 className="tracking-tighter mb-2">SECURE CHECKOUT</h4>
<p className="text-gray-600 text-sm tracking-tighter">
100% secured checkout process
</p>
</div>
</div>
</section>
);
};
export default FeaturesSection;
製作登入頁面、註冊頁面
// frontend/src/pages/Login.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import login from "../assets/login.webp";
const Login = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
console.log("User Login:", { email, password });
};
return (
<div className="flex">
<div className="w-full md:w-1/2 flex flex-col justify-center items-center p-8 md:p-12">
<form
onSubmit={handleSubmit}
className="w-full max-w-md bg-white p-8 rounded-lg border shadow-sm"
>
<div className="flex justify-center mb-6">
<h2 className="text-xl font-medium">Rabbit</h2>
</div>
<h2 className="text-2xl font-bold text-center mb-6">Hey there! </h2>
<p className="text-center mb-6">
Enter your username and password to Login.
</p>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your email address"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-black text-white p-2 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Sign In
</button>
<p className="mt-6 text-center text-sm">
Don't have an account?{" "}
<Link to="/register" className="text-blue-500">
Register
</Link>
</p>
</form>
</div>
<div className="hidden md:block w-1/2 bg-gray-800">
<div className="h-full flex flex-col justify-center items-center">
<img
src={login}
alt="Login to Account"
className="h-[750px] w-full object-cover"
/>
</div>
</div>
</div>
);
};
export default Login;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// frontend/src/pages/Register.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import register from "../assets/register.webp";
const Register = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
console.log("User Registered:", { name, email, password });
};
return (
<div className="flex">
<div className="w-full md:w-1/2 flex flex-col justify-center items-center p-8 md:p-12">
<form
onSubmit={handleSubmit}
className="w-full max-w-md bg-white p-8 rounded-lg border shadow-sm"
>
<div className="flex justify-center mb-6">
<h2 className="text-xl font-medium">Rabbit</h2>
</div>
<h2 className="text-2xl font-bold text-center mb-6">Hey there! </h2>
<p className="text-center mb-6">
Enter your username and password to Login.
</p>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your name"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your email address"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-black text-white p-2 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Sign Up
</button>
<p className="mt-6 text-center text-sm">
Don't have an account?{" "}
<Link to="/login" className="text-blue-500">
Login
</Link>
</p>
</form>
</div>
<div className="hidden md:block w-1/2 bg-gray-800">
<div className="h-full flex flex-col justify-center items-center">
<img
src={register}
alt="Login to Account"
className="h-[750px] w-full object-cover"
/>
</div>
</div>
</div>
);
};
export default Register;
// frontend/src/pages/Profile.jsx
import React from "react";
import MyOrdersPage from "./MyOrdersPage";
const Profile = () => {
return (
<div className="min-h-screen flex flex-col">
<div className="flex-grow container mx-auto p-4 md:p-6">
<div className="flex flex-col md:flex-row md:space-x-6 space-y-6 md:space-y-0">
{/* Left Section - 左側區域 */}
<div className="w-full md:w-1/3 lg:w-1/4 shadow-md rounded-lg p-6">
<h1 className="text-2xl md:text-3xl font-bold mb-4">John Doe</h1>
<p className="text-lg text-gray-600 mb-4">John@example.com</p>
<button className="w-full bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600">
Logout
</button>
</div>
{/* Right Section: Orders table - 右側區域: 訂單表格 */}
<div className="w-full md:w-2/3 lg:w-3/4">
<MyOrdersPage />
</div>
</div>
</div>
</div>
);
};
export default Profile;
// frontend/src/pages/MyOrdersPage.jsx
import React, { useEffect, useState } from "react";
const MyOrdersPage = () => {
const [orders, setOrders] = useState([]);
useEffect(() => {
// Simulate fetching orders - 模擬獲取訂單
setTimeout(() => {
const mockOrders = [
{
_id: "12345",
createdAt: new Date(),
shippingAddress: { city: "New York", country: "USA" },
orderItems: [
{
name: "Product 1",
image: "https://picsum.photos/500/500?random=1",
},
],
totalPrice: 100,
isPaid: true,
},
{
_id: "34567",
createdAt: new Date(),
shippingAddress: { city: "New York", country: "USA" },
orderItems: [
{
name: "Product 2",
image: "https://picsum.photos/500/500?random=2",
},
],
totalPrice: 100,
isPaid: true,
},
];
setOrders(mockOrders);
}, 1000);
}, []);
return (
<div className="max-w-7xl mx-auto p-4 sm:p-6">
<h2 className="text-xl sm:text-2xl font-bold mb-6">My Orders</h2>
<div className="relative shadow-md sm:rounded-lg overflow-hidden">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-2 px-4 sm:py-3">Image</th>
<th className="py-2 px-4 sm:py-3">Order ID</th>
<th className="py-2 px-4 sm:py-3">Created</th>
<th className="py-2 px-4 sm:py-3">Shipping Address</th>
<th className="py-2 px-4 sm:py-3">Items</th>
<th className="py-2 px-4 sm:py-3">Price</th>
<th className="py-2 px-4 sm:py-3">Status</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
className="border-b hover:border-gray-50 cursor-pointer"
>
<td className="py-2 px-2 sm:py-4 sm:px-4">
<img
src={order.orderItems[0].image}
alt={order.orderItems[0].name}
className="w-10 h-10 sm:w-12 sm:h-12 object-cover rounded-lg"
/>
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4 font-medium text-gray-900 whitespace-nowrap">
#{order._id}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{new Date(order.createdAt).toLocaleDateString()}{" "}
{new Date(order.createdAt).toLocaleTimeString()}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{order.shippingAddress
? `${order.shippingAddress.city}, ${order.shippingAddress.country}`
: "N/A"}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{order.orderItems.length}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
${order.totalPrice}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
<span
className={`${
order.isPaid
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
} px-2 py-1 rounded-full text-xs sm:text-sm font-medium`}
>
{order.isPaid ? "Paid" : "Pending"}
</span>
</td>
</tr>
))
) : (
<tr>
<td colSpan={7} className="py-4 px-4 text-center text-gray-500">
You have no orders
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default MyOrdersPage;
製作 Collection Section (系列區域)
// frontend/src/pages/CollectionPage.jsx
import React, { useEffect, useRef, useState } from "react";
import { FaFilter } from "react-icons/fa";
import FilterSidebar from "../components/Products/FilterSidebar";
import SortOptions from "../components/Products/SortOptions";
import ProductGrid from "../components/Products/ProductGrid";
const CollectionPage = () => {
const [products, setProducts] = useState([]);
const sidebarRef = useRef(null);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
const handleClickOutside = (e) => {
// Close sidebar if clicked outside - 如果點擊在外部則關閉側邊欄
if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
setIsSidebarOpen(false);
}
};
useEffect(() => {
// Add event listner for clicks - 為點擊事件添加事件監聽器
document.addEventListener("mousedown", handleClickOutside);
// clean event listener - 清除事件監聽器
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
useEffect(() => {
setTimeout(() => {
const fetchedProducts = [
{
_id: 1,
name: "Product 1",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=3",
},
],
},
{
_id: 2,
name: "Product 2",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=4",
},
],
},
{
_id: 3,
name: "Product 3",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=5",
},
],
},
{
_id: 4,
name: "Product 4",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=6",
},
],
},
{
_id: 5,
name: "Product 5",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=7",
},
],
},
{
_id: 6,
name: "Product 6",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=8",
},
],
},
{
_id: 7,
name: "Product 7",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=9",
},
],
},
{
_id: 8,
name: "Product 8",
price: 100,
images: [
{
url: "https://picsum.photos/500/500?random=10",
},
],
},
];
setProducts(fetchedProducts);
}, 1000);
}, []);
return (
<div className="flex flex-col lg:flex-row">
{/* Mobile Filter button - 手機篩選按鈕 */}
<button
onClick={toggleSidebar}
className="lg:hidden border p-2 flex justify-center items-center"
>
<FaFilter className="mr-2" /> Filters
</button>
{/* Filter Sidebar - 篩選側邊欄 */}
<div
ref={sidebarRef}
className={`${
isSidebarOpen ? "translate-x-0" : "-translate-x-full"
} fixed inset-y-0 z-50 left-0 w-64 bg-white overflow-y-auto transition-transform duration-300 lg:static lg:translate-x-0`}
>
<FilterSidebar />
</div>
<div className="flex-grow p-4">
<h2 className="text-2xl uppercase mb-4">All Collection</h2>
{/* Sort Options - 排序選項 */}
<SortOptions />
{/* Product Grid - 產品網格 */}
<ProductGrid products={products} />
</div>
</div>
);
};
export default CollectionPage;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route path="collections/:collection" element={<CollectionPage />} />
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// frontend/src/components/Common/Navbar.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
import CartDrawer from "../Layout/CartDrawer";
import { IoMdClose } from "react-icons/io";
const Navbar = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [navDrawerOpen, setNavDrawerOpen] = useState(false);
const toggleNavDrawer = () => {
setNavDrawerOpen(!navDrawerOpen);
};
const toggleCartDrawer = () => {
setDrawerOpen(!drawerOpen);
};
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="/collections/all"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button
onClick={toggleCartDrawer}
className="relative hover:text-black"
>
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
4
</span>
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button onClick={toggleNavDrawer} className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
<CartDrawer drawerOpen={drawerOpen} toggleCartDrawer={toggleCartDrawer} />
{/* Mobile Navigation - 手機版導覽 */}
<div
className={`fixed top-0 left-0 w-3/4 sm:w-1/2 md:w-1/3 h-full bg-white shadow-lg transform transition-transform duration-300 z-50 ${
navDrawerOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex justify-end p-4">
<button onClick={toggleNavDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
<div className="p-4">
<h2 className="text-xl font-semibold mb-4">Menu</h2>
<nav className="space-y-4">
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Men
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Women
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Top Wear
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Bottom Wear
</Link>
</nav>
</div>
</div>
</>
);
};
export default Navbar;
// frontend/src/components/Products/FilterSidebar.jsx
import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
const FilterSidebar = () => {
// x.com/?a=1&b=2
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
const [filters, setFilters] = useState({
category: "",
gender: "",
color: "",
size: [],
material: [],
brand: [],
minPrice: 0,
maxPrice: 100,
});
const [priceRange, setPriceRange] = useState([0, 100]);
const categories = ["Top Wear", "Bottom Wear"];
const colors = [
"Red",
"Blue",
"Black",
"Green",
"Yellow",
"Gray",
"White",
"Pink",
"Beige",
"Navy",
];
const sizes = ["XS", "S", "M", "L", "XL", "XXL"];
const materials = [
"Cotton",
"Wool",
"Denim",
"Polyester",
"Silk",
"Linen",
"Viscose",
"Fleece",
];
const brands = [
"Urban Threads",
"Modern Fit",
"Street Style",
"Beach Breeze",
"Fashionista",
"ChicStyle",
];
const genders = ["Men", "Women"];
useEffect(() => {
// {category: 'Top Wear', maxPrice: 100} => params.category
const params = Object.fromEntries([...searchParams]);
setFilters({
category: params.category || "",
gender: params.gender || "",
color: params.color || "",
size: params.size ? params.size.split(",") : [],
material: params.material ? params.material.split(",") : [],
brand: params.brand ? params.brand.split(",") : [],
minPrice: params.minPrice || 0,
maxPrice: params.maxPrice || 100,
});
setPriceRange([0, params.maxPrice || 100]);
}, [searchParams]);
const handleFilterChange = (e) => {
const { name, value, checked, type } = e.target;
// console.log({ name, value, checked, type });
let newFilters = { ...filters };
if (type === "checkbox") {
if (checked) {
newFilters[name] = [...(newFilters[name] || []), value]; // ["XS", "S"]
} else {
newFilters[name] = newFilters[name].filter((item) => item !== value);
}
} else {
newFilters[name] = value;
}
setFilters(newFilters);
// console.log(newFilters);
updateURLParams(newFilters);
};
const updateURLParams = (newFilters) => {
const params = new URLSearchParams();
// {category: "Top Wear", size: ["XS", "S"]}
Object.keys(newFilters).forEach((key) => {
if (Array.isArray(newFilters[key]) && newFilters[key].length > 0) {
params.append(key, newFilters[key].join(",")); // "XS,S"
} else if (newFilters[key]) {
params.append(key, newFilters[key]);
}
});
setSearchParams(params);
navigate(`?${params.toString()}`); // ?category=Bottom+Wear&size=XS%2CS
};
const handlePriceChange = (e) => {
const newPrice = e.target.value;
setPriceRange([0, newPrice]);
const newFilters = { ...filters, minPrice: 0, maxPrice: newPrice };
setFilters(filters);
updateURLParams(newFilters);
};
return (
<div className="p-4">
<h3 className="text-xl font-medium text-gray-800 mb-4">Filter</h3>
{/* Category Filter - 分類篩選 */}
<div className="mb-6">
<label className="block text-gray-600 font-medium mb-2">Category</label>
{categories.map((category) => (
<div key={category} className="flex items-center mb-1">
<input
type="radio"
name="category"
value={category}
onChange={handleFilterChange}
checked={filters.category === category}
className="mr-2 h-4 w-4 text-blue-500 focus:ring-blue-400 border-gray-300"
/>
<span className="text-gray-700">{category}</span>
</div>
))}
</div>
{/* Gender Filter - 性別篩選 */}
<div className="mb-6">
<label className="block text-gray-600 font-medium mb-2">Gender</label>
{genders.map((gender) => (
<div key={gender} className="flex items-center mb-1">
<input
type="radio"
name="gender"
value={gender}
onChange={handleFilterChange}
checked={filters.gender === gender}
className="mr-2 h-4 w-4 text-blue-500 focus:ring-blue-400 border-gray-300"
/>
<span className="text-gray-700">{gender}</span>
</div>
))}
</div>
{/* Color Filter - 顏色篩選 */}
<div className="mb-6">
<label className="block text-gray-600 font-medium mb-2">Color</label>
<div className="flex flex-wrap gap-2">
{colors.map((color) => (
<button
key={color}
name="color"
value={color}
onClick={handleFilterChange}
className={`w-8 h-8 rounded-full border border-gray-300 cursor-pointer transition hover:scale-105 ${
filters.color === color ? "ring-2 ring-blue-500" : ""
}`}
style={{ backgroundColor: color.toLowerCase() }}
></button>
))}
</div>
</div>
{/* Size Filter - 尺寸篩選 */}
<div className="mb-6">
<label className="block text-gray-600 font-medium mb-2">Size</label>
{sizes.map((size) => (
<div key={size} className="flex items-center mb-1">
<input
type="checkbox"
name="size"
value={size}
onChange={handleFilterChange}
checked={filters.size.includes(size)}
className="mr-2 h-4 w-4 text-blue-red focus:ring-blue-400 border-gray-300"
/>
<span className="text-gray-700">{size}</span>
</div>
))}
</div>
{/* Material Filter - 材質篩選 */}
<div className="mb-6">
<label className="block text-gray-600 font-medium mb-2">Material</label>
{materials.map((material) => (
<div key={material} className="flex items-center mb-1">
<input
type="checkbox"
name="material"
value={material}
onChange={handleFilterChange}
checked={filters.material.includes(material)}
className="mr-2 h-4 w-4 text-blue-red focus:ring-blue-400 border-gray-300"
/>
<span className="text-gray-700">{material}</span>
</div>
))}
</div>
{/* Brand Filter - 品牌篩選 */}
<div className="mb-6">
<label className="block text-gray-600 font-medium mb-2">Brand</label>
{brands.map((brand) => (
<div key={brand} className="flex items-center mb-1">
<input
type="checkbox"
name="brand"
value={brand}
onChange={handleFilterChange}
checked={filters.brand.includes(brand)}
className="mr-2 h-4 w-4 text-blue-red focus:ring-blue-400 border-gray-300"
/>
<span className="text-gray-700">{brand}</span>
</div>
))}
</div>
{/* Price Range Filter - 價格區間篩選 */}
<div className="mb-8">
<label className="block text-gray-600 font-medium mb-2">
Price Range
</label>
<input
type="range"
name="priceRange"
min={0}
max={100}
value={priceRange[1]}
onChange={handlePriceChange}
className="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-gray-600 mt-2">
<span>$0</span>
<span>${priceRange[1]}</span>
</div>
</div>
</div>
);
};
export default FilterSidebar;
// frontend/src/components/Products/SortOptions.jsx
import React from "react";
import { useSearchParams } from "react-router-dom";
const SortOptions = () => {
const [searchParams, setSearchParams] = useSearchParams();
const handleSortChange = (e) => {
const sortBy = e.target.value;
searchParams.set("sortBy", sortBy);
setSearchParams(searchParams);
};
return (
<div className="mb-4 flex items-center justify-end">
<select
onChange={handleSortChange}
value={searchParams.get("sortBy") || ""}
id="sort"
className="border p-2 rounded-md focus:outline-none"
>
<option value="">Default</option>
<option value="priceAsc">Price: Low to High</option>
<option value="priceDesc">Price: High to Low</option>
<option value="popularity">Popularity</option>
</select>
</div>
);
};
export default SortOptions;
增加產品細節的路由 (added the route to our product details)
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
import ProductDetails from "./components/Products/ProductDetails";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route path="collections/:collection" element={<CollectionPage />} />
<Route path="product/:id" element={<ProductDetails />} />
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
製作結帳頁面
// frontend/src/components/Cart/Checkout.jsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import PayPalButton from "./PayPalButton";
const cart = {
products: [
{
name: "Stylish Jacket",
size: "M",
color: "Black",
price: 120,
image: "https://picsum.photos/150?random=1",
},
{
name: "Casual Sneakers",
size: "42",
color: "White",
price: 75,
image: "https://picsum.photos/150?random=2",
},
],
totalPrice: 195,
};
const Checkout = () => {
const navigate = useNavigate();
const [checkoutId, setCheckoutId] = useState(null);
const [shippingAddress, setShippingAddress] = useState({
firstName: "",
lastName: "",
address: "",
city: "",
postalCode: "",
country: "",
phone: "",
});
const handleCreateCheckout = (e) => {
e.preventDefault();
setCheckoutId(123);
};
const handlePaymentSuccess = (details) => {
console.log("Payment Successful", details);
navigate("/order-confirmation");
};
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-7xl mx-auto py-10 px-6 tracking-tighter">
{/* Left Section - 左側區域 */}
<div className="bg-white rounded-lg p-6">
<h2 className="text-2xl uppercase mb-6">Checkout</h2>
<form onSubmit={handleCreateCheckout}>
<h3 className="text-lg mb-4">Contact Details</h3>
<div className="mb-4">
<label className="block text-gray-700">Email</label>
<input
type="email"
value="user@example.com"
className="w-full p-2 border rounded"
disabled
/>
</div>
<h3 className="text-lg mb-4">Delivery</h3>
<div className="mb-4 grid grid-cols-2 gap-4">
<div>
<label className="block text-gray-700">First Name</label>
<input
type="text"
value={shippingAddress.firstName}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
firstName: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div>
<label className="block text-gray-700">Last Name</label>
<input
type="text"
value={shippingAddress.lastName}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
lastName: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
</div>
<div className="mb-4">
<label className="block text-gray-700">Address</label>
<input
type="text"
value={shippingAddress.address}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
address: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4 grid grid-cols-2 gap-4">
<div>
<label className="block text-gray-700">City</label>
<input
type="text"
value={shippingAddress.city}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
city: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div>
<label className="block text-gray-700">Postal Code</label>
<input
type="text"
value={shippingAddress.postalCode}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
postalCode: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
</div>
<div className="mb-4">
<label className="block text-gray-700">Country</label>
<input
type="text"
value={shippingAddress.country}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
country: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Phone</label>
<input
type="tel"
value={shippingAddress.phone}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
phone: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mt-6">
{!checkoutId ? (
<button
type="submit"
className="w-full bg-black text-white py-3 rounded"
>
Continue to Payment
</button>
) : (
<div>
<h3 className="text-lg mb-4">Pay with Paypal</h3>
{/* Paypal Component */}
<PayPalButton
amount={100}
onSuccess={handlePaymentSuccess}
onError={(err) => alert("Payment failed. Try again.")}
/>
</div>
)}
</div>
</form>
</div>
{/* Right Section - 右側區域 */}
<div className="bg-gray-50 p-6 rounded-lg">
<h3 className="text-lg mb-4">Order Summary</h3>
<div className="border-t py-4 mb-4">
{cart.products.map((product, index) => (
<div
key={index}
className="flex items-start justify-between py-2 border-b"
>
<div className="flex items-start">
<img
src={product.image}
alt={product.name}
className="w-20 h-24 object-cover mr-4"
/>
<div>
<h3 className="text-md">{product.name}</h3>
<p className="text-gray-500">Size: {product.size}</p>
<p className="text-gray-500">Color: {product.color}</p>
</div>
</div>
<p className="text-xl">${product.price?.toLocaleString()}</p>
</div>
))}
</div>
<div className="flex justify-between items-center text-lg mb-4">
<p>Subtotal</p>
<p>${cart.totalPrice?.toLocaleString()}</p>
</div>
<div className="flex justify-between items-center text-lg">
<p>Shipping</p>
<p>Free</p>
</div>
<div className="flex justify-between items-center text-lg mt-4 border-t pt-4">
<p>Total</p>
<p>${cart.totalPrice?.toLocaleString()}</p>
</div>
</div>
</div>
);
};
export default Checkout;
// frontend/src/components/Layout/CartDrawer.jsx
import React, { useState } from "react";
import { IoMdClose } from "react-icons/io";
import CartContents from "../Cart/CartContents";
import { useNavigate } from "react-router-dom";
const CartDrawer = ({ drawerOpen, toggleCartDrawer }) => {
const navigate = useNavigate();
const handleCheckout = () => {
navigate("/checkout");
};
return (
<div
className={`fixed top-0 right-0 w-3/4 sm:w-1/2 md:w-[30rem] h-full bg-white shadow-lg transform transition-transform duration-300 flex flex-col z-50 ${
drawerOpen ? "translate-x-0" : "translate-x-full"
}`}
>
{/* Close Button - 關閉的按鈕 */}
<div className="flex justify-end p-4">
<button onClick={toggleCartDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
{/* Cart contents with scrollable area - 具有可滾動區域的購物車內容 */}
<div className="flex-grow p-4 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4">Your Cart</h2>
{/* Component for Cart Contents - 購物車內容組件 */}
<CartContents />
</div>
{/* Checkout button fixed at the bottom - 結帳按鈕固定在底部 */}
<div className="p-4 bg-white sticky bottom-0">
<button
onClick={handleCheckout}
className="w-full bg-black text-white py-3 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Checkout
</button>
<p className="text-sm tracking-tighter text-gray-500 mt-2 text-center">
Shipping, taxes, and discount codes calculated at checkout.
</p>
</div>
</div>
);
};
export default CartDrawer;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
import ProductDetails from "./components/Products/ProductDetails";
import Checkout from "./components/Cart/Checkout";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route path="collections/:collection" element={<CollectionPage />} />
<Route path="product/:id" element={<ProductDetails />} />
<Route path="checkout" element={<Checkout />} />
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
使用 Paypal Sandbox 開發金流串接
// frontend/src/components/Cart/PayPalButton.jsx
import React from "react";
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
const PayPalButton = ({ amount, onSuccess, onError }) => {
return (
<PayPalScriptProvider
options={{
"client-id":
"使用自己的Client Id",
}}
>
<PayPalButtons
style={{ layout: "vertical" }}
createOrder={(data, actions) => {
return actions.order.create({
purchase_units: [{ amount: { value: amount } }],
});
}}
onApprove={(data, actions) => {
return actions.order.capture().then(onSuccess);
}}
onError={onError}
/>
</PayPalScriptProvider>
);
};
export default PayPalButton;
- react-paypal-js – 安裝套件
製作訂單確認頁面 (orders confirmation)
// frontend/src/pages/OrderConfirmationPage.jsx
import React from "react";
const checkout = {
_id: "12323",
createdAt: new Date(),
checkoutItems: [
{
productId: "1",
name: "Jacket",
color: "black",
size: "M",
price: 150,
quantity: 1,
image: "https://picsum.photos/150?random=1",
},
{
productId: "2",
name: "T-shirt",
color: "black",
size: "M",
price: 120,
quantity: 2,
image: "https://picsum.photos/150?random=2",
},
],
shippingAddress: {
address: "123 Fashion Street",
city: "New York",
country: "USA",
},
};
const OrderConfirmationPage = () => {
const calculateEstimatedDelivery = (createdAt) => {
const orderDate = new Date(createdAt);
orderDate.setDate(orderDate.getDate() + 10); // Add 10 days to the order date - 訂單日期增加10天
return orderDate.toLocaleDateString();
};
return (
<div className="max-w-4xl mx-auto p-6 bg-white">
<h1 className="text-4xl font-bold text-center text-emerald-700 mb-8">
Thank You for Your Order!
</h1>
{checkout && (
<div className="p-6 rounded-lg border">
<div className="flex justify-between mb-20">
{/* Order Id and Date - 訂單編號和日期 */}
<div>
<h2 className="text-xl font-semibold">
Order ID: {checkout._id}
</h2>
<p className="text-gray-500">
Order date: {new Date(checkout.createdAt).toLocaleDateString()}
</p>
</div>
{/* Estimated Delivery- 預計送達 */}
<div>
<p className="text-emerald-700 text-sm">
Estimated Delivery:{" "}
{calculateEstimatedDelivery(checkout.createdAt)}
</p>
</div>
</div>
{/* Ordered Items - 訂單項目 */}
<div className="mb-20">
{checkout.checkoutItems.map((item) => (
<div key={item.productId} className="flex items-center mb-4">
<img
src={item.image}
alt={item.name}
className="w-16 h-16 object-cover rounded-md mr-4"
/>
<div>
<h4 className="text-md font-semibold">{item.name}</h4>
<p className="text-sm text-gray-500">
{item.color} | {item.size}
</p>
</div>
<div className="ml-auto text-right">
<p className="text-md">${item.price}</p>
<p className="text-sm text-gray-500">Qty: {item.quantity}</p>
</div>
</div>
))}
</div>
{/* Payment and Delivery Info - 付款與送貨資訊 */}
<div className="grid grid-cols-2 gap-8">
{/* Payment Info - 付款資訊 */}
<div>
<h4 className="text-lg font-semibold mb-2">Payment</h4>
<p className="text-gray-600">PayPal</p>
</div>
{/* Delivery Info - 送貨資訊 */}
<div>
<h4 className="text-lg font-semibold mb-2">Delivery</h4>
<p className="text-gray-600">
{checkout.shippingAddress.address}
</p>
<p className="text-gray-600">
{checkout.shippingAddress.city},{" "}
{checkout.shippingAddress.country}
</p>
</div>
</div>
</div>
)}
</div>
);
};
export default OrderConfirmationPage;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
import ProductDetails from "./components/Products/ProductDetails";
import Checkout from "./components/Cart/Checkout";
import OrderConfirmationPage from "./pages/OrderConfirmationPage";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route path="collections/:collection" element={<CollectionPage />} />
<Route path="product/:id" element={<ProductDetails />} />
<Route path="checkout" element={<Checkout />} />
<Route
path="order-confirmation"
element={<OrderConfirmationPage />}
/>
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// frontend/src/components/Layout/CartDrawer.jsx
import React, { useState } from "react";
import { IoMdClose } from "react-icons/io";
import CartContents from "../Cart/CartContents";
import { useNavigate } from "react-router-dom";
const CartDrawer = ({ drawerOpen, toggleCartDrawer }) => {
const navigate = useNavigate();
const handleCheckout = () => {
toggleCartDrawer();
navigate("/checkout");
};
return (
<div
className={`fixed top-0 right-0 w-3/4 sm:w-1/2 md:w-[30rem] h-full bg-white shadow-lg transform transition-transform duration-300 flex flex-col z-50 ${
drawerOpen ? "translate-x-0" : "translate-x-full"
}`}
>
{/* Close Button - 關閉的按鈕 */}
<div className="flex justify-end p-4">
<button onClick={toggleCartDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
{/* Cart contents with scrollable area - 具有可滾動區域的購物車內容 */}
<div className="flex-grow p-4 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4">Your Cart</h2>
{/* Component for Cart Contents - 購物車內容組件 */}
<CartContents />
</div>
{/* Checkout button fixed at the bottom - 結帳按鈕固定在底部 */}
<div className="p-4 bg-white sticky bottom-0">
<button
onClick={handleCheckout}
className="w-full bg-black text-white py-3 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Checkout
</button>
<p className="text-sm tracking-tighter text-gray-500 mt-2 text-center">
Shipping, taxes, and discount codes calculated at checkout.
</p>
</div>
</div>
);
};
export default CartDrawer;
製作訂單細節頁面
// frontend/src/pages/OrderDetailsPage.jsx
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
const OrderDetailsPage = () => {
const { id } = useParams();
const [orderDetails, setOrderDetails] = useState(null);
useEffect(() => {
const mockOrderDetails = {
_id: id,
createdAt: new Date(),
isPaid: true,
isDelivered: false,
paymentMethod: "PayPal",
shippingMethod: "Standard",
shippingAddress: { city: "New York", country: "USA" },
orderItems: [
{
productId: "1",
name: "Jacket",
price: 120,
quantity: 1,
image: "https://picsum.photos/150?random=1",
},
{
productId: "2",
name: "Shirt",
price: 150,
quantity: 2,
image: "https://picsum.photos/150?random=2",
},
],
};
setOrderDetails(mockOrderDetails);
}, [id]);
return (
<div className="max-w-7xl mx-auto p-4 sm:p-6">
<h2 className="text-2xl md:text-3xl font-bold mb-6">Order Details</h2>
{!orderDetails ? (
<p>No Order details found</p>
) : (
<div className="p-4 sm:p-6 rounded-lg border">
{/* Order Info - 訂單資訊 */}
<div className="flex flex-col sm:flex-row justify-between mb-8">
<div>
<h3 className="text-lg md:text-xl font-semibold">
Order ID: #{orderDetails._id}
</h3>
<p className="text-gray-600">
{new Date(orderDetails.createdAt).toLocaleDateString()}
</p>
</div>
<div className="flex flex-col items-start sm:items-end mt-4 sm:mt-0">
<span
className={`${
orderDetails.isPaid
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
} px-3 py-1 rounded-full text-sm font-medium mb-2`}
>
{orderDetails.isPaid ? "Approved" : "Pending"}
</span>
<span
className={`${
orderDetails.isDelivered
? "bg-green-100 text-green-700"
: "bg-yellow-100 text-yellow-700"
} px-3 py-1 rounded-full text-sm font-medium mb-2`}
>
{orderDetails.isDelivered ? "Delivered" : "Pending"}
</span>
</div>
</div>
{/* Customer, Payment, Shipping Info - 顧客, 付款, 送貨資訊 */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mb-8">
<div>
<h4 className="text-lg font-semibold mb-2">Payment Info</h4>
<p>Payment Method: {orderDetails.paymentMethod}</p>
<p>Status: {orderDetails.isPaid ? "Paid" : "Unpaid"}</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-2">Shipping Info</h4>
<p>Shipping Method: {orderDetails.shippingMethod}</p>
<p>
Address:{" "}
{`${orderDetails.shippingAddress.city}, ${orderDetails.shippingAddress.country}`}
</p>
</div>
</div>
{/* Product list - 產品清單 */}
<div className="overflow-x-auto">
<h4 className="text-lg font-semibold mb-4">Products</h4>
<table className="min-w-full text-gray-600 mb-4">
<thead className="bg-gray-100">
<tr>
<th className="py-2 px-4">Name</th>
<th className="py-2 px-4">Unit Price</th>
<th className="py-2 px-4">Quantity</th>
<th className="py-2 px-4">Total</th>
</tr>
</thead>
<tbody>
{orderDetails.orderItems.map((item) => (
<tr key={item.productId} className="border-b">
<td className="py-2 px-4 flex items-center">
<img
src={item.image}
alt={item.name}
className="w-12 h-12 object-cover rounded-lg mr-4"
/>
<Link
to={`/product/${item.productId}`}
className="text-blue-500 hover:underline"
>
{item.name}
</Link>
</td>
<td className="py-2 px-4">${item.price}</td>
<td className="py-2 px-4">${item.quantity}</td>
<td className="py-2 px-4">${item.price * item.quantity}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Back to Orders Link - 回到訂單頁面連結 */}
<Link to="/my-orders" className="text-blue-500 hover:underline">
Back to My Orders
</Link>
</div>
)}
</div>
);
};
export default OrderDetailsPage;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
import ProductDetails from "./components/Products/ProductDetails";
import Checkout from "./components/Cart/Checkout";
import OrderConfirmationPage from "./pages/OrderConfirmationPage";
import OrderDetailsPage from "./pages/OrderDetailsPage";
import MyOrdersPage from "./pages/MyOrdersPage";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route path="collections/:collection" element={<CollectionPage />} />
<Route path="product/:id" element={<ProductDetails />} />
<Route path="checkout" element={<Checkout />} />
<Route
path="order-confirmation"
element={<OrderConfirmationPage />}
/>
<Route path="order/:id" element={<OrderDetailsPage />} />
<Route path="my-orders" element={<MyOrdersPage />} />
</Route>
<Route>{/* Admin Layout - 管理員佈局 */}</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// frontend/src/pages/MyOrdersPage.jsx
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
const MyOrdersPage = () => {
const [orders, setOrders] = useState([]);
const navigate = useNavigate();
useEffect(() => {
// Simulate fetching orders - 模擬獲取訂單
setTimeout(() => {
const mockOrders = [
{
_id: "12345",
createdAt: new Date(),
shippingAddress: { city: "New York", country: "USA" },
orderItems: [
{
name: "Product 1",
image: "https://picsum.photos/500/500?random=1",
},
],
totalPrice: 100,
isPaid: true,
},
{
_id: "34567",
createdAt: new Date(),
shippingAddress: { city: "New York", country: "USA" },
orderItems: [
{
name: "Product 2",
image: "https://picsum.photos/500/500?random=2",
},
],
totalPrice: 100,
isPaid: true,
},
];
setOrders(mockOrders);
}, 1000);
}, []);
const handleRowClick = (orderId) => {
navigate(`/order/${orderId}`);
};
return (
<div className="max-w-7xl mx-auto p-4 sm:p-6">
<h2 className="text-xl sm:text-2xl font-bold mb-6">My Orders</h2>
<div className="relative shadow-md sm:rounded-lg overflow-hidden">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-2 px-4 sm:py-3">Image</th>
<th className="py-2 px-4 sm:py-3">Order ID</th>
<th className="py-2 px-4 sm:py-3">Created</th>
<th className="py-2 px-4 sm:py-3">Shipping Address</th>
<th className="py-2 px-4 sm:py-3">Items</th>
<th className="py-2 px-4 sm:py-3">Price</th>
<th className="py-2 px-4 sm:py-3">Status</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
onClick={() => handleRowClick(order._id)}
className="border-b hover:border-gray-50 cursor-pointer"
>
<td className="py-2 px-2 sm:py-4 sm:px-4">
<img
src={order.orderItems[0].image}
alt={order.orderItems[0].name}
className="w-10 h-10 sm:w-12 sm:h-12 object-cover rounded-lg"
/>
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4 font-medium text-gray-900 whitespace-nowrap">
#{order._id}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{new Date(order.createdAt).toLocaleDateString()}{" "}
{new Date(order.createdAt).toLocaleTimeString()}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{order.shippingAddress
? `${order.shippingAddress.city}, ${order.shippingAddress.country}`
: "N/A"}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{order.orderItems.length}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
${order.totalPrice}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
<span
className={`${
order.isPaid
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
} px-2 py-1 rounded-full text-xs sm:text-sm font-medium`}
>
{order.isPaid ? "Paid" : "Pending"}
</span>
</td>
</tr>
))
) : (
<tr>
<td colSpan={7} className="py-4 px-4 text-center text-gray-500">
You have no orders
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default MyOrdersPage;
// frontend/src/components/Cart/PayPalButton.jsx
import React from "react";
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
const PayPalButton = ({ amount, onSuccess, onError }) => {
return (
<PayPalScriptProvider
options={{
"client-id": import.meta.env.VITE_PAYPAL_CLIENT_ID,
}}
>
<PayPalButtons
style={{ layout: "vertical" }}
createOrder={(data, actions) => {
return actions.order.create({
purchase_units: [{ amount: { value: amount } }],
});
}}
onApprove={(data, actions) => {
return actions.order.capture().then(onSuccess);
}}
onError={onError}
/>
</PayPalScriptProvider>
);
};
export default PayPalButton;
// frontend/.env
VITE_PAYPAL_CLIENT_ID=你的client-id
製作管理員頁面
// frontend/src/components/Admin/AdminLayout.jsx
import React, { useState } from "react";
import { FaBars } from "react-icons/fa";
import AdminSidebar from "./AdminSidebar";
import { Outlet } from "react-router-dom";
const AdminLayout = () => {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
return (
<div className="min-h-screen flex flex-col md:flex-row relative">
{/* Mobile Toggle Button - 手機切換按鈕 */}
<div className="flex md:hidden p-4 bg-gray-900 text-white z-20">
<button onClick={toggleSidebar}>
<FaBars size={24} />
</button>
<h1 className="ml-4 text-xl font-medium">Admin Dashboard</h1>
</div>
{/* Overlay for mobile sidebar - 手機側邊欄的覆蓋 */}
{isSidebarOpen && (
<div
className="fixed inset-0 z-10 bg-black bg-opacity-50 md:hidden"
onClick={toggleSidebar}
></div>
)}
{/* sidebar - 側邊欄 */}
<div
className={`bg-gray-900 w-64 min-h-screen text-white absolute md:relative transform ${
isSidebarOpen ? "translate-x-0" : "-translate-x-full"
} transition-transform duration-300 md:translate-x-0 md:static md:block z-20`}
>
{/* Sidebar - 側邊欄 */}
<AdminSidebar />
</div>
{/* Main Content - 主要內容 */}
<div className="flex-grow p-6 overflow-auto">
<Outlet />
</div>
</div>
);
};
export default AdminLayout;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
import ProductDetails from "./components/Products/ProductDetails";
import Checkout from "./components/Cart/Checkout";
import OrderConfirmationPage from "./pages/OrderConfirmationPage";
import OrderDetailsPage from "./pages/OrderDetailsPage";
import MyOrdersPage from "./pages/MyOrdersPage";
import AdminLayout from "./components/Admin/AdminLayout";
import AdminHomePage from "./pages/AdminHomePage";
import UserManagement from "./components/Admin/UserManagement";
import ProductManagement from "./components/Admin/ProductManagement";
import EditProductPage from "./components/Admin/EditProductPage";
import OrderManagement from "./components/Admin/OrderManagement";
const App = () => {
return (
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route path="collections/:collection" element={<CollectionPage />} />
<Route path="product/:id" element={<ProductDetails />} />
<Route path="checkout" element={<Checkout />} />
<Route
path="order-confirmation"
element={<OrderConfirmationPage />}
/>
<Route path="order/:id" element={<OrderDetailsPage />} />
<Route path="my-orders" element={<MyOrdersPage />} />
</Route>
<Route path="/admin" element={<AdminLayout />}>
{/* Admin Layout - 管理員佈局 */}
<Route index element={<AdminHomePage />} />
<Route path="users" element={<UserManagement />} />
<Route path="products" element={<ProductManagement />} />
<Route path="products/:id/edit" element={<EditProductPage />} />
<Route path="orders" element={<OrderManagement />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
// frontend/src/components/Common/Navbar.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
import CartDrawer from "../Layout/CartDrawer";
import { IoMdClose } from "react-icons/io";
const Navbar = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [navDrawerOpen, setNavDrawerOpen] = useState(false);
const toggleNavDrawer = () => {
setNavDrawerOpen(!navDrawerOpen);
};
const toggleCartDrawer = () => {
setDrawerOpen(!drawerOpen);
};
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="/collections/all"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="#"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
<Link
to="/admin"
className="block bg-black px-2 rounded text-sm text-white"
>
Admin
</Link>
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button
onClick={toggleCartDrawer}
className="relative hover:text-black"
>
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
4
</span>
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button onClick={toggleNavDrawer} className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
<CartDrawer drawerOpen={drawerOpen} toggleCartDrawer={toggleCartDrawer} />
{/* Mobile Navigation - 手機版導覽 */}
<div
className={`fixed top-0 left-0 w-3/4 sm:w-1/2 md:w-1/3 h-full bg-white shadow-lg transform transition-transform duration-300 z-50 ${
navDrawerOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex justify-end p-4">
<button onClick={toggleNavDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
<div className="p-4">
<h2 className="text-xl font-semibold mb-4">Menu</h2>
<nav className="space-y-4">
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Men
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Women
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Top Wear
</Link>
<Link
to="#"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Bottom Wear
</Link>
</nav>
</div>
</div>
</>
);
};
export default Navbar;
// frontend/src/components/Admin/AdminSidebar.jsx
import React from "react";
import {
FaBoxOpen,
FaClipboardList,
FaSignOutAlt,
FaStore,
FaUser,
} from "react-icons/fa";
import { Link, NavLink, useNavigate } from "react-router-dom";
const AdminSidebar = () => {
const navigate = useNavigate();
const handleLogout = () => {
navigate("/");
};
return (
<div className="p-6">
<div className="mb-6">
<Link to="/admin" className="text-2xl font-medium">
Rabbit
</Link>
</div>
<h2 className="text-xl font-medium mb-6 text-center">Admin Dashboard</h2>
<nav className="flex flex-col space-y-2">
<NavLink
to="/admin/users"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaUser />
<span>Users</span>
</NavLink>
<NavLink
to="/admin/products"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaBoxOpen />
<span>Products</span>
</NavLink>
<NavLink
to="/admin/orders"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaClipboardList />
<span>Orders</span>
</NavLink>
<NavLink
to="/"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaStore />
<span>Shop</span>
</NavLink>
</nav>
<div className="mt-6">
<button
onClick={handleLogout}
className="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded flex items-center justify-center space-x-2"
>
<FaSignOutAlt />
<span>Logout</span>
</button>
</div>
</div>
);
};
export default AdminSidebar;
// frontend/src/pages/AdminHomePage.jsx
import React from "react";
import { Link } from "react-router-dom";
const AdminHomePage = () => {
const orders = [
{
_id: 123123,
user: {
name: "John Doe",
},
totalPrice: 110,
status: "Processing",
},
];
return (
<div className="max-w-7xl mx-auto p-6">
<h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="p-4 shadow-md rounded-lg">
<h2 className="text-xl font-semibold">Revenue</h2>
<p className="text-2xl">$10000</p>
</div>
<div className="p-4 shadow-md rounded-lg">
<h2 className="text-xl font-semibold">Total Order</h2>
<p className="text-2xl">200</p>
<Link to="/amin/orders" className="text-blue-500 hover:underline">
Manage Orders
</Link>
</div>
<div className="p-4 shadow-md rounded-lg">
<h2 className="text-xl font-semibold">Total Products</h2>
<p className="text-2xl">100</p>
<Link to="/amin/products" className="text-blue-500 hover:underline">
Manage Products
</Link>
</div>
</div>
<div className="mt-6">
<h2 className="text-2xl font-bold mb-4">Recent Orders</h2>
<div className="overflow-x-auto">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Order ID</th>
<th className="py-3 px-4">User</th>
<th className="py-3 px-4">Total Price</th>
<th className="py-3 px-4">Status</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="p-4">{order._id}</td>
<td className="p-4">{order.user.name}</td>
<td className="p-4">{order.totalPrice}</td>
<td className="p-4">{order.status}</td>
</tr>
))
) : (
<tr>
<td colSpan={4} className="p-4 text-center text-gray-500">
No recent orders found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
);
};
export default AdminHomePage;
// frontend/src/components/Admin/UserManagement.jsx
import React, { useState } from "react";
const UserManagement = () => {
const users = [
{
_id: 123213,
name: "John Doe",
email: "john@example.com",
role: "admin",
},
];
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
role: "customer", // Default role - 預設角色
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
// Reset the form after Submission - 提交後重置表單
setFormData({
name: "",
email: "",
password: "",
role: "customer",
});
};
const handleRoleChange = (userId, newRole) => {
console.log({ id: userId, role: newRole });
};
const handleDeleteUser = (userId) => {
if (window.confirm("Are you sure you want to delete this user?")) {
console.log("deleting user with ID", userId);
}
};
return (
<div className="max-w-7xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">User Management</h2>
{/* Add New User Form - 新增使用者表單 */}
<div className="p-6 rounded-lg mb-6">
<h3 className="text-lg font-bold mb-4">Add New User</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700">Name</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Email</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Password</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Role</label>
<select
name="role"
value={formData.role}
onChange={handleChange}
className="w-full p-2 border rounded"
>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
</div>
<button
type="submit"
className="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600"
>
Add User
</button>
</form>
</div>
{/* User List Management - 用戶列表管理 */}
<div className="overflow-x-auto shadow-md sm:rounded-lg">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Name</th>
<th className="py-3 px-4">Email</th>
<th className="py-3 px-4">Role</th>
<th className="py-3 px-4">Actions</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user._id} className="border-b hover:bg-gray-50">
<td className="p-4 font-medium text-gray-900 whitespace-nowrap">
{user.name}
</td>
<td className="p-4">{user.email}</td>
<td className="p-4">
<select
value={user.role}
onChange={(e) => handleRoleChange(user._id, e.target.value)}
className="p-2 border rounded"
>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
</td>
<td className="p-4">
<button
onClick={() => handleDeleteUser(user._id)}
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default UserManagement;
// frontend/src/components/Admin/ProductManagement.jsx
import React from "react";
import { Link } from "react-router-dom";
const ProductManagement = () => {
const products = [
{
_id: 123123,
name: "Shirt",
price: 110,
sku: "123123213",
},
];
const handleDelete = (id) => {
if (window.confirm("Are you sure you want to delete the Product?")) {
console.log("Delete Product with id:", id);
}
};
return (
<div className="max-w-7xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Product Management</h2>
<div className="overflow-x-auto shadow-md sm:rounded-lg">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Name</th>
<th className="py-3 px-4">Price</th>
<th className="py-3 px-4">SKU</th>
<th className="py-3 px-4">Actions</th>
</tr>
</thead>
<tbody>
{products.length > 0 ? (
products.map((product) => (
<tr
key={product._id}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="p-4 font-medium text-gray-900 whitespace-nowrap">
{product.name}
</td>
<td className="p-4">${product.price}</td>
<td className="p-4">{product.sku}</td>
<td className="p-4">
<Link
to={`/admin/products/${product._id}/edit`}
className="bg-yellow-500 text-white px-2 py-1 rounded mr-2 hover:bg-yellow-600"
>
Edit
</Link>
<button
onClick={() => handleDelete(product._id)}
className="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
>
Delete
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={4} className="p-4 text-center text-gray-500">
No Products found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default ProductManagement;
// frontend/src/components/Admin/EditProductPage.jsx
import React, { useState } from "react";
const EditProductPage = () => {
const [productData, setProductData] = useState({
name: "",
description: "",
price: 0,
countInStock: 0,
sku: "",
category: "",
brand: "",
sizes: [],
colors: [],
collections: "",
material: "",
gender: "",
images: [
{
url: "https://picsum.photos/150?random=1",
},
{
url: "https://picsum.photos/150?random=2",
},
],
});
const handleChange = (e) => {
const { name, value } = e.target;
setProductData((prevData) => ({ ...prevData, [name]: value }));
};
const handleImageUpload = async (e) => {
const file = e.target.files[0];
console.log(file);
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(productData);
};
return (
<div className="max-w-5xl mx-auto p-6 shadow-md rounded-md">
<h2 className="text-3xl font-bold mb-6">Edit Product</h2>
<form onSubmit={handleSubmit}>
{/* Name - 名稱 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Product Name</label>
<input
type="text"
name="name"
value={productData.name}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
required
/>
</div>
{/* Description - 描述 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Description</label>
<textarea
name="description"
value={productData.description}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
rows={4}
required
/>
</div>
{/* Price - 價格 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Price</label>
<input
type="number"
name="price"
value={productData.price}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Count In stock - 庫存數量 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Count in Stock</label>
<input
type="number"
name="countInStock"
value={productData.countInStock}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* SKU - 庫存單位 */}
<div className="mb-6">
<label className="block font-semibold mb-2">SKU</label>
<input
type="text"
name="sku"
value={productData.sku}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Sizes - 尺寸 */}
<div className="mb-6">
<label className="block font-semibold mb-2">
Sizes (comma-separated)
</label>
<input
type="text"
name="sizes"
value={productData.sizes.join(", ")}
onChange={(e) =>
setProductData({
...productData,
sizes: e.target.value.split(",").map((size) => size.trim()),
})
}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Colors - 顏色 */}
<div className="mb-6">
<label className="block font-semibold mb-2">
Colors (comma-separated)
</label>
<input
type="text"
name="colors"
value={productData.colors.join(", ")}
onChange={(e) =>
setProductData({
...productData,
colors: e.target.value.split(",").map((color) => color.trim()),
})
}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Image Upload - 圖片上傳 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Upload Image</label>
<input type="file" onChange={handleImageUpload} />
<div className="flex gap-4 mt-4">
{productData.images.map((image, index) => (
<div key={index}>
<img
src={image.url}
alt={image.altText || "Product Image"}
className="w-20 h-20 object-cover rounded-md shadow-md"
/>
</div>
))}
</div>
</div>
<button
type="submit"
className="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600 transition-colors"
>
Update Product
</button>
</form>
</div>
);
};
export default EditProductPage;
// frontend/src/components/Admin/OrderManagement.jsx
import React from "react";
const OrderManagement = () => {
const orders = [
{
_id: 12312321,
user: {
name: "John Doe",
},
totalPrice: 110,
status: "Processing",
},
];
const handleStatusChange = (orderId, status) => {
console.log({ id: orderId, status });
};
return (
<div className="max-w-7xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Order Management</h2>
<div className="overflow-x-auto shadow-md sm:rounded-lg">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Order ID</th>
<th className="py-3 px-4">Customer</th>
<th className="py-3 px-4">Total Price</th>
<th className="py-3 px-4">Status</th>
<th className="py-3 px-4">Actions</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="py-4 px-4 font-medium text-gray-900 whitespace-nowrap">
#{order._id}
</td>
<td className="p-4">{order.user.name}</td>
<td className="p-4">${order.totalPrice}</td>
<td className="p-4">
<select
value={order.status}
onChange={(e) =>
handleStatusChange(order._id, e.target.value)
}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5"
>
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
<option value="Delivered">Delivered</option>
<option value="Cancelled">Cancelled</option>
</select>
</td>
<td className="p-4">
<button
onClick={() => handleStatusChange(order._id, "Delivered")}
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
>
Mark as Delivered
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={5} className="p-4 text-center text-gray-500">
No Orders found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default OrderManagement;
以上完成這個專案前端的部分。