Mandola - Premium Ethnic Fashion Marketplace

Mandola is a high-end, scalable multi-vendor Indian ethnic fashion marketplace application built using React 18, TypeScript, React Router v7, and Tailwind CSS.

---

🚀 Key Features

• Storefront & Public Navigation: Interactive home page, product catalog with dynamic filter drawers, category browsing, product detail view, cart & wishlist side panels, and account dropdown.
• Customer Portal (/dashboard/*): Overview, Profile management, Order history, Detailed order tracking timeline, Wishlist, Saved addresses, Review manager, and Invoices.
• Seller Portal (/seller/*): Overview with revenue charts, Product inventory & stock editor, Add/edit product wizard, Fulfillment & shipment tracking, Settlement statements, and Store settings.
• Admin Portal (/admin/*): Executive platform overview, User management (Block/Unblock), Seller approvals & suspensions, Product catalog audit, Platform financials, Settlement processor, Commission wallet, and System configuration.
• Role-Based Protection: ProtectedRoute guard enforcing role mappings:
  • Role 1 → Admin (/admin/*)
  • Role 2 → Seller (/seller/*)
  • Role 3 → Customer (/dashboard/*)

---

🛠️ Architecture & Project Structure

src/
├── assets/         # Static images and brand assets
├── components/     # UI Components
│   ├── common/     # Shared components (Header, Footer, ProductCard, MobileBottomNav)
│   ├── home/       # Home page sections (Hero, Featured, Categories, Banner, Trust)
│   ├── panels/     # Drawer & Modal overlays (CartPanel, WishlistPanel, AccountDropdown)
│   └── ui/         # Reusable Primitive UI components (shadcn/ui based)
├── constants/      # Static data & domain data definitions
│   ├── adminData.ts
│   ├── auth.constants.ts
│   ├── customerData.ts
│   ├── mockData.ts
│   └── sellerData.ts
├── contexts/       # Global React Contexts
│   ├── AuthContext.tsx  # User session, login/logout, role resolution
│   └── UIContext.tsx    # Cart, Wishlist, Drawers, Modals state
├── hooks/          # Custom Hooks (useAuth, useUI, useMobile)
├── layouts/        # Layout Wrappers with <Outlet />
│   ├── RootLayout.tsx     # Global Context Providers & Root Outlet
│   ├── PublicLayout.tsx   # Header, Footer, Drawers & Public Outlet
│   ├── CustomerLayout.tsx # Customer Dashboard Sidebar & Header Outlet
│   ├── SellerLayout.tsx   # Seller Dashboard Sidebar & Header Outlet
│   └── AdminLayout.tsx    # Admin Master Control Sidebar & Header Outlet
├── pages/          # Standalone Route Pages
│   ├── admin/      # 19 Admin Pages
│   ├── customer/   # 11 Customer Pages
│   ├── public/     # 4 Public Storefront Pages
│   └── seller/     # 13 Seller Pages
├── routes/         # React Router v7 Configuration
│   ├── ProtectedRoute.tsx  # Role-Based Route Guard
│   ├── public.routes.tsx
│   ├── customer.routes.tsx
│   ├── seller.routes.tsx
│   ├── admin.routes.tsx
│   └── AppRouter.tsx       # Central Router Definition
├── services/       # API Clients (Axios client stub)
├── styles/         # Global Styles & Tailwind Config
├── types/          # Domain TypeScript Types (auth, product, customer, seller, admin)
└── utils/          # Helper Functions (cn.ts)

---

🛠️ Getting Started

Prerequisites

• Node.js >= 18.x
• npm >= 9.x

Installation

# Clone the repository
git clone https://github.com/your-org/mandola.git

# Install dependencies
npm install

# Start local dev server
npm run dev

---

📜 Documentation

• ROUTES.md - Detailed route mapping and access controls.
• ARCHITECTURE.md - Architectural design principles, data flow, and context providers.