DTX Portal — Frontend Overview
The DTX Portal is the primary web interface for the Daitics AI CDP platform. It is a React 19 single-page application built with TypeScript, Tailwind CSS 4, and Vite 7, organized as a pnpm monorepo.
Tech Stack at a Glance
| Layer | Technology | Version |
|---|---|---|
| Framework | React | 19.1.1 |
| Language | TypeScript | 5.7.3 |
| Build Tool | Vite | 7.1.10 |
| Styling | Tailwind CSS | 4.1.13 |
| State (Client) | Zustand | 5.0.8 |
| State (Server) | TanStack React Query | 5.90.5 |
| Routing | React Router | 7.9.1 |
| Forms | React Hook Form + Zod | 7.65 / 3.24 |
| Visual Designers | XYFlow (React Flow) | 12.8.5 |
| Code Editor | Monaco Editor | 0.54.0 |
| Charts | Recharts | 3.3.0 |
| Icons | Untitled UI Icons | 0.0.19 |
| UI Primitives | React Aria Components | 1.13.0 |
| Auth | Keycloak JS | 26.1.0 |
| Animations | Motion (Framer Motion) | 12.23.24 |
| Package Manager | pnpm | 10.16.1 |
| Testing | Vitest + Testing Library | 3.2.4 |
Monorepo Structure
| Workspace | Package Name | Purpose |
|---|---|---|
apps/portal | portal | Main SPA — pages, routes, services, stores |
packages/ui | @dtx/ui | Reusable component library (buttons, tables, modals, charts) |
packages/utils | @dtx/utils | Shared utilities (cx(), formatBytes(), debounce(), throttle()) |
Application Bootstrap
The app initializes through a provider stack in App.tsx:
// apps/portal/src/App.tsx
<QueryClientProvider client={queryClient}>
<AuthProvider>
<ConfirmProvider>
<RouterProvider router={router} />
</ConfirmProvider>
</AuthProvider>
</QueryClientProvider>
Key Capabilities
| Module | What it Does |
|---|---|
| Pipeline Designer | Full-screen visual DAG builder using XYFlow with drag-and-drop operators, auto-layout, SQL/expression logic editor, and multi-stage configuration |
| Workflow Designer | Visual approval workflow builder with 11 node types (approval, condition, parallel split/join, timer, script, etc.) |
| Connector Designer | Source/sink connector configuration with visual canvas |
| Schema Registry | Schema CRUD with versioning, field management, and PII tagging |
| Synthetic Data | Data generator wizard with field mapping, destination config (Kafka, Postgres, Dragonfly, File), and live metrics |
| Access Management | User, role, group, and permission management with Keycloak integration |
| Kafka Management | Topic browsing, creation, message inspection, consumer group monitoring |
| Cache Management | Redis/Dragonfly key browser with namespace filtering, TTL management |
| Observability | Real-time dashboard with metrics, health checks, alerts, log distribution, and WebSocket streaming |
Quick Start
# Prerequisites: Node.js 22+, pnpm 10.16+
pnpm install # Install all workspace dependencies
pnpm dev # Start dev server on http://localhost:3000
pnpm build # TypeScript check + production build
pnpm lint # Run ESLint
pnpm test # Run Vitest