Micro-Frontend Dashboard Architecture

Overview

This project pioneered a modular dashboard system using cutting-edge micro-frontend architecture at Mackenzie University. The goal was to revolutionize development workflows by enabling independent teams to build, test, and deploy frontend modules without affecting other parts of the system.

The Challenge

Traditional monolithic frontends create bottlenecks:

• Teams blocked waiting for other features to be completed
• Single deployment pipeline for the entire application
• Technology lock-in preventing adoption of better tools
• Testing complexity growing exponentially with codebase size

Architecture Design

The solution leveraged Webpack Module Federation to create a shell application that dynamically loads independent micro-frontends at runtime.

// webpack.config.js - Shell Application
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        analytics: 'analytics@http://localhost:3001/remoteEntry.js',
        userManagement: 'userManagement@http://localhost:3002/remoteEntry.js',
        reports: 'reports@http://localhost:3003/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Key Components

1. Shell Application (React) - Handles routing, authentication, and layout
2. Analytics Module (Vue.js) - Real-time data visualization dashboards
3. User Management (Angular) - Admin panel for user CRUD operations
4. Reports Module (React) - PDF generation and export functionality

Backend Integration

Built a lightweight Node.js API gateway to handle:

• Service discovery for micro-frontends
• Shared authentication tokens
• Cross-module communication via event bus

// Event bus for cross-module communication
interface ModuleEvent {
  type: string;
  payload: unknown;
  source: string;
}
 
class EventBus {
  private subscribers: Map<string, Set<(event: ModuleEvent) => void>>;
 
  subscribe(eventType: string, callback: (event: ModuleEvent) => void) {
    if (!this.subscribers.has(eventType)) {
      this.subscribers.set(eventType, new Set());
    }
    this.subscribers.get(eventType)!.add(callback);
  }
 
  publish(event: ModuleEvent) {
    this.subscribers.get(event.type)?.forEach(cb => cb(event));
  }
}

Results

• 30% reduction in development time through parallel team workflows
• Independent deployments - each module deploys on its own schedule
• Technology flexibility - teams choose the best framework for their needs
• Improved stability - isolated failures don't crash the entire application

Lessons Learned

Micro-frontends add complexity. They're worth it when you have:

• Multiple teams working on the same product
• Features with different release cadences
• Legacy code that needs gradual modernization

For smaller teams, a well-structured monolith is often the better choice.