+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/shopping-app/src/app/checkout/page.tsx b/shopping-app/src/app/checkout/page.tsx
new file mode 100644
index 00000000000000..e3f04a6c6bbe77
--- /dev/null
+++ b/shopping-app/src/app/checkout/page.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/store/auth";
+import { useCartStore } from "@/store/cart";
+import Link from "next/link";
+
+export default function CheckoutPage() {
+ const router = useRouter();
+ const { token, isLoading: authLoading, loadFromStorage } = useAuthStore();
+ const { items, setItems, clearCart } = useCartStore();
+ const [loading, setLoading] = useState(false);
+ const [success, setSuccess] = useState(false);
+ const [orderId, setOrderId] = useStateShopping Cart
+ + {items.length === 0 ? ( +
+
+
+ ) : (
+ + Your cart is empty +
++ Start shopping to add items to your cart +
+ + Browse Products + +
+
+ )}
+
+ {items.map((item) => (
+
+
+
+ 
+
+ ))}
+
+
+ {item.name}
+
+
+ {item.category}
++ ${item.price.toFixed(2)} +
+
+
+
+
+
+
+ {item.quantity}
+
+
+
+
+
+
+
+ + Order Summary +
+
+
+
+
+ Proceed to Checkout
+
+
+
+ Subtotal ({items.reduce((s, i) => s + i.quantity, 0)} items)
+
+ ${total.toFixed(2)}
+
+
+ Shipping
+ Free
+
+ +
+ Total
+ ${total.toFixed(2)}
+
+
+
+ );
+ }
+
+ if (success) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ if (items.length === 0 && !success) {
+ return (
+
+
+
+
+
+ + Order Confirmed! +
++ Your order #{orderId} has been placed successfully. +
++ You will receive a confirmation email shortly. +
+
+
+ View Orders
+
+
+ Continue Shopping
+
+
+
+
+ );
+ }
+
+ return (
+ Cart is Empty
+Add items to your cart first
+ + Browse Products + +
+
+ );
+}
diff --git a/shopping-app/src/app/globals.css b/shopping-app/src/app/globals.css
new file mode 100644
index 00000000000000..a6572fdf1da3b2
--- /dev/null
+++ b/shopping-app/src/app/globals.css
@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ body {
+ @apply bg-gray-50 text-gray-900 antialiased;
+ }
+}
+
+@layer components {
+ .btn-primary {
+ @apply bg-primary-600 text-white px-4 py-2 rounded-lg font-medium
+ hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .btn-secondary {
+ @apply bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-300
+ hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .btn-danger {
+ @apply bg-red-600 text-white px-4 py-2 rounded-lg font-medium
+ hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .input-field {
+ @apply w-full px-3 py-2 border border-gray-300 rounded-lg
+ focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+ placeholder-gray-400;
+ }
+
+ .card {
+ @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
+ }
+}
diff --git a/shopping-app/src/app/layout.tsx b/shopping-app/src/app/layout.tsx
new file mode 100644
index 00000000000000..6f067732d5e671
--- /dev/null
+++ b/shopping-app/src/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+ title: "ShopHub - Your One-Stop Shopping Destination",
+ description: "Browse and shop from our wide selection of products",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ Checkout
+ + +
+
+ );
+}
diff --git a/shopping-app/src/app/orders/page.tsx b/shopping-app/src/app/orders/page.tsx
new file mode 100644
index 00000000000000..e3cc51c401919e
--- /dev/null
+++ b/shopping-app/src/app/orders/page.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/store/auth";
+import Link from "next/link";
+
+interface OrderItem {
+ id: number;
+ product_id: number;
+ quantity: number;
+ price: number;
+ name: string;
+ image: string;
+}
+
+interface Order {
+ id: number;
+ total: number;
+ status: string;
+ shipping_address: string;
+ created_at: string;
+ items: OrderItem[];
+}
+
+export default function OrdersPage() {
+ const router = useRouter();
+ const { token, isLoading: authLoading, loadFromStorage } = useAuthStore();
+ const [orders, setOrders] = useState
+
+ + Welcome Back +
+ + + ++ Don't have an account?{" "} + + Sign up + +
+ +
+ Demo: demo@shop.com / password123
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/shopping-app/src/app/page.tsx b/shopping-app/src/app/page.tsx
new file mode 100644
index 00000000000000..d2664c179700da
--- /dev/null
+++ b/shopping-app/src/app/page.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { api } from "@/lib/api";
+import ProductCard from "@/components/ProductCard";
+import SearchFilters from "@/components/SearchFilters";
+
+interface Product {
+ id: number;
+ name: string;
+ description: string;
+ price: number;
+ category: string;
+ image: string;
+ stock: number;
+ rating: number;
+}
+
+export default function HomePage() {
+ const [products, setProducts] = useStateOrder History
+ + {orders.length === 0 ? ( +
+
+
+ ) : (
+ + No orders yet +
++ Start shopping to see your orders here +
+ + Browse Products + +
+ {orders.map((order) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+ + Order #{order.id} +
++ {new Date(order.created_at).toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + })} +
+
+
+ {order.status}
+
+
+ ${order.total.toFixed(2)}
+
+
+
+ {order.items.map((item) => (
+
+
+
+
+
+ ))}
+
+
+ {item.name}
+
+
+
+ ${(item.quantity * item.price).toFixed(2)}
+
+ + Qty: {item.quantity} x ${item.price.toFixed(2)} +
+
+
+ + Ship to:{" "} + {order.shipping_address} +
+
+
+ );
+}
diff --git a/shopping-app/src/app/products/[id]/page.tsx b/shopping-app/src/app/products/[id]/page.tsx
new file mode 100644
index 00000000000000..4194991e71ea10
--- /dev/null
+++ b/shopping-app/src/app/products/[id]/page.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/store/auth";
+import { useCartStore } from "@/store/cart";
+import Link from "next/link";
+
+interface Product {
+ id: number;
+ name: string;
+ description: string;
+ price: number;
+ category: string;
+ image: string;
+ stock: number;
+ rating: number;
+}
+
+export default function ProductDetailPage() {
+ const params = useParams();
+ const router = useRouter();
+ const { token } = useAuthStore();
+ const { setItems } = useCartStore();
+ const [product, setProduct] = useState
+
+
+ + Discover Amazing Products +
++ {total} products available +
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ ) : products.length === 0 ? (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+ <>
+ + No products found +
++ Try adjusting your search or filters +
+
+ {products.map((product) => (
+
+
+ {totalPages > 1 && (
+
+
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
+
+ ))}
+
+
+ )}
+
+ )}
+
+
+ );
+ }
+
+ if (!product) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ Product Not Found
++ The product you're looking for doesn't exist. +
+ + Back to Products + +
+
+
+
+ );
+}
diff --git a/shopping-app/src/app/signup/page.tsx b/shopping-app/src/app/signup/page.tsx
new file mode 100644
index 00000000000000..196ee4d2ffde9b
--- /dev/null
+++ b/shopping-app/src/app/signup/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/store/auth";
+import Link from "next/link";
+
+export default function SignupPage() {
+ const router = useRouter();
+ const { setAuth, token, loadFromStorage } = useAuthStore();
+ const [name, setName] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ loadFromStorage();
+ }, [loadFromStorage]);
+
+ useEffect(() => {
+ if (token) router.push("/");
+ }, [token, router]);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError("");
+
+ if (password !== confirmPassword) {
+ setError("Passwords do not match");
+ return;
+ }
+
+ if (password.length < 6) {
+ setError("Password must be at least 6 characters");
+ return;
+ }
+
+ setLoading(true);
+ const res = await api.auth.signup(name, email, password);
+ if (res.success && res.data) {
+ setAuth(res.data.user, res.data.token);
+ router.push("/");
+ } else {
+ setError(res.error || "Signup failed");
+ }
+ setLoading(false);
+ };
+
+ return (
+
+
+
+ 
+
+
+
+
+
+
+ {product.category}
+
+
+
+ + {product.name} +
+
+
+
+ {renderStars(product.rating)}
+ {product.rating} out of 5
+ + {product.description} +
+ +
+ ${product.price.toFixed(2)}
+
+
+
+ 10
+ ? "bg-green-100 text-green-700"
+ : product.stock > 0
+ ? "bg-yellow-100 text-yellow-700"
+ : "bg-red-100 text-red-700"
+ }`}
+ >
+ {product.stock > 10
+ ? "In Stock"
+ : product.stock > 0
+ ? `Only ${product.stock} left`
+ : "Out of Stock"}
+
+
+
+ {product.stock > 0 && (
+
+
+ )}
+
+
+
+ {quantity}
+
+
+
+
+
+
+
+ );
+}
diff --git a/shopping-app/src/components/Navbar.tsx b/shopping-app/src/components/Navbar.tsx
new file mode 100644
index 00000000000000..7761890bea74c6
--- /dev/null
+++ b/shopping-app/src/components/Navbar.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuthStore } from "@/store/auth";
+import { useCartStore } from "@/store/cart";
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+
+export default function Navbar() {
+ const { user, token, logout, loadFromStorage } = useAuthStore();
+ const { items, setItems } = useCartStore();
+ const router = useRouter();
+ const [menuOpen, setMenuOpen] = useState(false);
+
+ useEffect(() => {
+ loadFromStorage();
+ }, [loadFromStorage]);
+
+ useEffect(() => {
+ if (token) {
+ api.cart.list().then((res) => {
+ if (res.success && res.data) setItems(res.data);
+ });
+ }
+ }, [token, setItems]);
+
+ const cartCount = items.reduce((sum, item) => sum + item.quantity, 0);
+
+ const handleLogout = () => {
+ logout();
+ setMenuOpen(false);
+ router.push("/");
+ };
+
+ return (
+
+ );
+}
diff --git a/shopping-app/src/components/ProductCard.tsx b/shopping-app/src/components/ProductCard.tsx
new file mode 100644
index 00000000000000..3054138db6a8db
--- /dev/null
+++ b/shopping-app/src/components/ProductCard.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import Link from "next/link";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/store/auth";
+import { useCartStore } from "@/store/cart";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+interface ProductCardProps {
+ product: {
+ id: number;
+ name: string;
+ price: number;
+ image: string;
+ category: string;
+ rating: number;
+ stock: number;
+ };
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+ const { token } = useAuthStore();
+ const { setItems } = useCartStore();
+ const router = useRouter();
+ const [adding, setAdding] = useState(false);
+ const [added, setAdded] = useState(false);
+
+ const handleAddToCart = async (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (!token) {
+ router.push("/login");
+ return;
+ }
+
+ setAdding(true);
+ const res = await api.cart.add(product.id);
+ if (res.success) {
+ const cartRes = await api.cart.list();
+ if (cartRes.success && cartRes.data) setItems(cartRes.data);
+ setAdded(true);
+ setTimeout(() => setAdded(false), 1500);
+ }
+ setAdding(false);
+ };
+
+ const renderStars = (rating: number) => {
+ const stars = [];
+ for (let i = 1; i <= 5; i++) {
+ stars.push(
+
+ );
+ }
+ return stars;
+ };
+
+ return (
+
+
+
+ + Create Account +
+ + + ++ Already have an account?{" "} + + Sign in + +
+
+
+
+
+
+ {product.category}
+
+
+
+ );
+}
diff --git a/shopping-app/src/components/SearchFilters.tsx b/shopping-app/src/components/SearchFilters.tsx
new file mode 100644
index 00000000000000..28058c00eac447
--- /dev/null
+++ b/shopping-app/src/components/SearchFilters.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+interface SearchFiltersProps {
+ categories: string[];
+ onFilterChange: (filters: {
+ search: string;
+ category: string;
+ minPrice: string;
+ maxPrice: string;
+ sortBy: string;
+ sortOrder: string;
+ }) => void;
+}
+
+export default function SearchFilters({
+ categories,
+ onFilterChange,
+}: SearchFiltersProps) {
+ const [search, setSearch] = useState("");
+ const [category, setCategory] = useState("");
+ const [minPrice, setMinPrice] = useState("");
+ const [maxPrice, setMaxPrice] = useState("");
+ const [sortBy, setSortBy] = useState("created_at");
+ const [sortOrder, setSortOrder] = useState("desc");
+ const [showFilters, setShowFilters] = useState(false);
+
+ const applyFilters = useCallback(
+ (overrides: Record+ {product.name} +
+
+ {renderStars(product.rating)}
+ ({product.rating})
+
+
+
+ ${product.price.toFixed(2)}
+
+
+
+
+
+
+ {showFilters && (
+
+ );
+}
diff --git a/shopping-app/src/lib/api.ts b/shopping-app/src/lib/api.ts
new file mode 100644
index 00000000000000..74c9a3aad27423
--- /dev/null
+++ b/shopping-app/src/lib/api.ts
@@ -0,0 +1,146 @@
+const BASE_URL = "/api";
+
+async function request
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ setMinPrice(e.target.value)}
+ className="input-field"
+ min="0"
+ />
+
+
+
+
+ setMaxPrice(e.target.value)}
+ className="input-field"
+ min="0"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {["All", ...categories].map((cat) => (
+
+ ))}
+
+