EDA Warehouse Dashboard

Modern Event-Driven Architecture demo with React + TypeScript. Real-time warehouse management with sophisticated event processing.

✨ Features

• Complete EDA Implementation - Event sourcing, aggregation, DLQ, replay
• Real-time Widgets - Orders, inventory, deliveries, analytics
• Advanced Event Bus - Interceptors, filters, retry logic, metrics
• Debug Tools - Event store viewer, DLQ manager, config panel

🚀 Quick Start

npm install && npm run dev

Debug Tools (floating buttons):

• 📚 Event Store (blue) - Browse/replay events
• ⚠️ Dead Letter Queue (red) - Failed events
• ⚙️ Config Panel (purple) - Event filters

🏗️ Architecture

Core Services:

• AdvancedEventBus - Central hub with priorities & retry
• EventStore - Event sourcing with replay
• EventAggregator - Complex workflows
• DeadLetterQueue - Failed event handling
• EnhancedMockWebSocket - Event simulation

Widgets:

• NewOrdersWidget - Order tracking
• SimpleInventoryAlertsWidget - Stock alerts
• SimpleDeliveryStatusWidget - Shipment status
• SimpleAnalyticsSummaryWidget - Business metrics
• SimpleNotificationsWidget - System alerts
• SimpleMetricsWidget - Technical stats

💻 Usage

Listen for events:

import { eventBusInstance } from './utils/eventBusInstance';

useEffect(() => {
  const handleOrder = (order) => setOrders(prev => [order, ...prev]);
  eventBusInstance.on('order:created', handleOrder);
  return () => eventBusInstance.off('order:created', handleOrder);
}, []);

Emit events:

const selectOrder = (order) => {
  eventBusInstance.emit('order:selected', order);
};

Event aggregation:

eventBusInstance.eventAggregator.define(
  'order_fulfillment',
  ['order:created', 'inventory:reserved', 'payment:processed'],
  (events) => eventBusInstance.emit('order:ready_for_fulfillment', {
    orderId: events[0].data.id,
    aggregatedEvents: events.length
  }),
  { timeout: 10000 }
);

� Commands

npm run dev     # Development server
npm run build   # Production build
npm run lint    # ESLint check
npm run preview # Preview build

🐛 Debug

Console commands:

eventBusInstance.getMetrics()                    // System metrics
eventBusInstance.getStoredEvents().slice(-10)    // Recent events  
eventBusInstance.deadLetterQueue.getFailedEvents() // Failed events

📚 Docs

• CONTRIBUTING.md - Development guide
• EVENT_MAPPING.md - Event reference

�️ Tech Stack

React 19 • TypeScript 5.8 • Vite 7 • TailwindCSS 4 • Lucide React

---

Learn: Event-driven architecture • React patterns • TypeScript • Real-time systems