A modern micro-frontend architecture separating customer and admin interfaces for optimal performance, security, and development efficiency.

grooso-platform/
├── customer-app/          # Customer shopping interface (Port 3001)
├── admin-dashboard/       # Admin management interface (Port 3002)
└── package.json          # Root workspace configuration

# Install all dependencies
npm run install:all

# Start customer app (Port 3001)
npm run dev:customer

# Start admin dashboard (Port 3002) 
npm run dev:admin

# Or start both simultaneously
npm run start:all

# Customer App
cd customer-app
npm install
npm run dev  # http://localhost:3001

# Admin Dashboard  
cd admin-dashboard
npm install
npm run dev  # http://localhost:3002

• Purpose: Customer shopping experience
• Features: Product browsing, cart, orders, profile management
• Design: Emerald green theme, customer-focused UI
• Users: End customers
• Login: customer@grooso.com / password

• Purpose: Business management interface
• Features: Order management, vendor management, analytics
• Design: Blue theme, professional admin interface
• Users: Admin staff only
• Login: admin@grooso.com / password

• Primary: Emerald (#10b981)
• Focus: Shopping experience, product discovery
• Components: Product cards, cart sidebar, customer layouts

• Primary: Blue (#3b82f6)
• Focus: Data management, business operations
• Components: Data tables, statistics, management tools

• Frontend: React 18, Vite, Tailwind CSS
• Icons: Lucide React
• Routing: React Router DOM
• State: React Hooks + Local Storage

# Build customer app
npm run build:customer
# Output: customer-app/dist/

# Build admin dashboard
npm run build:admin  
# Output: admin-dashboard/dist/

# Build both
npm run build:all

Production URLs:
├── customer.grooso.com    → Customer App
├── admin.grooso.com       → Admin Dashboard  
└── api.grooso.com         → Backend API

• 70% smaller bundles - Each app loads only necessary code
• Faster loading - Optimized for specific user types
• Better caching - Independent deployment strategies

• Complete isolation - Customers never download admin code
• Role-based access - Admin features completely separated
• Separate domains - Enhanced security boundaries

• Team independence - Frontend teams work separately
• Focused codebases - Easier maintenance and debugging
• Independent deployment - Deploy features without conflicts

# Customer app tests
cd customer-app && npm test

# Admin dashboard tests  
cd admin-dashboard && npm test

Both apps use mock authentication with localStorage. In production, integrate with your backend API:

// Replace mock API calls in src/services/api.js
export const authApi = {
  login: (credentials) => fetch('/api/auth/login', {
    method: 'POST',
    body: JSON.stringify(credentials)
  })
};

• Product browsing with advanced filters
• Shopping cart with real-time updates
• Order tracking and history
• User profile management
• Responsive mobile design
• Wishlist functionality

• Comprehensive order management
• Vendor management system
• Real-time business analytics
• Delivery partner assignment
• WhatsApp integration ready
• Role-based access control

1. Choose appropriate app directory
2. Follow existing code patterns
3. Maintain design consistency
4. Test both apps for shared changes

• Customer Issues: Shopping experience, UI/UX
• Admin Issues: Management features, data handling
• General: Architecture, deployment, integration

Grooso Platform - Separated for scale, optimized for success! 🚀