smart-bakery

As a frontend developer, implement the `LandingHero` section using `framer-motion` scroll-parallax and spring reveal animations. Use `useRef` for `rootRef` and `useScroll` with `offset: ['start start', 'end start']` to drive `scrollYProgress`. Apply `useTransform(scrollYProgress, [0,1], ['0%','-30%'])` for `wheatY` parallax on a `motion.div` with className `lh-wheat-layer` rendering 7 `Wheat` icons (`lh-wheat--1` through `lh-wheat--7`, sizes 40–72, strokeWidth 1.5). Content div `lh-content` includes: `motion.span` eyebrow badge with `Sparkles` icon (size 14) and `springReveal(0.05)`; `motion.h1` title 'Artisan Cakes' with `lh-accent` span 'Crafted with Love' at `springReveal(0.18)`; `motion.p` subtitle at `springReveal(0.32)`; `motion.div` CTA row at delay 0.46 containing two `motion.a` buttons — `lh-btn--secondary` to `/Products` ('Explore Products') and `lh-btn--primary` to `/ProductDetail` ('Order Custom Cake') both with `whileHover={{ scale:1.05, y:-3 }}` and `whileTap={{ scale:0.97 }}`; trust points row mapping `trustPoints` array (Cake/Truck/BadgeCheck icons). Import `LandingHero.css`.

As a frontend developer, implement the `CakeCarousel` section featuring a React Three Fiber 3D cake carousel with framer-motion overlay. Define `CAKES` array (4 items: Velvet Royale, Golden Truffle, Pistachio Bloom, Caramel Noir) with `base`, `top`, `accent` hex colors. Build `CakeMesh` component using `useRef`, `useState(localHover)`, `useFrame` for smooth scale lerp (target 1.12 on hover/active, 1 otherwise), continuous `rotation.y += delta * 0.35`, and `position.y` lift lerp. Render `RoundedBox` (cake body) and a top layer `RoundedBox` plus `Text` (drei) using cake colors and `emissive`/`emissiveIntensity` driven by hover/active state. Pointer events call `onHover(cake)` and `onClick`. Wrap in `Canvas` with `Suspense`, add `OrbitControls` (disabled when not active), `ContactShadows`, and `Environment` preset. Carousel state managed by `useRef`/`useState` for `activeIdx`, `hoveredCake`, modal open. Navigation via `ChevronLeft`/`ChevronRight` buttons. `AnimatePresence` modal overlay shows cake detail card with `ShoppingBag` add-to-cart and `X` close. `MousePointer2` drag hint shown initially. Import `CakeCarousel.css`.

As a frontend developer, implement the `FeaturedCategories` section with a `useInView` triggered card grid. Define `categories` array of 5 items (Signature Cakes/Cake icon, Bakery Items/Croissant, Snacks/Cookie, Desserts/IceCream2, Custom Orders/Sparkles) each with `name`, `count`, `desc`, `Icon`, `href`. Build `MagneticCard` sub-component using `useRef`, `useState({ x, y })` offset, and `onMouseMove` handler that calculates cursor distance from card center, applies `0.12` magnetic pull factor, and sets `--mx`/`--my` CSS custom props for spotlight effect (skipped on mobile `window.innerWidth < 768`). `motion.div` with `animate` driven by both `inView` visibility and live `offset.x/y` magnetic position using spring transitions. Each card renders the lucide icon in `fc-icon`, category name, count badge, description, and `fc-browse` link with `ArrowRight`. Parent section uses `useInView` on its own ref to trigger staggered reveal (index * 0.1 delay). Import `FeaturedCategories.css`.

As a frontend developer, implement the `BestSellers` section displaying an 8-product grid with hover interactions. Define `products` array (Belgian Dark Truffle, Rose Pistachio Gateau, Salted Caramel Crunch, Red Velvet Royale, Hazelnut Praline Dome, Classic French Macarons, Butter Croissant Basket, Tiramisu Indulgence) each with `name`, `desc`, `price`, `weight`, `rating`, `badge`, and Unsplash `img` URL. Build `Stars` sub-component using `motion.span` per star with `whileHover` animation. Each product card uses `useState` for `added` (cart) and `wishlisted` states. Render product image with `Eye` quickview overlay button, badge chip, `Heart` wishlist toggle button (`motion.whileTap`), product name/desc, `Star` rating row, weight chip, price, and `ShoppingBag` add-to-cart button that shows `Check` icon when `added` is true (with `AnimatePresence` swap animation). Import both `BestSellers.css` and `BestSellersActions.css`. Include `ArrowRight` 'View All' link to `/Products`.

As a frontend developer, implement the `CustomCakeShowcase` section combining a scroll-parallax image gallery with an inline custom order form. Use `useRef(sectionRef)` with `useScroll` offset `['start end','end start']` and `useTransform(scrollYProgress,[0,1],[40,-60])` for `galleryY` on the gallery column. Manage state: `activeId` (default first image), `flavor` (from `flavors` array of 6 options), `weight` (default 1.5 kg, slider or stepper), `eggless` boolean toggle rendering `Egg`/`EggOff` icons, `message` text input, `deliveryDate` date input with `CalendarDays` icon, `timeSlot` select (default '10:00 AM – 1:00 PM'), `submitted` boolean. Gallery renders `showcaseImages` (5 items: tiered-rose, choco-drip, floral-buttercream, birthday-confetti, red-velvet) as thumbnail strip; clicking sets `activeId`. Active image shown in main panel with title/note overlay. Form side renders flavor selector, weight control, eggless toggle, cake message textarea, delivery date picker, time slot selector, and 'Start My Custom Order' button that calls `handleOrder()` setting `submitted=true` and showing a confirmation state. Wheat decorations (`Wheat` icon, size 96, strokeWidth 1.2) positioned with CSS. Import `CustomCakeShowcase.css`.

As a frontend developer, implement the `CustomerTestimonials` section with staggered scroll-triggered card animations. Define `testimonials` array of 4 items (Ananya Rao/AR, Rohit Menon/RM, Sneha Iyer/SI, Karthik Nair/KN) each with `name`, `initials`, `meta` (Bengaluru neighbourhood), `rating`, `product`, and `review` text. Build `StarRow` sub-component rendering 5 `Star` icons (lucide-react, size 17, strokeWidth 1.6) as `motion.span` elements with `whileInView` scale animation `[0.4, 1.25, 1]` and `delay: s * 0.07`, `viewport={{ once: true }}`. Build `TestimonialCard` using `useRef`, `useInView({ once: true, amount: 0.3 })`, rendered as `motion.article` with `initial={{ opacity:0, y:30 }}` animated to `{ opacity:1, y:0 }` on inView, `delay: index * 0.15`, spring stiffness 90 damping 16. Each card shows animated SVG quote mark (`motion.path` stroke draw), initials avatar circle, reviewer name/meta, `StarRow`, product label with `Cake` icon, and review text. Include an 'ArrowRight' CTA link. Import `CustomerTestimonials.css`.

As a frontend developer, implement the `LandingCTA` section featuring magnetic buttons with particle burst effects. Build `makeBurst()` utility generating 10 particles with random angle, distance (48–94px), and colors from `PARTICLE_COLORS` array (`#D4AF37`, `#B76E79`, `#e6c45a`, `#cf8893`). Build reusable `MagneticButton` component using `useRef`, `useState({ x, y })` offset and `useState([])` particles. `handleMove` computes cursor-to-center delta with `0.18` magnetic factor. `handleClick` calls `makeBurst()`, sets particles, clears after 700ms via `setTimeout`. Render `motion.a` with `animate={{ x: offset.x, y: offset.y }}`, `whileHover={{ scale:1.05 }}`, `whileTap={{ scale:0.97 }}` spring (stiffness 320, damping 22, mass 0.6). `AnimatePresence` renders burst `motion.span` particles with `initial={{ x:0,y:0,opacity:1 }}` → `animate={{ x:p.x,y:p.y,opacity:0,scale:0 }}` over 0.65s ease-out. `LandingCTA` section renders decorative `lcta-decor` div with `lcta-wash` and 5 `Wheat` icons positioned via CSS classes `w1`–`w5`. Two `MagneticButton` instances: 'Shop All Products' (`ShoppingBag` icon, href `/Products`) and 'Order on WhatsApp' (`MessageCircle` icon, href `wa.me`). Import `LandingCTA.css`.

As a frontend developer, implement the `Footer` section with newsletter subscription, social links, and a 4-column link grid. Use `useState('')` for `email` and `useState(false)` for `subscribed`. `handleSubscribe(e)` prevents default, checks `email.trim()`, sets `subscribed=true`, clears email. Render `pb-ftr__glow` decorative div; brand block with `Cake` icon (size 24, strokeWidth 1.8), 'PB Bake House' heading and 'Luxury Bakery · Bengaluru' subtext, tagline paragraph, WhatsApp CTA link (`MessageCircle` icon) to `wa.me/919876543210`, contact items with `MapPin`/`Phone`/`Mail` icons. Social row mapping `socials` array (Instagram, Facebook, Youtube, Twitter icons) as icon-only links. Newsletter form: email input + subscribe button showing success state when `subscribed` is true. `linkColumns` array of 4 columns (Shop, About, Support, Legal) each with 4 links rendered as anchor tags (Shop→Products/ProductDetail/Cart/Checkout, About→Landing/Register/Login, Support→OrderTracking/OrderHistory/UserProfile/AdminPanel, Legal→Landing). Bottom bar with copyright and legal note. Import `Footer.css`. Note: this component may already exist from a shared layout if used across multiple pages.

As a frontend developer, implement the RegisterHero section for the Register page. The section renders a full-width hero using the `rh-root` container with a decorative `rh-glow` div and `rh-accent-line` accent (both aria-hidden). Inside `rh-inner`, render an `rh-mark` decorative element, an `<h1>` with class `rh-headline` containing an accented `<span class='rh-headline-accent'>Account</span>` word, and a `<p class='rh-subheadline'>` describing PB Bake House account benefits (order custom cakes, real-time delivery tracking, seasonal collections). Import and apply `RegisterHero.css` for all styling. No state or interactivity required. Note: Navbar component may already exist from the Landing page (task 9ccbd3aa-3cab-43b8-8389-46899f7e5202).

As a frontend developer, implement the ProductsHero section for the Products page. The section uses a `ph-root` container with a decorative `ph-accent-line` and `ph-glow` div (both aria-hidden). Inside `ph-inner`, render an `h1.ph-heading` with an inline `span.ph-accent` wrapping 'Collection'. The `ph-subhead` paragraph contains four `span.ph-accent-chip` elements for 'Cakes', 'Bakery', 'Snacks', and 'Custom Orders' inline within the descriptive text. A `ph-divider` with a nested `ph-divider-dot` span serves as a visual separator. Apply all styles from `ProductsHero.css` (2744 chars) covering layout, glow/accent animations, chip styling, and divider. No state or props required — purely static presentational component. Note: Navbar component may already exist from the Landing page task.

As a Backend Developer, implement all product-related REST API endpoints using Spring Boot. Includes: GET /api/products (list with filters: category, price range, diet, rating, sort, pagination), GET /api/products/:id (product detail), GET /api/products/featured, GET /api/products/best-sellers, POST /api/admin/products (create product with Cloudinary image upload), PUT /api/admin/products/:id (update), DELETE /api/admin/products/:id (delete), PATCH /api/admin/products/:id/toggle-featured, PATCH /api/admin/products/:id/toggle-bestseller. Implement Product, Category JPA entities and repositories. Support multiple image upload via Cloudinary. Note: Frontend ProductsGrid, ProductsFilter, BestSellers, FeaturedCategories, and AdminPanel product management sections depend on this API.

As a Backend Developer, implement custom cake order REST API endpoints. Includes: POST /api/custom-cake-orders (submit custom order with up to 5 reference image uploads to Cloudinary, fields: weight, flavor, egg/eggless, message, delivery date, time slot, special instructions), GET /api/custom-cake-orders/my-orders (customer's custom cake requests), GET /api/admin/custom-cake-orders (admin view all requests), PATCH /api/admin/custom-cake-orders/:id/status (accept/reject/update status), GET /api/custom-cake-orders/:id (detail). Implement CustomCakeOrder JPA entity with image URL list. Note: Frontend CustomCakeShowcase section on Landing page depends on this API.

As a Backend Developer, implement user profile management REST API endpoints. Includes: GET /api/users/me (get profile), PUT /api/users/me (update name, email, phone), PUT /api/users/me/password (change password with old password verification), GET /api/users/me/addresses (list saved addresses), POST /api/users/me/addresses (add address), PUT /api/users/me/addresses/:id (update), DELETE /api/users/me/addresses/:id (delete), PATCH /api/users/me/addresses/:id/default (set default). Implement CustomerAddress JPA entity. Note: Frontend UserProfile page depends on this API.

As a Backend Developer, implement coupon and discount management API. Includes: POST /api/admin/coupons (create coupon: code, type percentage/flat, value, min order, expiry, usage limit), GET /api/admin/coupons (list all), PUT /api/admin/coupons/:id (update), DELETE /api/admin/coupons/:id, POST /api/cart/apply-coupon (validate coupon code and return discount — already listed in cart API but enforced here). Implement Coupon JPA entity. Note: Frontend CartSummary (promo code input) depends on this API.

As a Backend Developer, implement delivery management API with Porter-ready architecture. Includes: GET /api/delivery/zones (list delivery zones and charges), POST /api/delivery/estimate (calculate delivery charge based on customer address coordinates vs store location), PUT /api/admin/delivery/zones (manage delivery zones and base charges), PUT /api/admin/delivery/settings (configure pickup option, same-day delivery, scheduled slots), POST /api/admin/orders/:id/dispatch (trigger delivery, initially WhatsApp fallback; Porter API stub for future integration). Implement DeliveryZone JPA entity. Architecture must be abstracted via DeliveryService interface allowing Porter provider to be plugged in later without major refactor. Note: Frontend Checkout page delivery section depends on this.

As a Frontend Developer, implement the Login page with a luxury split-layout design featuring: email and password fields with validation, show/hide password toggle, 'Forgot Password' link triggering OTP flow modal, 'Remember Me' checkbox, login button with loading state, Google sign-in placeholder, and link to Register page. On success, store JWT in localStorage and redirect to previous page or home. Display error messages from API. Luxury glassmorphism card design with gold accent and animated background. Calls POST /api/auth/login. Depends on backend Auth API.

As a DevOps Engineer, set up environment configuration for both frontend and backend services. Create .env files for dev and prod environments with variables: MYSQL_URL, MYSQL_USER, MYSQL_PASSWORD, JWT_SECRET, JWT_EXPIRY, CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET, RAZORPAY_KEY_ID, RAZORPAY_KEY_SECRET, SMTP_HOST, SMTP_USER, SMTP_PASSWORD, FRONTEND_URL, PORT. Add .gitignore rules to exclude all .env files. Create .env.example template files for developer onboarding. Configure Spring Boot application-dev.properties and application-prod.properties using environment variable placeholders. Document all required environment variables in README.

As a frontend developer, implement the LoginSocial section for the Login page. This section renders social login alternatives below the main form using framer-motion animations. It includes a divider row with two ls-divider-line spans and an 'or continue with' label. Two motion.a buttons are rendered inside a motion.div with fadeIn animation (opacity 0→1, y 12→0, duration 0.5, easeOut): (1) ls-btn-google linking to /Login with a full Google 'G' SVG icon (four-path multicolor), and (2) ls-btn-whatsapp linking to a WhatsApp wa.me deep link (919900000000) with a pre-filled login message, with a WhatsApp SVG icon (fill='#25D366'). Both buttons use the buttonSpring motion config (whileHover scale=1.02, whileTap scale=0.975, spring stiffness=420, damping=22). Also renders an ls-glow decorative background element. Implement LoginSocial.css (3263 chars) for button styles, hover states, glow effect, and divider layout. Note: Google href currently points to /Login placeholder and should be replaced with real OAuth flow.

As a frontend developer, implement the UserProfileSidebar section for the UserProfile page. Build a sidebar navigation component using the `navItems` array (Profile Info, Saved Addresses, Order History, Preferences, Security & Privacy, Download Data) with active state tracking via `useState`. Render a custom `NavIcon` SVG component that switches between 6 icon variants (user, map-pin, package, sliders, shield, download) using a switch statement. Display `userData` object (name: 'Priya Sharma', email, initials 'PS', accountType 'Premium', avatarUrl null) as an avatar block with initials fallback. Apply `ups-nav-icon` CSS class on all SVG icons. Note: this component may be shared across profile sub-sections. Styles imported from `UserProfileSidebar.css` (8391 chars).

As a frontend developer, implement the AdminHeader section for the AdminPanel page. This section renders a motion.header with a framer-motion entry animation (opacity 0→1, y -12→0, 0.35s easeOut). It includes: (1) a left group with an ah-hamburger button that dispatches a custom 'admin-sidebar-toggle' CustomEvent to window and toggles local sidebarOpen useState, (2) a breadcrumb nav rendering the breadcrumbItems array with SVG chevron separators and ah-breadcrumb-link / ah-breadcrumb-current spans, (3) a center ah-title with an inline SVG grid icon, (4) a right group with framer-motion whileHover/whileTap scale buttons for Settings and other quick actions using spring transitions (stiffness: 500, damping: 30). Styles from AdminHeader.css with ah- prefixed class names.

As a Backend Developer, implement wishlist REST API endpoints. Includes: GET /api/wishlist (get current user's wishlist), POST /api/wishlist/items (add product to wishlist), DELETE /api/wishlist/items/:productId (remove from wishlist), DELETE /api/wishlist (clear wishlist). Implement Wishlist and WishlistItem JPA entities linked to User and Product. Return product details in wishlist response. Note: Frontend ProductHero (wishlist toggle) and BestSellers (heart button) depend on this API.

As a Frontend Developer, implement the Register page with full name, email, phone, password, and confirm password fields. Include real-time password strength indicator, field-level validation, and terms acceptance checkbox. On success, store JWT and redirect to home. Show API error messages inline. Luxury glassmorphism design with 3D golden ring decoration using @react-three/fiber. Calls POST /api/auth/register. Depends on backend Auth API.

As a Backend Developer, implement public-facing endpoints to support Landing page dynamic content: GET /api/banners (list active banners for homepage carousel), GET /api/reviews (list approved customer testimonials with pagination), GET /api/settings/public (return public store settings: name, logo, address, phone, hours, social links). These complement the admin-side banner and settings endpoints already in Admin Dashboard API. Implement Banner JPA entity (already referenced in schema) and StoreSettings entity. Note: Landing page BestSellers, FeaturedCategories, CustomerTestimonials, and Footer depend on these endpoints.

As a Backend Developer, implement the global JWT authentication and authorization middleware for Spring Boot. Create JwtTokenProvider (generate, validate, parse claims), JwtAuthenticationFilter (extract Bearer token from Authorization header, set SecurityContext), and configure SecurityFilterChain to distinguish public routes (/api/auth/**, /api/products GET, /api/banners GET, /api/settings/public) from protected customer routes and admin-only routes (ROLE_ADMIN). Implement UserDetailsService loading from DB. Add refresh token endpoint POST /api/auth/refresh-token. Ensure CORS is configured to allow frontend origin. This is a prerequisite for all protected API tasks.

As a Frontend Developer, implement shared global state management for the vanilla JS frontend. Create a lightweight state store (module pattern) managing: authState (JWT token, user info, isAuthenticated), cartState (item count for Navbar badge, cart total), toastQueue (global notification stack). Implement: setAuth / clearAuth helpers that read/write to localStorage, cartCount observable that updates Navbar badge across pages without full reload, and a showToast(message, type) utility used by all pages. Also implement a global API client module (api.js) with fetch wrappers that automatically attach Authorization: Bearer headers, handle 401 responses by clearing auth and redirecting to Login, and wrap responses in a standard {data, error} shape.

As a frontend developer, implement the RegisterForm section for the Register page. This is a complex interactive section using `useState`, `useRef`, `useCallback`, and `useEffect` from React. It features: (1) A Three.js decorative canvas via `@react-three/fiber` `<Canvas>` with `<OrbitControls>` rendering the `GoldenFlour` component — a group with a golden torus (`args={[1.15, 0.025, 32, 80]}`, `color='#D4AF37'`, metalness 0.7) and an inner rose-gold torus ring (`args={[0.85, 0.018, 24, 64]}`, `color='#B76E79'`), with initial rotation set in `useEffect`. (2) Framer Motion `useMotionValue`, `useSpring`, and `useTransform` for tilt/parallax effects on the form card. (3) A multi-field registration form with fields: fullName, email, phone, password, confirmPassword — each using Lucide icons (`User`, `Mail`, `Phone`, `Lock`, `ShieldCheck`, `Cake`). (4) Real-time field validation via `validateField()` covering required checks, email regex, phone regex (`/^[+]?[\d\s()-]{7,15}$/`), password minimum 8 chars, and password confirmation match. (5) A `getPasswordStrength()` helper computing a score from length, uppercase, digits, and special characters, returning levels: weak (25%), fair (50%), good (75%), strong (100%) with a visual strength bar. (6) Form submission state management. Import `GoldenFlour.css` and `RegisterForm.css`.

As a frontend developer, implement the RegisterBenefits section for the Register page. The section renders a `<section class='rb-section'>` with: (1) A decorative `rb-bg-motif` div containing six `rb-bg-dot` `<span>` elements (aria-hidden). (2) An `rb-header` block with suptitle 'Why Join', headline 'Perks of a PB Bake House Account', and a subtitle paragraph. (3) A Framer Motion `<motion.div class='rb-grid'>` using `containerVariants` with `staggerChildren: 0.12`, triggered `whileInView` (once, margin '-60px'), mapping over the `benefits` array of 4 items — each rendered as a `<motion.div class='rb-card'>` with `cardVariants` (hidden: opacity 0, y 24 → visible: opacity 1, y 0, duration 0.5 easeOut). Each card displays a Lucide icon (`Package`, `Heart`, `Gift`, `Cake` with `strokeWidth={1.8}`) inside `rb-card-icon-wrap`, plus `rb-card-title` and `rb-card-desc`. (4) A bottom `rb-cta-row` with a 'Already have an account?' link pointing to `/Login` styled with `var(--secondary)` and fontWeight 600. Import `RegisterBenefits.css`.

As a frontend developer, implement the ProductsFilter section for the Products page. The component uses `useState` for `category`, `diet` (array), `rating`, `priceRange` (default MAX_PRICE=5000), `activePreset`, `openSections` (object with keys: categories, price, dietary, rating), and `mobileOpen`. Uses `useCallback` for `toggleSection`, `toggleDiet`, `handlePriceChange`, `handlePreset`, and `useCallback`-wrapped reset. Uses `useMemo` for `hasActiveFilters`. Static data constants include `CATEGORIES` (4 items with counts), `DIET_OPTIONS` (egg/eggless/vegan), `RATING_OPTIONS` (1–4 stars), and `PRICE_PRESETS` (4 INR ranges). Renders a `StarRating` sub-component that maps 5 SVG polygon stars, toggling `fill` based on index vs star count, with a `pf-rating-stars--filled` class variant. Filter panel has collapsible accordion sections toggled via `openSections` state using `ChevronDown` from lucide-react. Mobile drawer toggled via `mobileOpen` with `SlidersHorizontal` icon trigger. Price section includes an HTML range input (`priceRange` state) and preset chip buttons (`activePreset` toggling). Diet section uses multi-select toggle chips. Rating section uses single-select with `StarRating`. Reset button uses `RotateCcw` icon and only renders when `hasActiveFilters` is true. Apply all styles from `ProductsFilter.css` (10750 chars).

As a frontend developer, implement the ProductsGrid section for the Products page. The component uses `useState` for pagination/sort state and renders a hardcoded `products` array of 12 items (ids 1–12), each with `id`, `name`, `category` (Cakes/Bakery/Snacks/Desserts), `price`, `originalPrice` (nullable), `rating`, `reviews`, and an Unsplash `image` URL. Uses lucide-react icons: `Star`, `ShoppingBag`, `ChevronDown`, `ChevronLeft`, `ChevronRight`, and `Cake`. Renders product cards with image, category badge, product name, star rating display (`Star` icon + numeric rating + review count), price (with strikethrough `originalPrice` when not null), and an 'Add to Bag' button using `ShoppingBag` icon. Includes a sort/filter bar with a `ChevronDown` dropdown. Implements pagination controls using `ChevronLeft`/`ChevronRight` buttons. Empty state uses the `Cake` icon. Apply all styles from `ProductsGrid.css` (7881 chars) covering card layout, grid, pagination, sort bar, and responsive breakpoints.

As a Backend Developer, implement all order-related REST API endpoints. Includes: POST /api/orders (create order from cart), GET /api/orders/my-orders (customer order history with filters: status, date range, sort), GET /api/orders/:id (order detail with tracking), GET /api/admin/orders (all orders with filters), PATCH /api/admin/orders/:id/status (update order status: Pending→Confirmed→Preparing→Ready→Out for Delivery→Delivered), GET /api/orders/:id/track (real-time tracking info). Implement Order, OrderItem JPA entities. Generate unique order ID (e.g., PBH-YYYY-XXXX). Store payment status, delivery address, and order items. Note: Frontend OrderHistory, OrderTracking, Cart, and Checkout pages depend on this API.

As a Backend Developer, implement cart REST API endpoints. Includes: GET /api/cart (get current user's cart with items and computed totals), POST /api/cart/items (add item to cart), PUT /api/cart/items/:id (update quantity), DELETE /api/cart/items/:id (remove item), DELETE /api/cart (clear cart), POST /api/cart/apply-coupon (validate and apply coupon code, returns discount amount), DELETE /api/cart/remove-coupon. Implement Cart and CartItem JPA entities linked to User. Compute subtotal, tax (5% GST), and grand total server-side. Note: Frontend CartItems, CartSummary sections depend on this API.

As a Backend Developer, implement reviews and ratings REST API. Includes: POST /api/products/:id/reviews (submit review: rating 1-5, text, only by verified purchasers), GET /api/products/:id/reviews (list reviews with pagination), PUT /api/admin/reviews/:id/approve (admin moderation), DELETE /api/admin/reviews/:id. Implement Review JPA entity linked to Product and User. Compute and update average rating on product record. Note: Frontend ProductsGrid and ProductDetail pages display ratings that depend on this.

As a Frontend Developer, implement the UserProfile page with sections for: personal info (name, email, phone) with inline edit, password change form with strength indicator, saved delivery addresses (add/edit/delete/set default), and quick links to Order History and Custom Cake Orders. Fetch data from GET /api/users/me and /api/users/me/addresses. Show success/error toasts on save. Implement luxury card-based layout with gold accent. Depends on backend User Profile API.

As a Tech Lead, verify the end-to-end integration between the CustomCakeShowcase frontend section (Landing page) and the Custom Cake Order backend API. Ensure form submission correctly uploads up to 5 reference images to Cloudinary via /api/custom-cake-orders, all form fields (weight, flavor, eggless, message, delivery date, time slot) are persisted, customer receives confirmation, and the order appears in admin panel custom cake requests section.

As a frontend developer, implement the UserProfileHeader section for the UserProfile page. Build a static header section using `uph-root` as the root class. Render a top row with a greeting block displaying 'Welcome back,' and `userName` ('Priya') side by side, plus a member badge using the `Clock` icon from lucide-react (size 12) showing 'Member since {memberSince}' (March 2024). Render an actions row with two anchor tags linking to `/OrderHistory`: one with `Clock` icon (size 16) for 'View Order History' and one with `FileText` icon (size 16) for 'Download Invoices', both styled as `uph-action-btn`. Styles imported from `UserProfileHeader.css` (3018 chars).

As a frontend developer, implement the UserProfilePersonalInfo section for the UserProfile page. Build an editable personal info form using `useState` hooks for: `data` (firstName, lastName, email, phone, dob, gender from `initialData`), `editingField`, `editValue`, `errors`, `globalEdit`, `toast`, and `saving`. Implement `validateField` logic covering required, email regex, phone digit count (10-13), and min-length name checks. Render 6 fields from `fieldMeta` (firstName, lastName, email, phone, dob, gender) with inline field-level editing via `startEditField` and a global edit mode via `setGlobalEdit`. Gender field uses a `<select>` with `genderOptions`. DOB uses `formatDobForDisplay` for locale-formatted output. Animate field transitions using `motion` and `AnimatePresence` from framer-motion. Show a `toast` notification via `showToast` with 2800ms auto-dismiss. Simulate async save with `setSaving` and `setTimeout`. Styles imported from `UserProfilePersonalInfo.css` (9800 chars).

As a frontend developer, implement the UserProfilePreferences section for the UserProfile page. Build a preferences form using `useState` for: `promoEmails` (bool, default true), `smsNotifications` (bool, default false), `newsletterFreq` (string, default 'Weekly'), `contactMethod` (string, default 'Email'), `marketingPrefs` (array, default ['new-products', 'birthday-special']), `saved`, and `saving`. Render notification toggles with custom `upr-toggle` / `upr-toggle-track` / `upr-toggle-thumb` CSS toggle UI for promo emails and SMS. Render radio-style selectors for `NEWSLETTER_OPTIONS` ('Daily', 'Weekly', 'Monthly') and `CONTACT_OPTIONS` ('Email', 'Phone', 'WhatsApp'). Render checkboxes for `MARKETING_OPTIONS` (new-products, seasonal-offers, birthday-special) using `toggleMarketingPref` callback. Implement `handleSave` with 500ms simulated async delay, then show saved confirmation for 2800ms. Wrap main card in `motion.div` with `opacity: 0, y: 12` → `opacity: 1, y: 0` entry animation using `AnimatePresence`. Styles imported from `UserProfilePreferences.css` (9022 chars).

As a frontend developer, implement the UserProfileAddresses section for the UserProfile page. Build a full CRUD address manager using `useState` for: `addresses` (initialized from `INITIAL_ADDRESSES` with 3 Bengaluru entries), `showModal`, `editingId`, `deleteConfirmId`, and `form` (label, fullAddress, city, postalCode). Implement `openAdd`, `openEdit`, `closeModal`, `handleChange`, `handleSubmit` (add/edit branch), `handleSetDefault` (single-default toggle), and `handleDelete`. Render address cards with dynamic label icons from `LABEL_ICONS` map (Home→`Home`, Office→`Briefcase`, Other→`MapPinned` from lucide-react). Display default badge using `Star` icon. Show `Pencil` and `Trash2` action buttons per card. Implement delete confirmation via `deleteConfirmId` state with `Check` and `X` icons. Animate cards using `motion.div` with `cardVariants` (hidden→visible with staggered `delay: i * 0.08`) and `AnimatePresence` for exit animations (`scale: 0.95`). Render an Add Address button using `Plus` and `MapPin` icons. Show add/edit form in a modal with `LABEL_OPTIONS` select. Styles imported from `UserProfileAddresses.css` (9725 chars).

As a frontend developer, implement the UserProfileSecuritySettings section for the UserProfile page. Build a security settings panel using `useState` for password modal visibility and related form state. Implement `PasswordModal` sub-component with `useState` for `currentPw`, `newPw`, `confirmPw`, and `errors`; include `evaluatePasswordStrength` function scoring password on 5 criteria (length≥8, length≥12, uppercase, digit, special char) returning levels: weak/fair/good/strong. Modal has overlay click-to-close, `uss-modal-overlay` / `uss-modal` / `uss-modal-header` / `uss-modal-body` CSS classes, and `handleSubmit` with inline validation errors for all 3 fields. Render a `LOGIN_ACTIVITY` table (5 entries) with columns: device (emoji from `DEVICE_ICONS` map), location, datetime, status badge (success/failed). Show `Building2` or contextual lucide icons for device categories. Styles imported from both `UserProfileSecuritySettings.css` (10690 chars) and `DeleteConfirmModal.css`.

As a frontend developer, implement the AdminSidebar section for the AdminPanel page. This section renders a collapsible sidebar driven by MENU_ITEMS config grouped into sections: Main, Management, Insights, Content, and System. Each item includes a label, href (with ?tab= query params), optional badge count string, and an inline SVG icon drawn from the ICON_PATHS map (layout-dashboard, package, shopping-cart, users, bar-chart, image, settings). The component uses useState to track active item and listens for the 'admin-sidebar-toggle' CustomEvent dispatched by AdminHeader to show/hide the sidebar on mobile. Styles from AdminSidebar.css with as- prefixed class names.

As a frontend developer, implement the AdminWelcome section for the AdminPanel page. This section includes a custom useDateTime hook that uses useState(new Date()) and setInterval every 1000ms (cleared on unmount) to provide a live clock. It displays a time-sensitive greeting via getGreeting() (Good Morning/Afternoon/Evening) with the current date via formatDate() and time via formatTime(). Four statusCards (orders, pending, revenue, customers) are rendered with framer-motion cardVariants (hidden→visible with staggered delay: 0.1*i, cubic-bezier ease) showing value, badge with up/warn/neutral types, and inline SVG icons. Styles from AdminWelcome.css with aw- prefixed class names.

As a frontend developer, implement the AdminStats section for the AdminPanel page. This section renders four stat cards from the STATS array (orders, revenue, pending, repeat) each with: label, value (₹-prefixed where relevant), trend percentage, trendDir (up/down), trendLabel, a spark array of 12 data points rendered as an SVG sparkline normalized against SPARK_MAX=44, a colorKey (gold/rose/amber/muted) for theming, an inline SVG icon, and an iconClass for per-card color. A TrendArrow component renders an up or down SVG polyline+line chevron based on trendDir. Imports StatCard.css and AdminStats.css with ads- prefixed class names.

As a frontend developer, implement the AdminQuickActions section for the AdminPanel page. This section renders an aqa-root section with an aqa-inner container and aqa-label heading. It maps over the ACTIONS array of 5 items (Add New Product, View New Orders, Manage Customers, Upload Banner, View Analytics) each with a title, desc, href with ?tab= and ?action= query params, variant class (primary/secondary/accent for theming), an optional badge boolean, and a per-item inline SVG icon with variant-specific class (aqa-icon-svg--primary/secondary/accent). Styles from AdminQuickActions.css with aqa- prefixed class names.

As a Frontend Developer, implement the Products page combining ProductsHero, ProductsFilter, and ProductsGrid sections into a cohesive page. Wire filter state from ProductsFilter to ProductsGrid via lifted state or context. Fetch products from GET /api/products with query params (category, diet, rating, priceRange, sort, page). Implement real pagination using API response metadata. Show skeleton loaders while fetching. Replace hardcoded product data with API responses. Depends on backend Products API.

As a DevOps Engineer, set up a CI/CD pipeline using GitHub Actions. Create workflows for: (1) Backend — on push to main/dev: run Maven build, execute unit and integration tests, build Docker image, push to container registry, deploy to staging/prod server via SSH or k8s rollout. (2) Frontend — on push: lint check, build static assets, deploy to CDN or Nginx container. Configure branch protection rules requiring passing CI before merge. Add Slack/email notification on pipeline failure. Store secrets (DOCKER_PASSWORD, SSH_KEY, RAZORPAY, CLOUDINARY credentials) in GitHub Secrets.

As a Tech Lead, verify the end-to-end integration between the Register page frontend (RegisterForm, RegisterBenefits, RegisterHero sections) and the Auth backend API. Ensure registration form submits to POST /api/auth/register, server-side validation errors display inline in the form, OTP email is triggered on successful registration, and the user is redirected and logged in after verification. Also verify duplicate email/phone errors are surfaced correctly.

As a DevOps Engineer, configure Nginx as a reverse proxy and static file server. Set up: (1) Serve frontend HTML/CSS/JS static assets from /usr/share/nginx/html with cache headers (Cache-Control: max-age=31536000 for hashed assets, no-cache for index.html). (2) Proxy /api/* requests to Spring Boot backend container on port 8080 with proper proxy_pass, proxy_set_header for X-Real-IP and X-Forwarded-For. (3) Enable gzip compression for JS, CSS, JSON, SVG. (4) Configure SSL termination with Let's Encrypt / Certbot auto-renewal. (5) Add security headers: X-Frame-Options, X-Content-Type-Options, Content-Security-Policy. Create nginx.conf and docker-compose.yml nginx service definition. Depends on environment config being in place.

As a frontend developer, implement the CartHeader section for the Cart page. This section renders a `<section className="ch-root">` containing a breadcrumb navigation linking back to `/Products` with a `/` separator and current page label, a headline block with `<h1 className="ch-headline">` featuring an accented `<span className="ch-headline-accent">Shopping</span>` word and a decorative `ch-accent-line` div, and a meta row showing a `ShoppingBag` (lucide-react, size 16) icon alongside a hardcoded `itemCount = 3` item count badge with singular/plural logic, plus a `ch-continue` anchor linking to `/Products` with an `ArrowLeft` (size 15) icon. Apply CartHeader.css for all styling. Note: Navbar component may already exist from the Landing page task [9ccbd3aa-3cab-43b8-8389-46899f7e5202].

As a frontend developer, implement the OrderHistoryHero section for the OrderHistory page. Build the `ohh-root` section with three sub-areas: (1) A breadcrumb nav (`ohh-breadcrumb`) using `ChevronRight` icons as separators, linking to `/Landing`, `/UserProfile`, and showing 'Order History' as the current page with `aria-label='Breadcrumb'`. (2) A title/description/CTA row (`ohh-body`) containing an `ohh-accent-line` decorative element, an `<h1>` with the text 'Your <span>Order History</span>' using `ohh-title-accent` styling, a description paragraph, and a `Browse Products` CTA link to `/Products` with an `ArrowRight` icon (`ohh-cta-icon`). (3) A quick stats summary row (`ohh-stats`) displaying three stat items with lucide icons — `Receipt` for Total Orders (12), `PackageCheck` for Delivered (10), and `Clock` for In Progress (2) — all using `var(--secondary)` color. All stats are hardcoded static values. Import `OrderHistoryHero.css` for styling.

As a Backend Developer, implement Razorpay payment integration endpoints. Includes: POST /api/payments/create-order (create Razorpay order from cart total + delivery charges), POST /api/payments/verify (verify Razorpay payment signature using HMAC SHA256), POST /api/payments/webhook (handle Razorpay webhook events for payment success/failure), GET /api/admin/payments (payment history for admin). Implement PaymentHistory JPA entity storing transaction IDs, payment status, Razorpay order ID. Support UPI, Credit/Debit cards, Net Banking. Note: Frontend Checkout page and CartCTA depend on this API.

As a Backend Developer, implement all admin panel REST API endpoints (protected by admin JWT role). Includes: GET /api/admin/dashboard/stats (total orders, revenue, pending orders, customers), GET /api/admin/analytics/daily-orders, GET /api/admin/analytics/weekly-revenue, GET /api/admin/analytics/monthly-revenue, GET /api/admin/analytics/best-sellers, GET /api/admin/analytics/customer-growth, GET /api/admin/customers (list all customers with repeat customer flag), GET /api/admin/customers/:id (customer detail with order history), POST /api/admin/banners (upload banner to Cloudinary), GET /api/admin/banners, DELETE /api/admin/banners/:id, GET /api/admin/settings (store settings), PUT /api/admin/settings (update store logo, contact, social links, timings). Note: AdminPanel page frontend depends on this API.

As a Frontend Developer, implement the OrderTracking page featuring a real-time order status timeline (Pending → Confirmed → Preparing → Ready → Out for Delivery → Delivered) with animated step indicators. Display order ID, items summary, delivery address, estimated time, and payment status. Poll GET /api/orders/:id/track every 30 seconds for status updates. Implement luxury progress stepper UI with smooth transitions and gold accent styling. Show delivery tracking info when available. Depends on backend Order API for live data.

As a Frontend Developer, implement the ProductDetail page with: premium image gallery (main image + thumbnails with zoom on hover), product name, category badge, price display with discount, star rating with review count, product description, weight and flavor selector (for cakes), egg/eggless toggle, quantity stepper, Add to Cart and Wishlist buttons, custom cake order shortcut for cake category products, and a reviews section. Fetch product from GET /api/products/:id. Add to cart via POST /api/cart/items. Luxury full-width layout with framer-motion animations. Depends on backend Products API and Cart API.

As a Tech Lead, verify the end-to-end integration between the Login and Register frontend implementations and the Auth backend API. Ensure JWT token is correctly stored after login, protected routes redirect unauthenticated users, OTP flow works end-to-end, registration form errors from API are displayed in UI, and password reset flow completes successfully. Validate token expiry handling and refresh logic.

As a Tech Lead, verify the end-to-end integration between the UserProfile frontend page and the User Profile backend API. Ensure profile data loads from /api/users/me, inline edits persist via PUT request, address add/edit/delete operations work, default address is correctly flagged, password change enforces old password verification, and success/error toast notifications display based on API response.

As a frontend developer, implement the AdminContent section for the AdminPanel page. This is the most complex section — a full tabbed CMS dashboard using useState and useMemo. It renders a TABS array of 6 tabs (products, orders, customers, analytics, banners, settings) with icon and badge support, animated via framer-motion AnimatePresence for tab transitions. Tab content includes: (1) Products tab with INITIAL_PRODUCTS data, PRODUCT_CATEGORIES and PRODUCT_STATUS filter dropdowns, search, and a product table with image, name, SKU, category, price, stock, and status; (2) Orders tab with STATUSES filter (pending/confirmed/preparing/ready/delivered/cancelled) and order rows; (3) Customers tab with customer list; (4) Analytics tab with TIME_RANGES selector (today/week/month/year); (5) Banners tab for banner management; (6) Settings tab importing SettingsPanel.css. All filtering done with useMemo. Imports AdminContent.css and SettingsPanel.css with ac- prefixed class names. Framer-motion AnimatePresence wraps tab panel swaps.

As a Frontend Developer, implement the OrderHistory page assembling OrderHistoryHero, OrderHistoryFilters, OrderHistoryList, and OrderHistoryEmpty sections. Wire filter state to API calls: fetch from GET /api/orders/my-orders with status, dateRange, sort, and page params. Replace static ORDERS array with API response data. Replace hardcoded stats (12 total, 10 delivered, 2 in-progress) in OrderHistoryHero with real values from API response metadata. Show OrderHistoryEmpty when API returns zero results. Depends on backend Orders API.

As a Frontend Developer, implement the Cart page assembling CartHeader, CartItems, CartSummary, and CartCTA sections. Replace hardcoded cart items with data from GET /api/cart. Wire quantity update to PUT /api/cart/items/:id, item removal to DELETE /api/cart/items/:id, and coupon apply to POST /api/cart/apply-coupon. Reflect real subtotal, tax, and delivery charges from API in CartSummary. Update Navbar cart badge count from API cart item count. Depends on backend Cart API and Coupons API.

As a Tech Lead, verify the end-to-end integration between the ProductReviews section (ProductDetail page) and the Reviews & Ratings backend API. Ensure reviews load from GET /api/products/:id/reviews with pagination, rating distribution percentages are computed from real data, verified purchaser badge appears only for users with a completed order containing that product, and write-a-review form submission calls POST /api/products/:id/reviews with correct authentication. Also verify CustomerTestimonials on Landing page loads approved reviews from GET /api/reviews.

As a frontend developer, implement the CartItems section for the Cart page. This section uses `useState(initialItems)` to manage a list of 4 hardcoded cart items (Belgian Chocolate Truffle Cake ₹850, New York Baked Cheesecake ₹720, Garlic Pull-Apart Bread ₹180, Pista Baklava Box ₹420), a `swipedId` state and a `touchStart` ref for mobile swipe-to-delete UX. Implements `setQty` and `setQtyDirect` callbacks with `useCallback` for quantity increment/decrement and direct input, and `removeItem` to filter items. Touch handlers `handleTouchStart` and `handleTouchEnd` detect left swipe (dx < -40px, horizontal dominance) to reveal a delete button via `ci-row--swiped` class, and right swipe to dismiss; `handleListClick` on the list ref closes any open swipe when tapping outside. Renders an empty state with `ShoppingBag` and `Cake` icons when items are empty. Formats prices using `formatINR` with `toLocaleString('en-IN')`. Import `Trash2`, `ShoppingBag`, `Cake`, `ArrowRight` from lucide-react. Apply CartItems.css.

As a frontend developer, implement the CartSummary section for the Cart page. This section manages state: `shipping` ('delivery'|'pickup'), `promoCode`, `promoApplied`, `promoDiscount`, and `promoFeedback`. Renders `shippingOptions` array (Home Delivery ₹49 with `Truck` icon, Store Pickup ₹0 with `Store` icon) as selectable radio-style cards with descriptions. Computes `grandTotal = subtotal(1847) + tax(92) + shippingCost - promoDiscount`. Includes a promo code input field with `handlePromoKeyDown` (Enter key triggers apply) and `handleApplyPromo` which validates codes `SWEET10` (10% off subtotal) and `WELCOME50` (flat ₹50 off), setting `promoFeedback` with success/error type and message. Displays line items for subtotal (item count), tax (5% GST with asterisk tooltip), shipping cost, promo discount row (conditionally shown), and grand total. Renders trust icons: `ShieldCheck`, `RotateCcw`, `Clock`, `Sparkles`, `Tag` from lucide-react. Apply CartSummary.css.

As a frontend developer, implement the OrderHistoryFilters section for the OrderHistory page. Build a sticky filter bar (`ohf-root` ref via `rootRef`) with three custom dropdown selectors rendered via a `renderDropdown` helper — Sort (`sort` state, options: newest/oldest/total_spent), Date Range (`dateRange` state, options: 30/90/all), and Status (`status` state, options: all/completed/pending/cancelled). Each dropdown uses `ChevronDown` and `X` (lucide-react) icons. Implement `openDropdown` state with `toggleDropdown` (useCallback) to open/close one dropdown at a time. Wire three useEffects: (1) scroll listener (`window.scrollY > 64`) to set `scrolled` state for sticky shadow enhancement, (2) `mousedown` click-outside handler using `rootRef` to close open dropdowns, (3) `keydown` Escape key handler to close dropdowns. Implement `selectOption` (useCallback) to update the relevant state and close dropdown, `handleClearFilters` to reset all three states to defaults, `getSelectedLabel` to display selected option label, and `activeFilterCount` to count non-default filter selections. Import `OrderHistoryFilters.css`.

As a frontend developer, implement the OrderHistoryList section for the OrderHistory page. Define a static `ORDERS` array (8 entries) with fields: `id` (e.g. '#PBH-2026-0842'), `date`, `items`, `total` (₹ formatted), and `status` ('completed'|'pending'|'cancelled'). Implement `ITEMS_PER_PAGE = 5` pagination with `useState` for current page. Build an `OrderCard` component (renders as `<li className='ohl-card ohl-card--{statusKey}'>`) showing: order ID and date (with `Calendar` icon) in `ohl-card-top`; items count (with `ShoppingBag` icon), total price (with `Package` icon), and a status badge with `ohl-badge-dot` indicator in `ohl-card-mid`; two action buttons — `View Details` (Eye icon, `ohl-btn--primary`) and `Reorder` (RotateCcw icon, `ohl-btn--outline`) with aria-labels in `ohl-actions`. Build a `SkeletonCard` component for loading states. Add a list/grid view toggle using `Grid3X3`/`List` icons and `useState` for view mode. Implement pagination controls with `ChevronLeft`/`ChevronRight` buttons. Import `OrderHistoryList.css`.

As a frontend developer, implement the OrderHistoryEmpty section for the OrderHistory page. Build a static empty-state section (`ohe-root`) containing a centered card (`ohe-card`) with: an icon wrapper (`ohe-icon-wrap`) holding an `ohe-icon-ring` decorative ring (aria-hidden) and an `ohe-icon-inner` div containing a `ShoppingBag` lucide icon with class `ohe-icon-svg`; an `<h2>` headline reading 'No orders yet'; a description paragraph prompting users to browse products; and a CTA anchor link (`ohe-cta`) to `/Products` reading 'Browse Products' with an `ArrowRight` icon (`ohe-cta-arrow`). This is a fully static conditional empty-state component with no internal state. Import `OrderHistoryEmpty.css`.

As a Backend Developer, implement an email notification service using Spring Boot with JavaMailSender (SMTP). Send emails for: Order Confirmation (with order ID and items), Order Status Updates (each status change), OTP Verification (6-digit OTP with 10-minute expiry), Registration Welcome email, Password Reset link, Payment Confirmation. Create HTML email templates for each type. Configure application.properties for SMTP (Gmail or SendGrid). Implement NotificationService as a Spring @Service with async @Async sending to avoid blocking API responses. Note: Triggered by Auth API (OTP), Order API (status updates), and Payment API.

As a Frontend Developer, implement the Checkout page with delivery address form, order summary, delivery method selection (Home Delivery / Store Pickup), delivery charge preview from API, coupon application, and Razorpay payment button integration. Include form validation for address fields. Show estimated delivery time. On payment success, redirect to OrderTracking page. Depends on backend Cart API, Delivery API, and Payment API for dynamic data.

As a Frontend Developer, implement the AdminPanel page with a sidebar navigation and dynamic content sections: Dashboard (stats cards, revenue chart, best sellers list), Product Management (table with add/edit/delete, multi-image upload preview, category assignment, stock toggle, featured/bestseller toggle), Order Management (orders table with status filter, status update dropdown, order detail modal), Customer Management (customers table, repeat customer badge, order history modal), Custom Cake Requests (request cards with uploaded images, accept/reject actions, status update), Banner Management (upload/preview/delete banners), Analytics (charts: daily/weekly/monthly orders and revenue, customer growth), Store Settings (form for logo upload, contact info, social links, store timings, delivery charges). All data fetched from /api/admin/* endpoints. Depends on backend Admin API.

As a Tech Lead, verify the end-to-end integration between the Products page frontend (ProductsGrid, ProductsFilter sections) and the Products backend API. Ensure filter and sort parameters are correctly passed as query params, API pagination response is reflected in UI pagination, product cards display real data from DB, category filter counts are dynamic, and empty states trigger correctly. Also verify ProductDetail page loads correct product data from /api/products/:id.

As a Tech Lead, verify the end-to-end integration between the OrderTracking frontend page and the Orders backend API. Ensure order ID from URL param correctly fetches live status from /api/orders/:id/track, polling mechanism updates status timeline without page refresh, all 6 status stages render correctly with active/completed/pending states, and delivery tracking info is displayed when available from admin dispatch action.

As a Tech Lead, verify the end-to-end integration between the Landing page frontend sections (BestSellers, FeaturedCategories, CustomerTestimonials) and the backend APIs. Ensure BestSellers section fetches real products from /api/products/best-sellers replacing hardcoded data, FeaturedCategories displays real category counts from /api/products, CustomerTestimonials loads approved reviews from /api/reviews, and homepage banners load from /api/banners managed via admin panel.

As a Tech Lead, verify the end-to-end integration between the wishlist UI interactions (ProductHero heart button, BestSellers heart button, RelatedProducts) and the Wishlist backend API. Ensure wishlist toggle calls POST /api/wishlist/items or DELETE /api/wishlist/items/:productId, persisted state is reflected on page reload, and unauthenticated users are redirected to Login before adding to wishlist.

As a Tech Lead, verify the end-to-end integration between the ProductDetail frontend page (ProductHero, ProductGallery, ProductInfo, CustomizationOptions, ProductReviews, RelatedProducts sections) and the Products, Cart, Wishlist, and Reviews backend APIs. Ensure product data loads from GET /api/products/:id, Add to Cart calls POST /api/cart/items, review submission calls POST /api/products/:id/reviews, related products load from GET /api/products with category filter, and customization form state is correctly passed when initiating a custom cake order.

As a frontend developer, implement the CartCTA section for the Cart page. This section renders a Three.js gold-dust particle field using `@react-three/fiber` Canvas (camera position [0,0,3], fov 50, dpr [1,1.5], alpha true) with a `ParticleField` component that creates 80 gold particles (`#D4AF37`) using `useMemo` for positions (Float32Array, 3 values each, range ±3/±2/±1) and sizes (Float32Array, 0.008–0.033 range), animated via `useFrame` rotating the `points` mesh on Y-axis at 0.06 rad/s and sinusoidal X-axis tilt. Content area uses `motion.a` from framer-motion with `fadeUp` variants (staggered delay `i * 0.12`, duration 0.55, custom ease) for a primary checkout button (href `/Checkout`, `ShoppingBag` icon, `whileHover scale 1.02`, `whileTap scale 0.98`) and secondary continue-shopping button (href `/Products`, `ArrowRight` icon). Renders `trustBadges` array (`Lock`/Secure Checkout, `ShieldCheck`/Razorpay Secure, `Package`/Fast Delivery) as animated badge chips. Imports ParticleField.css and CartCTA.css. Also imports `Gift` from lucide-react.

As a Tech Lead, verify the end-to-end integration between the Checkout frontend page and the Payment and Order backend APIs. Ensure Razorpay payment modal opens correctly with order amount from /api/payments/create-order, payment signature verification completes via /api/payments/verify, order is created in DB upon payment success, customer receives confirmation email, and user is redirected to OrderTracking page with correct order ID. Test UPI, card, and net banking payment methods.

As a Tech Lead, verify the end-to-end integration between the OrderHistory page frontend (OrderHistoryHero, OrderHistoryFilters, OrderHistoryList, OrderHistoryEmpty sections) and the Orders backend API. Ensure orders are fetched from /api/orders/my-orders with filter params (status, date range, sort) correctly mapped, pagination works with server-side data, empty state renders when no orders exist, and real order stats (total, delivered, in-progress) replace hardcoded values in OrderHistoryHero.

As a Tech Lead, verify the end-to-end integration between the AdminPanel frontend page and all admin backend APIs. Ensure: product CRUD operations work with Cloudinary image uploads reflected in product list, order status updates via API trigger customer email notifications, analytics charts display real data from /api/admin/analytics/* endpoints, banner uploads appear on Landing page, store settings changes (contact, logo, timings) propagate to frontend display, and custom cake request accept/reject updates are persisted.

As a Tech Lead, verify the end-to-end integration between the Checkout frontend page and the Delivery Management backend API. Ensure delivery charge is fetched from POST /api/delivery/estimate when address is entered, delivery zones are reflected in available options, store pickup option toggles delivery fee to zero, and selected delivery slot is persisted in the order payload. Also confirm that Porter-abstracted DeliveryService interface is correctly invoked and the architecture supports future Porter provider swap without UI changes.

As a Tech Lead, verify the end-to-end integration between the Cart page frontend (CartItems, CartSummary, CartCTA sections) and the Cart backend API. Ensure cart items are loaded from /api/cart, quantity updates are persisted via API, item removal works, promo code validation calls /api/cart/apply-coupon and reflects discount in CartSummary totals, and the checkout CTA correctly passes cart state to Checkout page. Verify cart badge count in Navbar updates in real-time.