Frontend Stack
The MATIH Platform frontend consists of eight purpose-built workbench applications, each designed for a specific persona. All workbenches share a common technology stack and component library, ensuring consistency across the platform while allowing each workbench to optimize for its target workflow.
Core Technologies
| Technology | Version | Purpose |
|---|---|---|
| React | 18 | Component framework |
| TypeScript | 5.x | Type-safe development |
| Vite | 5.x | Build tool and dev server |
| TailwindCSS | 3.x | Utility-first CSS framework |
| Zustand | Latest | Lightweight state management |
| React Query (TanStack) | Latest | Server state management and caching |
| React Router | 6.x | Client-side routing |
| Recharts / D3.js | Latest | Data visualization |
Workbench Applications
| Workbench | Port | Primary Persona | Key Features |
|---|---|---|---|
| BI Workbench | 3000 | BI Developer | Dashboard builder, chart editor, semantic model viewer |
| ML Workbench | 3001 | ML Engineer | Experiment explorer, model registry, notebook interface |
| Data Workbench | 3002 | Data Engineer | Pipeline editor, data quality dashboard, catalog browser |
| Agentic Workbench | 3003 | Agentic User | Conversational AI interface, result explorer |
| Control Plane UI | 3004 | Platform Admin | Tenant management, user management, configuration |
| Data Plane UI | 3005 | Platform Admin | Service health, resource monitoring, data plane config |
| Ops Workbench | -- | Operations | Infrastructure monitoring, alert management |
| Onboarding UI | -- | New Users | Guided onboarding, setup wizard |
Shared Libraries
The commons-typescript library provides shared functionality across all workbenches:
| Module | Purpose |
|---|---|
| API Client | Type-safe HTTP client with JWT handling and retry logic |
| Auth hooks | useAuth, useCurrentUser, useTenant React hooks |
| WebSocket client | Real-time streaming for AI responses and live updates |
| Shared components | Common UI components (navigation, forms, tables, modals) |
| Theme provider | Consistent theming across all workbenches |
| Error boundary | Global error handling and user-friendly error display |
Authentication Flow
All workbenches follow the same authentication pattern:
1. User opens workbench URL
2. App checks for stored JWT in localStorage
3. If no token or token expired:
Redirect to login page
4. Login page sends POST /api/v1/auth/login
5. Receive accessToken + refreshToken
6. Store tokens, set Authorization header
7. API Client attaches token to every request
8. On 401 response: attempt token refresh
9. On refresh failure: redirect to loginState Management
| Concern | Technology | Pattern |
|---|---|---|
| Server state | React Query | Cache server responses, automatic refetch |
| Client state | Zustand | Lightweight stores for UI state |
| Form state | React Hook Form | Performant form handling with validation |
| URL state | React Router | Route parameters for shareable URLs |
Build and Development
| Aspect | Approach |
|---|---|
| Dev server | Vite dev server with hot module replacement |
| Build output | Static assets (HTML, JS, CSS) |
| Deployment | Nginx container serving static files |
| Environment config | Runtime config via window.__RUNTIME_CONFIG__ |
| API proxy | Vite proxy in dev, NGINX proxy in production |
Visualization Libraries
| Library | Used For |
|---|---|
| Recharts | Standard charts (bar, line, pie, area) |
| D3.js | Custom visualizations and complex data graphics |
| React Table (TanStack) | Data tables with sorting, filtering, pagination |
| Leaflet | Geographic map visualizations |
Related Pages
- Backend Stack -- Backend technologies
- BI Developer Persona -- Dashboard building workflow
- Agentic User Persona -- Conversational interface