misty-ecommerce

As a buyer, I want to use the Catalog page so that I can search and filter products by category, fabric type, price, size, color, and ratings and navigate to product detail pages. Implement based on the existing JSX design (Catalog v2): NavBar, BreadcrumbResultsBar, FilterSidebar with accordion filters, ActiveFiltersToolbar with dismissible chips, FabricSwatchFilterStrip (signature design concept), ProductGrid with hover Add-to-Cart, PaginationBar, RecentlyViewed strip, and Footer. Connects from Landing/Login/Signup and leads to Product detail page.

As a buyer, I want to use the Orders page so that I can track my current orders and view my full order history with statuses and details. Implement based on the existing JSX design (Orders v2): order list with status badges (Pending, Shipped, Delivered, Cancelled), order detail expandable rows, tracking timeline, filter by status/date, and re-order action. Connects from Checkout confirmation and is accessible from buyer account navigation.

As a buyer, I want to use the Product detail page so that I can view full product information, select size and color variants, read reviews, and add the item to my cart. Implement based on the existing JSX design (Product v2): product image gallery, variant selectors (size/color), seller info, star ratings and reviews section, Add to Cart and Wishlist CTAs, related products carousel. Connects from Catalog and leads to Cart.

As a user, I want to use the backend products API so that I can browse, search, and filter products, and sellers can create and manage their listings. Implement GET /api/products (with query params: category, fabric, price range, size, color, ratings, sort, pagination), GET /api/products/:id, POST /api/products (seller only), PUT /api/products/:id (seller only), DELETE /api/products/:id (seller only). Include Mongoose schemas for Product with variants (size/color), fabric type, images array, sellerId reference, stock count, and ratings aggregate.

As a buyer, I want to use the Cart page so that I can review my selected items, update quantities, remove products, see the order subtotal, and proceed to checkout. Implement based on the existing JSX design (Cart v2): cart item list with product thumbnails, quantity stepper, price summary panel, discount/coupon code input, seller grouping for multi-vendor cart, and Proceed to Checkout CTA. Connects from Product detail and leads to Checkout.

As a buyer or seller, I want to use the Landing page so that I can browse interactive fabric swatches, discover the platform, and navigate to Sign In or Sign Up. Implement based on the existing JSX design (Landing v2): NavBar with logo and CTAs, HeroSection with animated fabric swatch grid, FabricSwatchShowcase with ripple interactions, FeaturedProductsCarousel, CategoryBrowseGrid, HowItWorks, SellerValueProposition, TrustAndSocialProof, NewsletterSignup, and Footer. Connects to Login and Signup pages per the buyer and seller flows.

As a buyer or seller, I want to use the Signup page so that I can create a new account and choose my role (buyer or seller). Implement based on the existing JSX design (Signup v2): registration form with name, email, password, role selector (Buyer / Seller), terms acceptance, and redirect to Catalog (buyer) or Seller Dashboard (seller) on success. Connects from Landing page per both buyer and seller flows.

As a seller, I want to use the Seller Dashboard page so that I can view my earnings overview, sales performance charts, recent orders, product listings, and inventory alerts. Implement based on the existing JSX design (Seller Dashboard v2): TopBar with search/notifications, Sidebar navigation (Dashboard, Listings, Orders, Earnings, Inventory, Reviews, Settings), WelcomeBanner, EarningsOverview stat cards, SalesChart area chart with time-range toggle, RecentOrders table, ProductListings grid, InventoryAlerts, QuickActions tiles, and Footer. Connects from Login/Signup (seller role) and links to Listings and Orders pages.

As a seller, I want to use the Listings page so that I can add new products, manage existing listings, update inventory, and toggle product visibility. Implement based on the existing JSX design (Listings v2): product listing management table/grid with status filters (Active, Draft, Out of Stock), Add Product form/modal with image upload, fabric type selector (Signature Design Concept nod), price/variant inputs, Edit and Delete actions per listing, and bulk operations. Connects from Seller Dashboard and links back to it.

As a buyer, seller, or admin, I want to use the Login page so that I can sign in to access my personalized dashboard, catalog, or seller portal. Implement based on the existing JSX design (Login v2): email/password form, role-based redirect logic (buyer → Catalog, seller → Seller Dashboard, admin → Admin Dashboard), social login placeholders, and link to Signup. Connects from Landing and redirects per the user flow diagrams.

As a buyer, I want to use the Checkout page so that I can enter my shipping address, review my order, and complete payment via Stripe or PayPal. Implement based on the existing JSX design (Checkout v2): multi-step flow (Address → Payment → Review & Confirm), Stripe payment element integration placeholder, INR currency support, order summary sidebar, and success/confirmation state. Connects from Cart and leads to Orders tracking page.

As an admin, I want to use the Users management page so that I can manage buyer and seller accounts, resolve disputes, and ban or deactivate accounts. Implement based on the existing JSX design (Users v2): user list table with role badges, search and filter, user detail panel showing order history and account info, account status toggle (Active/Suspended), dispute resolution notes field. Connects from Admin Dashboard.

As an admin, I want to use the Admin Dashboard page so that I can view platform-wide analytics including total sales, active sellers, new registrations, and product counts. Implement based on the existing JSX design (Admin Dashboard v2): analytics KPI cards, sales/revenue charts, top-performing sellers table, recent activity feed, quick navigation to Sellers, Products, and Users management sections.

As a seller, I want to use the backend image upload API so that I can upload product images that are stored on Cloudinary and referenced in my product listings. Implement POST /api/upload (Multer middleware + Cloudinary SDK), returning secure image URLs. Support multiple image uploads per product, file type and size validation (JPEG/PNG, max 5MB), and automatic thumbnail generation via Cloudinary transformations.

As an admin, I want to use the Sellers management page so that I can approve or reject seller registrations, view seller profiles, and manage seller status. Implement based on the existing JSX design (Sellers v2): seller list table with registration status badges (Pending, Approved, Rejected), approve/reject action buttons, seller detail modal with store info and product count, search and filter by status. Connects from Admin Dashboard.

As a buyer, I want to use the backend cart and checkout API so that I can persist my cart, apply discounts, and complete a purchase with Stripe payment processing. Implement GET/POST/PUT/DELETE /api/cart, POST /api/checkout/create-payment-intent (Stripe), POST /api/checkout/confirm, POST /api/orders (on payment success). Include multi-vendor cart grouping by sellerId, INR currency support, 10% platform commission calculation, and order record creation on successful payment.

As a buyer, I want the Catalog page to be wired to the Products API so that I can search, filter, and paginate real products with live results. Connect FilterSidebar, ActiveFiltersToolbar, FabricSwatchFilterStrip, and SortToolbar to GET /api/products query params. Implement React Query for data fetching, loading skeleton states, and URL-synced filter state (query string persistence for shareable filtered URLs).

As a frontend developer, I want to wire the Login and Signup pages to the Auth API so that users can register and log in with JWT token storage, role-based redirects, and protected route guards. Implement Axios auth service, Redux auth slice or React Query mutation, JWT storage in httpOnly cookie or localStorage, ProtectedRoute component for buyer/seller/admin routes, and auto-redirect on token expiry.

As a buyer or seller, I want to use the backend orders API so that buyers can track their orders and sellers can view and update orders for their products. Implement GET /api/orders (buyer: own orders; seller: orders for their products), GET /api/orders/:id, PUT /api/orders/:id/status (seller: update to Shipped/Delivered), GET /api/seller/orders (seller-scoped order list with earnings summary). Include order status enum (Pending, Processing, Shipped, Delivered, Cancelled) and order tracking timestamps.

As a buyer, I want the Cart and Checkout pages to be wired to the Cart and Checkout APIs so that my cart persists across sessions and I can complete a real Stripe payment. Integrate Stripe React SDK (CardElement / PaymentElement) in the Checkout page, connect Cart page to cart CRUD endpoints, handle payment intent creation and confirmation, redirect to Orders page on success with order confirmation data.

As a seller, I want to use the backend earnings API so that I can view my total earnings, monthly breakdown, pending payouts, and request a payout. Implement GET /api/seller/earnings (total, monthly, pending), GET /api/seller/earnings/chart (time-series data for SalesChart), POST /api/seller/payouts/request. Include 10% commission deduction logic, payout status tracking (Requested, Processing, Paid), and earnings aggregation by date range.

As an admin, I want to use the backend admin API so that I can approve or reject sellers, moderate product listings and reviews, manage user accounts, and view platform-wide analytics. Implement GET/PUT /api/admin/sellers (approve/reject), GET/DELETE /api/admin/products (moderate listings), GET/PUT/DELETE /api/admin/users (manage accounts, resolve disputes), GET /api/admin/analytics (total sales, vendor performance, user counts). All routes protected by isAdmin middleware.

As a buyer, I want to use the backend reviews API so that I can submit star ratings and written reviews for products I have purchased. Implement POST /api/products/:id/reviews, GET /api/products/:id/reviews (paginated), DELETE /api/reviews/:id (admin or review owner). Include validation that a buyer can only review a product they have ordered, average rating recalculation on the Product document, and review moderation flags for admin.

As an admin, I want the Admin Dashboard, Sellers, and Users pages to be wired to the admin APIs so that I can take real actions on seller approvals, product moderation, and user management with live analytics. Connect Admin Dashboard KPI cards and charts to /api/admin/analytics, Sellers page approve/reject to /api/admin/sellers, Users page account management to /api/admin/users, and product moderation to /api/admin/products.

As a seller, I want the Seller Dashboard, Listings, and Orders pages to be wired to the backend APIs so that I can see real earnings data, manage live product listings, and track actual orders. Connect EarningsOverview and SalesChart to /api/seller/earnings/chart, RecentOrders table to /api/seller/orders, ProductListings grid to /api/products (seller-scoped), and Listings page CRUD to /api/products with image upload via /api/upload.