Frontend architecture

The browser application is a React 18 + TypeScript single-page application built with Vite. The frontend code follows a route/page, component, service, and shared-client structure.

flowchart TD
    Route[React Router route] --> Page[Page component]
    Page --> Components[Reusable components]
    Page --> Hooks[Custom hooks and React state]
    Components --> Hooks
    Page --> Service[API service modules]
    Hooks --> Service
    Service --> Client[Axios API client]
    Client --> API[Backend API]
    API --> Client
    Client --> Service
    Service --> Page

Entry and routing

• front/src/main.tsx creates the React root and renders App under StrictMode.
• front/src/App.tsx contains BrowserRouter routes, startup auth-state initialization, redirects, and route-level user checks.
• Authenticated pages render within DashboardLayout, which provides Sidebar, Header, and Outlet.

State management

The source uses component-level useState, useEffect, and custom hooks. No app-level Context provider, Redux store, or query-cache library is identified in the frontend entry/routing setup reviewed. Browser persistence is handled by StorageService and specialized local/session storage helpers.

Services and HTTP

Service modules under front/src/services/api/ define feature-specific operations. They use apiClient from client.ts, which creates an Axios instance with the configured base URL and timeout. authService is registered as the refresh callback during API module initialization.

Authentication and permissions

Access and refresh tokens are stored by local storage service; the client adds a bearer header when a token exists. The response interceptor handles 401 with refresh/retry or clears auth and redirects. hasPermission implements a frontend permission hierarchy. Backend authorization must be verified independently.

Errors

API service modules vary: some throw errors, some log and return empty/default data. Page components render loading/errors in feature-specific ways. The shared 401 handling is documented in Authentication.

Source map

Concern	Source
Entry point	front/src/main.tsx
Routes	front/src/App.tsx
Pages	front/src/pages/
Components	front/src/components/
Hooks	front/src/hooks/
API client/services	front/src/services/api/
Types	front/src/types/
Utilities	front/src/utils/
Runtime config	front/src/config/environment.ts