Skip to main content

Frontend Overview

The Codecurate frontend is a React 19 single-page application that sits in front of the authenticated backend API. It handles OIDC login, attaches bearer tokens to API requests, and provides the user-facing workflows for browsing media, managing command presets, monitoring jobs, comparing files, and maintaining the obtain list.

What the frontend is responsible for​

  • Starting and maintaining the browser session through OIDC code flow
  • Rendering the protected dashboard shell and route structure
  • Calling the generated OpenAPI client and a few custom fetch helpers
  • Translating backend metadata and job state into searchable, interactive UI
  • Managing user preferences such as theme, language, and selected compare items

Main route map​

RoutePurpose
/browseMedia library browsing, search, filters, uploads, rename, delete, compare selection, and downloads.
/obtainTMDB search, queue management, translations, and custom obtain entries.
/commandsManage FFmpeg command presets.
/jobsMonitor active and completed jobs, inspect logs, stop jobs, and trigger follow-up actions.
/compareRun metadata comparisons, queue VMAF jobs, and browse compare history.
/auth/callbackOIDC sign-in callback handler.
/auth/silent-callbackSilent renew callback route.

Application shell​

The root app wraps the router with:

  • I18nProvider for language selection and translation lookup
  • AlertDialogProvider for confirmation dialogs and error/success prompts
  • AuthProvider for OIDC session management
  • RequireAuth around the protected dashboard layout
  • DashboardLayout, which adds the sidebar, navbar, folder browser context, and sidebar count context

Cross-cutting frontend features​

  • English and German UI translations through src/i18n/en.ts and src/i18n/de.ts
  • Theme switching in the sidebar
  • Sidebar badges for total media files, active jobs, command preset count, and obtain count
  • URL-driven browse filters and compare inputs so important views are shareable and restorable
  • Local storage for user-facing preferences and short-term workflow state

How the frontend talks to the backend​

  • Most requests go through the generated src/api client with a shared Configuration
  • Uploads and secure downloads use custom fetch helpers because they need multipart form bodies or a two-step ticketed flow
  • A middleware layer attaches bearer tokens before requests and retries 401 responses after silent renew when possible