A comprehensive multi-tenant e-commerce platform where creators can build their own storefronts, sell digital products, and get paid through Stripe Connect. This platform handles everything from vendor subdomains to automatic platform fees, making it a complete solution for digital marketplaces.

Dabro is a real-world multi-tenant e-commerce application that enables creators to have their own branded storefronts, sell digital products, and manage their business through dedicated dashboards. The platform automatically handles payments, fees, and content delivery while providing a seamless experience for both vendors and customers.

• Complete user registration and login flow
• Session management with HTTP-only cookies
• Input validation with Zod schemas
• Role-based access control foundation
• Secure password hashing via Payload CMS

• Hierarchical category system (parent-child relationships)
• Responsive category navigation that adapts to screen size
• Auto-hiding categories with "View All" functionality
• Dynamic category dropdowns with smart positioning
• Real-time category filtering and search

• Responsive navbar with mobile-first design
• Smart sidebar navigation for mobile devices
• Dynamic category display based on available screen space
• Modern design with TailwindCSS V4 and ShadcnUI
• Comprehensive form handling with React Hook Form

• Full-stack TypeScript with end-to-end type safety
• tRPC for type-safe API calls with automatic validation
• Payload CMS integration for content management
• Comprehensive testing setup (Jest + React Testing Library)
• Server and client component separation

• Route group structure ready for tenant isolation
• Payload CMS collections designed for multi-tenancy
• Scalable architecture supporting unlimited merchants
• Custom subdomain preparation in Next.js config

• Framework: Next.js 15.3.3 with App Router
• Language: TypeScript 5
• Styling: TailwindCSS V4
• UI Components: ShadcnUI + Radix UI
• Icons: Lucide React
• CMS: Payload CMS 3.42
• Database: MongoDB with Mongoose
• API: tRPC + TanStack Query
• Authentication: Payload CMS Auth
• Testing: Jest + React Testing Library
• Code Quality: ESLint + TypeScript

multi-tenant-ecommerce/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── (app)/                    # Main application group
│   │   │   ├── (home)/              # Home pages with navigation
│   │   │   │   ├── _components/     # Home-specific components
│   │   │   │   ├── _hooks/          # Custom hooks
│   │   │   │   ├── _types/          # TypeScript definitions
│   │   │   │   └── layout.tsx       # Home layout with navbar
│   │   │   ├── (auth)/              # Authentication pages
│   │   │   │   ├── sign-in/         # Login page
│   │   │   │   └── sign-up/         # Registration page
│   │   │   └── layout.tsx           # App layout
│   │   ├── (payload)/               # Payload CMS admin
│   │   │   └── admin/               # CMS admin interface
│   │   └── api/                     # API routes
│   │       └── trpc/                # tRPC endpoint
│   ├── collections/                 # Payload CMS collections
│   │   ├── Users.ts                 # User collection
│   │   ├── Categories.ts            # Category collection
│   │   └── Media.ts                 # Media collection
│   ├── modules/                     # Feature modules
│   │   ├── auth/                    # Authentication module
│   │   │   ├── schema.ts            # Zod validation schemas
│   │   │   └── server/              # Server-side procedures
│   │   └── categories/              # Categories module
│   │       └── server/              # Category procedures
│   ├── lib/                         # Utility libraries
│   │   ├── trpc/                    # tRPC configuration
│   │   │   ├── client.tsx           # Client-side setup
│   │   │   ├── server.tsx           # Server-side setup
│   │   │   ├── init.ts              # tRPC initialization
│   │   │   └── routers/             # API routers
│   │   └── utils.ts                 # Utility functions
│   ├── components/                  # Reusable components
│   │   └── ui/                      # ShadcnUI components
│   └── __tests__/                   # Test files
├── public/                          # Static assets
└── package.json                     # Dependencies and scripts

• Node.js 18+ installed
• MongoDB database (local or cloud)
• npm, yarn, pnpm, or bun package manager

1. Clone the repository

   git clone <repository-url>
   cd multi-tenant-ecommerce

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Environment variables Create a .env file in the root directory:

   DATABASE_URI=mongodb://localhost:27017/dabro-ecommerce
   PAYLOAD_SECRET=your-super-secret-key-here

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Access the application

   • Frontend: http://localhost:3000
   • Payload CMS Admin: http://localhost:3000/admin

Comprehensive testing setup with separate configurations for client and server components.

# Run all tests
npm test

# Run client component tests (jsdom environment)
npm run test:client

# Run server component tests (node environment)
npm run test:server

# Run both client and server tests
npm run test:all

# Run tests in watch mode
npm run test:watch

• Component Testing: UI components with user interactions
• Integration Testing: Component communication and data flow
• Server Component Testing: Async components and server logic
• API Testing: tRPC procedures and validation

1. Create tRPC Procedures

   // src/modules/[feature]/server/procedures.ts
   export const featureRouter = createTRPCRouter({
     getData: baseProcedure.query(async ({ ctx }) => {
       return await ctx.payload.find({ collection: "your-collection" });
     }),
   });

2. Add to Main Router

   // src/lib/trpc/routers/_app.ts
   export const appRouter = createTRPCRouter({
     feature: featureRouter,
   });

3. Use in Components

   const { data } = useQuery(trpc.feature.getData.queryOptions());

• TypeScript: Strict mode enabled with comprehensive type checking
• ESLint: Enforced code style and best practices
• Testing: All features must have corresponding tests
• Documentation: Code comments for complex logic

• Product catalog management
• Shopping cart functionality
• Inventory management
• Order processing system

• Stripe Connect integration
• Multi-vendor payment splitting
• Platform fee collection
• Payout management

• Subdomain routing system
• Tenant-specific branding
• Custom domain support
• Tenant isolation

• File delivery system for digital products
• Review and rating system
• Advanced analytics dashboard
• Email notification system

• Comprehensive admin dashboard
• Merchant onboarding flow
• Revenue sharing configuration
• Performance monitoring

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Run tests (npm test)
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

• Follow TypeScript best practices
• Write tests for new features
• Update documentation for significant changes
• Use conventional commit messages
• Ensure all tests pass before submitting PR

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js for the amazing React framework
• Payload CMS for the powerful headless CMS
• tRPC for end-to-end type safety
• TailwindCSS for utility-first CSS
• ShadcnUI for beautiful UI components
• TanStack Query for data fetching

Current Status: 🏗️ Active Development - Core features implemented, moving toward full e-commerce functionality.

Latest Update: Authentication system, smart category navigation, and comprehensive testing framework completed.

For questions or support, please open an issue or start a discussion in the repository.