Skip to content

Cloud Frontend

The Cloud Frontend is the primary web interface for Monozu Cloud end users. It communicates exclusively with the Cloud Backend API via REST and WebSockets.

Tech stack

Component	Technology
Framework	React 18
Build tool	Vite 8
Language	TypeScript
Routing	React Router 6
Server state	TanStack Query v5
Client state	Zustand
UI components	shadcn/ui + Radix UI primitives
Styling	Tailwind CSS
Forms	React Hook Form + Zod
HTTP client	Axios
Real-time	WebSocket (native)
Charts	(varies per module)

Project structure

Frontend/
├── src/
│   ├── App.tsx                  # Route definitions
│   ├── routes/                  # Page components (organized by module)
│   │   ├── auth/               # Login, register, MFA, OAuth callback
│   │   ├── assets/             # CMDB asset pages
│   │   ├── incidents/          # ITSM incident pages
│   │   ├── security/           # SOC pages (optional module)
│   │   ├── vpn/                # VPN pages (optional module)
│   │   ├── backup/             # Backup pages (optional module)
│   │   ├── admin/              # Admin console (optional module)
│   │   └── ...
│   └── components/             # Shared UI components
├── lib/
│   ├── api/                    # Axios API clients per domain
│   ├── stores/                 # Zustand stores
│   ├── config/                 # API URL config (api.ts)
│   ├── features.ts             # Feature flag helpers
│   └── ...
└── types/                      # TypeScript interfaces

Always-on modules

These modules are available in every deployment regardless of feature flags:

Module	Routes	Backend domain
Dashboard	`/`	`dashboard`
CMDB — Assets	`/assets/*`	`assets`
CMDB — Sites	`/sites/*`	`sites`
CMDB — Zones/VLANs	`/zones/`, `/vlans/`	`zones`
ITSM — Incidents	`/incidents/*`	`incidents`
ITSM — Problems	`/problems/*`	`problems`
ITSM — Changes	`/changes/*`	`changes`
ITSM — Releases	`/releases/*`	`releases`
ITSM — Service Requests	`/service-requests/*`	`servicerequest`
Maintenance Windows	`/maintenance/*`	`maintenance`
Knowledge Base	`/knowledge/*`	`knowledge`
Network Diagrams	`/diagrams/*`	`diagrams`
Vulnerabilities	`/vulnerabilities/*`	`vulnerabilities`
Vendors	`/vendors/*`	`vendors`
Settings	`/settings/*`	`settings`
Notifications	Topbar badge	`notifications`

Optional modules (feature-flagged)

Loaded from GET /api/v1/me/features after login. See Feature Flags for details.

Module	Route prefix	Flag
Security SOC	`/security/*`	Server-side feature flag
VPN	`/vpn/*`	Server-side feature flag
Backup	`/backup/*`	Server-side feature flag
Admin Panel	`/admin/*`	`VITE_ADMIN_PANEL_ENABLED=true`