The Certimate frontend is a modern Single Page Application (SPA) built with React 18 and TypeScript. It provides a visual interface for managing the entire certificate lifecycle, from credential storage to automated workflow design and monitoring.
The application is served by the Go backend as an embedded static asset, communicating with the server primarily through a custom REST API and the PocketBase SDK ui/package.json56 During development, Vite proxies API requests to the backend ui/vite.config.ts87-91
| Category | Technology | Files |
|---|---|---|
| Framework | React 18 | ui/src/App.tsx58 ui/package.json58 |
| Build Tool | Vite | ui/vite.config.ts7-36 ui/package.json95 |
| UI Library | Ant Design (antd) v6 | ui/src/App.tsx17 ui/package.json46 |
| Styling | Tailwind CSS v4 | ui/src/index.css1-6 ui/package.json92 |
| State Management | Zustand | ui/src/pages/workflows/WorkflowDetail.tsx25 ui/package.json68 |
| Data Fetching | ahooks (useRequest) | ui/src/pages/dashboard/Dashboard.tsx20 ui/package.json45 |
The application entry point initializes the React tree and injects global styles. The root provider RootApp configures Ant Design's ConfigProvider with localized tokens and custom themes, mounting the RouterProvider ui/src/App.tsx45-140
The UI is divided into several primary layouts:
getAuthStore() ui/src/pages/ConsoleLayout.tsx51-54For details, see Application Shell & Routing.
The centerpiece of the frontend is the visual workflow designer. It provides a structured interface for building automation graphs using @flowgram.ai/fixed-layout-editor ui/package.json34 The designer supports both horizontal and vertical layouts, which can be toggled in the appearance settings ui/src/pages/settings/SettingsAppearance.tsx141-172 It is used both for editing workflows and for visualizing execution runs ui/src/components/workflow/WorkflowRunDetail.tsx139-179
For details, see Workflow Designer UI.
The frontend provides specialized pages for managing core domain entities:
dns-hosting) ui/src/pages/accesses/AccessList.tsx24-53For details, see Dashboard, Certificates & Access Pages and Settings UI.
Certimate uses a Repository Pattern on the frontend. Data access logic is centralized to provide type-safe interactions with the PocketBase collections ui/src/repository/workflow.ts6-7 Global UI state is managed via Zustand stores, such as useWorkflowStore ui/src/pages/workflows/WorkflowDetail.tsx25 and useAccessesStore ui/src/pages/accesses/AccessList.tsx19 Real-time updates for workflow runs are handled via PocketBase subscriptions ui/src/components/workflow/WorkflowRunDetail.tsx41-52
For details, see State Management & Data Layer.
The following diagram bridges the high-level UI sections to their corresponding implementation files and data repositories.
Frontend Architecture Overview
Sources: ui/src/App.tsx138 ui/src/pages/ConsoleLayout.tsx182-195 ui/src/pages/workflows/WorkflowDetail.tsx25 ui/src/pages/accesses/AccessList.tsx19 ui/src/repository/workflow.ts6-7 ui/src/components/workflow/WorkflowRunDetail.tsx17-18
The application supports multi-language interfaces using i18next ui/package.json52 Localization is synchronized across Ant Design components via useAntdLocale, Zod validation messages via useZodLocale, and Day.js date formatting via useDayjsLocale ui/src/App.tsx32-34
The UI supports Light and Dark modes. Theme state is managed via useBrowserTheme ui/src/App.tsx29 applied via Ant Design's theme.algorithm ui/src/App.tsx23-26 and synchronized with Tailwind CSS variables by adding classes to the document root ui/src/App.tsx39-41 Custom tokens in ConfigProvider ensure consistency ui/src/App.tsx49-81
i18n & Theme Synchronization
Sources: ui/src/App.tsx23-42 ui/src/components/AppLocale.tsx1-27 ui/src/global.css1-43
The frontend includes a version checking mechanism that compares the current __APP_VERSION__ (injected during build from the Go source internal/app/app.go ui/vite.config.ts37-56) with the latest release available on GitHub or Gitee ui/src/hooks/useVersionChecker.ts60-79 This is implemented via the useVersionChecker hook, which provides update status to the AppVersion component ui/src/components/AppVersion.tsx28-40
Sources: ui/src/hooks/useVersionChecker.ts41-122 ui/src/domain/app.ts1-29 ui/src/components/AppVersion.tsx11-47