Skip to main content

Frontend Architecture

The Qarion frontend is a modern Single Page Application (SPA) built with React, leveraging a custom design system and standard enterprise patterns.

Tech Stack​

  • Framework: React 18+
  • Build Tool: Vite (for fast HMR and optimized builds)
  • State Management: Context API (for global state like Auth, Theme) and React Query (for server state).
  • Routing: React Router DOM.
  • Styling: CSS Modules / Custom "Glass UI" System.

Design System: Glass UI​

We utilize a bespoke design system known as "Glass UI," focusing on:

  • Translucency: Frosted glass effects for depth and hierarchy.
  • Vibrant Colors: HSL-based color palettes that support theming.
  • Micro-interactions: Subtle animations for feedback.
  • Dark Mode First: The UI is optimized for dark mode but fully supports light mode.

Visual Standards​

  • Standard #330-CardInternal: Rules for internal spacing within cards to prevent visual clutter.
  • Badges: High-density badge hierarchy for status indicators.

Architecture Patterns​

Component Structure​

Components are organized by domain (e.g., components/Jobs, pages/Admin) rather than by technical type (e.g., components/atoms, components/molecules).

Data Fetching​

We strictly use TanStack Query (React Query) for data fetching.

  • Caching: Automatic caching and invalidation of server data.
  • Loading States: Unified handling of isLoading and isError.
  • Optimistic Updates: Immediate UI feedback for actions like "Star Item" or "Delete".

The application makes heavy use of tabbed interfaces (e.g., Product Pages, Admin Settings).

  • Persistence: Tab selection is often synchronized with the URL hash or query parameters to support deep linking and browser history.
  • Lazy Loading: Tab content is loaded only when the tab is active, reducing initial bundle size and load time.

Workstations​

"Workstations" are specialized, high-density interfaces for specific power-user tasks.

  • Quality Check Detail: A specialized view for analyzing quality metrics and history.
  • Issue Triage: Kanban-style board for managing data issues.

These workstations often implement their own local state management and optimized rendering logic for handling large datasets.