Technology Stack

The MATIH frontend is built on a modern TypeScript-first stack optimized for large-scale enterprise applications with multiple independent workbench applications sharing a common foundation.

Core Technologies

Technology	Version	Purpose
React	18+	UI component library with Concurrent Mode
TypeScript	5.x	Static typing across all workbenches
Vite	5.x	Build tool and dev server with HMR
Tailwind CSS	3.x	Utility-first CSS framework
Zustand	4.x	Lightweight state management
Redux Toolkit	2.x	Complex domain state (BI store)
React Router	6.x	Client-side routing
TanStack Query	5.x	Server state management and caching

Visualization and Editor Libraries

Library	Purpose
Vega-Lite	Declarative chart specifications (BI charts)
Recharts	React-native chart components (dashboards)
D3.js	Low-level SVG visualizations (lineage, networks)
React Flow	Node-based graph editors (pipelines, workflows, DNN)
Monaco Editor	Code editing (SQL, Python, YAML, dbt)
Dagre	Directed graph layout algorithms
Framer Motion	Animation library (onboarding, transitions)

Build and Development

Tool	Purpose
Vite	Development server with instant HMR
ESBuild	JavaScript/TypeScript bundling
PostCSS	CSS processing with Tailwind
Vitest	Unit and component testing
Storybook	Component development and documentation
ESLint	Linting with TypeScript rules
Prettier	Code formatting

Project Structure

Each workbench follows a consistent project structure:

{workbench}/
  src/
    App.tsx              # Root application component
    main.tsx             # Vite entry point
    module.tsx           # Module federation export
    index.ts             # Public API exports
    components/          # Workbench-specific components
    hooks/               # Workbench-specific hooks
    store/               # Workbench-level state stores
    services/            # API service layer
    types/               # TypeScript type definitions
    utils/               # Helper utilities
    pages/               # Route-level page components
    __tests__/           # Test files
  public/                # Static assets
  index.html             # HTML entry point
  vite.config.ts         # Vite configuration
  tsconfig.json          # TypeScript configuration
  tailwind.config.js     # Tailwind configuration
  package.json           # Dependencies and scripts

TypeScript Configuration

All workbenches share a base TypeScript configuration with strict mode enabled:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@matih/shared": ["../shared/src"]
    }
  }
}

Tailwind CSS Design System

MATIH uses a custom Tailwind theme with Sanskrit-inspired color naming:

Color Token	Hex	Usage
`jnana` (knowledge)	`#8b5cf6`	Primary accent, links, interactive elements
`spashta` (clarity)	`#06b6d4`	Success states, data visualization
`savadhan` (awareness)	`#f59e0b`	Warnings, attention states
`santulan` (balance)	`#18181b` - `#fafafa`	Neutral scale, backgrounds, text

The design system applies CSS custom properties for runtime theme switching:

:root {
  --font-size-multiplier: 1;
  --density-multiplier: 1;
  --font-scale: 1;
}
 
.dark {
  --bg-primary: #18181b;
  --text-primary: #e4e4e7;
}
 
.light {
  --bg-primary: #ffffff;
  --text-primary: #18181b;
}

Vite Configuration

Each workbench uses Vite with the following shared configuration patterns:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@matih/shared': path.resolve(__dirname, '../shared/src'),
    },
  },
  server: {
    port: 3000, // Varies per workbench
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true,
      },
    },
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          charts: ['recharts', 'vega-lite', 'vega'],
          editor: ['@monaco-editor/react'],
        },
      },
    },
  },
});

Module Federation

The Data Plane UI acts as a host shell that dynamically loads workbench modules. Each workbench exports a module.tsx entry point that can be consumed by the unified shell:

// bi-workbench/src/module.tsx
export { default as BiWorkbench } from './App';
export { BiWorkbenchRoutes } from './routes';
export type { BiWorkbenchConfig } from './types';

This architecture enables independent deployment of workbenches while maintaining a unified user experience through the Data Plane UI shell.

Overview Shared Component Library