quaex

Architecture Deep Dive

Philosophy

The interface borrows the composable mindset from Supabase: the shell, navigation and routing are data-driven so teams can ship new modules without touching layout code. Integrators edit configuration files instead of JSX.

Key building blocks

Platform blueprint

• File: src/app/config/platformBlueprint.tsx
• Defines public routes, workspaces, modules, quick actions and support links.
• Each module references lazily loaded pages through the loadPage helper.
• secureRoutes and routeCatalog are derived exports used by the router and command palette.

Workspace context

• File: src/contexts/WorkspaceContext.tsx
• Persists the selected workspace in localStorage and exposes helpers via useWorkspace().
• Keeps the experience consistent with Supabase’s project selector.

Shell & navigation

• Files: src/components/Layout.tsx, src/components/AppSidebar.tsx
• Both components render straight from the blueprint, so changing workspace metadata immediately updates the UI.
• Sidebar includes workspace metrics, quick actions, module collapsibles and support links.
• Layout header surfaces the workspace switcher, command palette trigger and featured actions.

Command palette & switcher

• Files: src/components/navigation/GlobalCommandMenu.tsx, src/components/navigation/WorkspaceSwitcher.tsx
• Provide platform-wide navigation with ⌘/Ctrl + K and quick access to all workspaces.
• Both consume the blueprint, so new modules become discoverable automatically.

Routing & providers

• Router (src/app/router/AppRouter.tsx) assembles routes by combining platformBlueprint.publicRoutes, secureRoutes and notFoundRoute.
• Providers (src/app/providers/AppProviders.tsx) wrap the app with React Query, tooltips, authentication and workspace context.

Data flow

1. Blueprint declares modules and routes.
2. secureRoutes derives authenticated routes with workspace metadata.
3. Router renders those routes and applies the shell layout for protected views.
4. Shell components and navigation primitives read from the blueprint and workspace context.
5. Integrators adjust the blueprint to evolve UX without code rewrites.

Data engines & tables

• src/components/data/SmartDataTable.tsx virtualises table rows, supports density controls and exports data as CSV.
• Every engine page (workflow, policies, forecasting, analytics, security, integration, compliance) relies on the shared data table to keep interactions responsive even with millions of records.
• File uploads and form schemas are handled with react-hook-form + zod, keeping validation declarative and secure.