Architecture

Overview

Admin-Frontend is a Nuxt 2 (Vue 2) SSR application (target: 'server'). It uses file-based routing, layout-per-page assignment, Vuex for state, and @nuxtjs/auth-next for authentication. Backend communication goes through Axios (with cancel tokens and rate limiting) and server-side middleware that proxy requests to external services (S3, Stripe, Typesense, etc.).

Request flow

Routing

• File-based routing: Routes are defined by the pages/ directory structure.
• Dynamic segments:
  • _workspace_id – Workspace scope (most app routes).
  • _instance_id – DAM instance (under workspace-settings/dam).
  • _user_id – User detail (under workspace-settings/dam/.../users).
  • _id – Resource id (folders, files, collage).
  • _type – Asset type (shared-assets).
  • _brand_name – Brand-scoped shared assets.
• Layout: Each page sets layout: 'damLayout' | 'generalSettingsLayout' | 'outerLayout' | 'projectLayout' | 'supportLayout' | 'default' (or uses default). Error pages use error, error-layouts/settingsError, error-layouts/authError, error-layouts/guestError.

Authentication

• Strategy: local
  • Token: data.access_token; user: data.user.
  • Endpoints: login (login or support-login when support platform), user (user), logout (logout or terminate-token).
• Strategy: external
  • Scheme: ~/schemes/external.
  • Token: data.token, Bearer, maxAge 24h, global.
  • Endpoints: login (/external-login-verify), logout (/external-logout), user (get-external-user).
• Cookie: path /, expires 365 days, secure when SECURE_AUTH_COOKIE === 'true'.
• Redirects: login/logout redirect to /.

State (Vuex)

Module	Purpose
root (store/index.js)	workspaceAccessVerified, nuxtClientInit (auth sync), startOverlay / stopOverlay
loading	isLoading, loadingText, apiLongRunningCount; overlay for long-running action APIs
dam	DAM UI state: workspace, folders, collections, assets, uploads, storage, filters, search, notifications, column views, branding
drive	Google Drive: user, session, tokens, drive root, current drive
dropbox	Dropbox: token, user
box	Box: user, session, tokens, TTL
analytics	Insights: dates, status, modals, transaction and user-agent data

Backend communication

• Axios: baseURL from process.env.API_BASE_URL; HTTPS from HTTPS === 'true'.
• Axios plugin: Attaches cancel tokens, enqueues requests (rate limiting), blocks non–access-check APIs until workspace access is verified; shows long-run overlay for action APIs after 5s.
• Server middleware: Proxies and handlers under /api, /driveapi, /s3, /box, /zip, /convert, /apple-app-site-association, /stripe, /phone-number, /generate-image, /typesense. See API & Server Middleware.