A page-oriented web app with real-time media at its center.
Clientana deliberately keeps the production web surface close to the platform: static HTML and browser JavaScript for core product screens, shared assets for cross-page behavior, an Expo mobile client, and a statically exported Nextra handbook.
Frontend layers
Marketing and account pages
Fast standalone HTML surfaces for discovery, plans, legal, support entry, and authentication.
Create and workspace pages
Large stateful browser applications for recording, meetings, library, editing, sharing, domains, and admin.
Reusable assets
Theme, branding, device STT, media durability, uploads, caption timing, video effects, and admin helpers.
Mobile and documentation
Expo/React Native consumes the meeting API. Next/Nextra produces the static support handbook under /support.
Rendering model
The main web product is not a single React SPA. Express serves standalone HTML files and clean routes. Each product page owns its markup, styles, and significant local behavior; cross-page concerns move into assets/ modules. This keeps public entry fast and makes Record and Meet independently deployable within the same server process.
| Concern | Owner | Notes |
|---|---|---|
| Marketing and SEO | Root HTML pages | Metadata, structured data, public navigation, product positioning |
| Authenticated workspace | dashboard.html | Tenant selection, plan state, usage, recordings, team, domains, billing, security, SSO/SCIM |
| Browser recording | record.html + media assets | Source selection, canvas composition, MediaRecorder, local download, progressive upload |
| Live meeting | meet.html + shared caption/STT assets | Lobby, WebRTC/SFU, WebSocket signaling, waiting room, captions, translation, chat, recording |
| Public playback | share.html, embed.html | Password gate, playback, visible metadata, transcript, comments, download/export controls |
| Video editing | video-editor.html, dashboard editor UI | Timeline, clips, thumbnails, versions, exports |
| Platform administration | superadmin.html + assets/superadmin*.js | Owner/staff support, ops, security, billing, tickets, incidents, feature flags |
State boundaries
Ephemeral browser state
Selected devices, active media streams, capture canvas, local recording chunks, in-call panel state, and permission results live in the current tab.
Server session state
HTTP-only cookies, CSRF tokens, active tenant selection, in-memory meeting room state, and WebSocket participant state connect a browser session to server behavior.
Durable workspace state
Supabase Postgres holds tenants, members, recordings, meetings, jobs, settings, audits, and support data. R2 holds media objects and derivatives.
API communication
- Public pages read
/api/featuresto understand authentication, active tenant context, and entitlements without requiring a login. - Authenticated pages use
/api/meas the session and workspace bootstrap. - State-changing browser requests send a CSRF token and rely on secure cookies for the session.
- Record uses multipart upload for smaller assets and direct multipart R2 upload endpoints for resilient large uploads.
- Meet uses HTTP for room creation/configuration and a WebSocket at
/api/meetings/wsfor admission, presence, signaling, captions, and chat. - Playback surfaces receive signed or gateway-authorized media URLs instead of object-storage secrets.
Shared browser modules
Theme and brand
- assets/app-theme.css
- assets/app-theme.js
- assets/clientana-marketing.css
- assets/brand/*
Recording durability
- assets/progressive-r2-upload.js
- assets/recording-durability.js
- assets/video-effects.js
- assets-src/video-effects-*
Captions and correction
- assets/device-stt.js
- assets/device-stt-worker.js
- assets/caption-merge-timing.js
- assets/speech-autocorrect.js
Superadmin UI
- assets/superadmin.js
- assets/superadmin-utils.js
- assets/superadmin.css
Mobile app
apps/mobile is an Expo/React Native client focused on account/session state and meeting creation/join flows. It has its own API client, entitlement constants, permission hook, and session provider. The mobile app shares server contracts—not the web page DOM—with the browser product.
Key ownership:
apps/mobile/app/: Expo Router screens for home, auth, meeting creation, join, and room.apps/mobile/src/lib/api-client.ts: authenticated API requests.apps/mobile/src/lib/meeting-api.ts: meeting-specific server calls.apps/mobile/src/hooks/use-media-permissions.ts: device camera/microphone permission state.apps/mobile/src/providers/session-provider.tsx: account and session context.
Documentation frontend
support-docs is a separate Next.js 15 + Nextra static export. Its build produces .next-support, which Express serves under /support. Every MDX page includes retrieval metadata, and scripts/build-support-kb.js creates support-kb.json, llms.txt, and llms-full.txt from the same source pages.