webmasterdevlin/module-federation-demo

🚀 Module Federation Demo - React 18 Streaming with Best Practices

A comprehensive implementation of Module Federation using React 18 Suspense Streaming, TypeScript, Rspack, and modern web development best practices. Features real-time streaming components with enhanced UX and visual indicators for conference demonstrations.

📢 Latest Update: Enhanced with React 18 Suspense streaming components and improved flat design with better color contrast for optimal user experience!

🏗️ Architecture Overview

This project demonstrates a micro-frontend architecture with React 18 Suspense streaming for enhanced user experience:

• Shell Application (localhost:3000) - Main orchestrator with streaming indicators
• Products Module (localhost:3001) - Product catalog with streaming delays (Blue theme)
• Cart Module (localhost:3002) - Shopping cart with real-time updates (Green theme)
• Dashboard Module (localhost:3003) - User analytics with streaming data (Violet theme)

🎨 Visual Design Features

• Flat Design: Clean, modern interface with improved color contrast
• Streaming Indicators: Clear visual feedback showing which service is streaming
• Theme Consistency: Color-coded modules for easy identification during demos
• Enhanced UX: Better accessibility and reduced cognitive load
• Conference Ready: Optimized for live demonstrations and presentations

✨ Best Practices Implemented

🔧 React Best Practices

• React 18 Suspense: Advanced streaming with skeleton loading states
• Hooks Optimization: useCallback, useMemo, memo for performance
• Component Architecture: Memoized, reusable components with proper separation
• Error Boundaries: Comprehensive error handling for module federation
• Accessibility: ARIA labels, semantic HTML, proper focus management
• Event Handling: Custom events for inter-module communication
• State Management: Efficient local state with proper TypeScript typing
• Streaming Components: Real-time data loading with visual feedback

📘 TypeScript Excellence

• Strict Configuration: Enhanced tsconfig.json with strict rules
• Type Safety: Comprehensive interfaces and readonly properties
• Path Mapping: Clean import paths with alias configuration
• Union Types: Proper enum-like types for better type safety
• Generic Components: Flexible, reusable component typing
• Event Types: Custom event interfaces for type-safe communication

⚡ Rspack Optimization

• Development Experience: Hot reloading, source maps, error overlays
• Production Optimization: Code splitting, tree shaking, minification
• Caching Strategy: Filesystem caching for faster rebuilds
• Bundle Analysis: Performance hints and size optimization
• Module Federation: Optimized sharing and loading strategies

🎨 UI/UX Enhancements

• Flat Design: Modern clean interface with improved color contrast
• Responsive Design: Mobile-first approach with Tailwind CSS
• Streaming States: Real-time skeleton screens and loading indicators
• Visual Feedback: Clear service identification and streaming status
• Micro-interactions: Hover effects, transitions, and animations
• Error States: User-friendly error messages and fallbacks
• Progressive Enhancement: Graceful degradation for failed modules
• Conference Demo Ready: Enhanced visibility for live presentations

🚀 Quick Start

Prerequisites

• Node.js 20+ (required for Tailwind CSS v4)
• npm or yarn
• Modern browser (Safari 16.4+, Chrome 111+, Firefox 128+)

Installation & Development

# Install dependencies
npm install

# Start all applications concurrently
npm run dev

# Access the applications
# Shell: http://localhost:3000
# Products: http://localhost:3001
# Cart: http://localhost:3002
# Dashboard: http://localhost:3003

Individual Package Development

# Products module
cd packages/products && npm run dev

# Cart module
cd packages/cart && npm run dev

# Dashboard module
cd packages/dashboard && npm run dev

# Shell application
cd packages/shell && npm run dev

📁 Project Structure

module-federation-demo/
├── packages/
│   ├── shell/                 # Main orchestrator app
│   │   ├── src/
│   │   │   ├── components/    # Reusable UI components
│   │   │   │   ├── ErrorBoundary.tsx
│   │   │   │   ├── LoadingSpinner.tsx
│   │   │   │   └── ModuleFallback.tsx
│   │   │   ├── lib/           # Utility functions
│   │   │   ├── App.tsx        # Main app component
│   │   │   └── bootstrap.tsx  # Module federation bootstrap
│   │   ├── rspack.config.js   # Enhanced Rspack configuration
│   │   └── tsconfig.json      # Strict TypeScript config
│   ├── products/              # Product catalog module (Blue theme)
│   │   ├── src/
│   │   │   ├── ProductsCatalog.tsx     # Main product component
│   │   │   ├── StreamingProductsCatalog.tsx  # Streaming version with delays
│   │   │   ├── types.ts                # TypeScript definitions
│   │   │   └── lib/                    # Shared utilities
│   │   └── rspack.config.js            # Module federation config
│   ├── cart/                  # Shopping cart module (Green theme)
│   │   ├── src/
│   │   │   ├── ShoppingCart.tsx        # Cart management
│   │   │   ├── StreamingShoppingCart.tsx # Streaming version with updates
│   │   │   └── types.ts                # Cart-specific types
│   │   └── rspack.config.js
│   └── dashboard/             # User dashboard module (Violet theme)
│       ├── src/
│       │   ├── UserDashboard.tsx       # Analytics dashboard
│       │   ├── StreamingUserDashboard.tsx # Streaming version with data
│       │   └── types.ts                # Dashboard types
│       └── rspack.config.js
├── package.json               # Root package with scripts
└── README.md                  # This file

🔄 Module Communication

Event-Driven Architecture

// Adding items to cart (Products → Cart)
window.dispatchEvent(
  new CustomEvent("addToCart", {
    detail: cartItem,
    bubbles: true,
  })
);

// User notifications (Global)
window.dispatchEvent(
  new CustomEvent("showNotification", {
    detail: {
      type: "success",
      message: "Item added to cart!",
    },
  })
);

Type-Safe Communication

// Custom event interfaces
export interface AddToCartEvent extends CustomEvent {
  detail: CartItem;
}

export interface NotificationEvent extends CustomEvent {
  detail: {
    type: "success" | "error" | "info" | "warning";
    message: string;
  };
}

declare global {
  interface WindowEventMap {
    addToCart: AddToCartEvent;
    showNotification: NotificationEvent;
  }
}

🛠️ Technology Stack

Technology	Version	Purpose
React	^18.3.1	UI library with modern hooks
TypeScript	^5.6.2	Type-safe development
Rspack	^0.7.5	Fast bundler with Module Federation
Tailwind CSS	^4.0.0	Modern utility-first styling
PostCSS	^8.4.0	CSS processing
Module Federation	Enhanced	Micro-frontend architecture

🎯 Key Features

Performance Optimizations

• ⚡ Code Splitting: Automatic chunk splitting for optimal loading
• 🔄 Lazy Loading: Components loaded on demand
• 💾 Caching: Filesystem caching for faster rebuilds
• 📦 Tree Shaking: Dead code elimination
• 🎛️ Bundle Analysis: Size optimization and performance hints

Developer Experience

• 🔥 Hot Module Replacement: Instant updates during development
• 🐛 Source Maps: Enhanced debugging capabilities
• 📝 TypeScript Integration: Full type checking and IntelliSense
• 🎨 Tailwind Integration: v4 with CSS-based configuration and modern features
• 📊 Error Overlays: Clear error messages in development

Production Ready

• 🔒 Error Boundaries: Graceful error handling
• 📱 Responsive Design: Mobile-first approach
• ♿ Accessibility: WCAG compliance with ARIA support
• 🌐 Cross-Origin: Proper CORS configuration
• 📈 Performance Monitoring: Bundle size tracking

🧪 Testing Strategy

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

📈 Performance Metrics

• Initial Load: < 100kb gzipped
• Module Load: < 50kb per module
• Hot Reload: < 200ms
• Build Time: < 30s for full rebuild

🚀 Deployment

Development

npm run dev

Production Build

npm run build

Production Preview

npm run preview

🤝 Contributing

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

📝 Best Practices Checklist

✅ React

• Functional components with hooks
• Memoization with React.memo, useMemo, useCallback
• Proper dependency arrays in hooks
• Error boundaries for graceful failures
• Accessibility with ARIA labels
• Semantic HTML structure

✅ TypeScript

• Strict mode enabled
• Readonly properties where applicable
• Union types for better type safety
• Generic components and functions
• Proper event typing
• Path mapping for clean imports

✅ Rspack

• Code splitting and lazy loading
• Tree shaking enabled
• Development optimizations
• Production optimizations
• Proper caching strategy
• Bundle size optimization

✅ Performance

• Component memoization
• Bundle size monitoring
• Lazy loading of modules
• Efficient re-rendering
• Optimized asset loading
• Proper caching headers

📚 Learning Resources

• Module Federation Documentation
• React 18 Documentation
• TypeScript Handbook
• Rspack Documentation
• Tailwind CSS Guide

📄 License

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

---

Built with ❤️ using modern web technologies and best practices