Перейти к содержанию
Версия: 3.3.51 Обновлено: 2026-01-23

Frontend Architecture - Saga Project

OVERVIEW

Saga project uses modern frontend architecture with simplified structure, optimized for Docker deployment.

ARCHITECTURE PRINCIPLES

1. UNIFIED SHARED COMPONENTS

frontend/
├── shared/                     # Shared components source
│   ├── components/
│   │   ├── UnifiedWeb3Provider.tsx    # QueryClient provider (legacy name)
│   │   └── SimpleDevDashboard.tsx     # Development debugging
│   └── types/                  # Auto-generated TypeScript types
├── user-app/                   # Consumer application
└── admin-app/                  # Administrative application

2. STATIC EXPORT + DOCKER INTEGRATION

  • Static Export: next.config.js with output: 'export' for production
  • Docker Serving: Go backend serves static files via HTTP
  • Host-based Routing: app.saga.local → user-app, admin.saga.local → admin-app

3. AUTHENTICATION

  • Supabase Auth: Google OAuth + email/password + MFA
  • Backend JWT: Generated after Supabase validation
  • API Calls: Auto-attached Authorization header

COMPONENTS

UnifiedWeb3Provider (Legacy Name)

Location: frontend/shared/components/UnifiedWeb3Provider.tsx

Purpose: QueryClientProvider for React Query data fetching. Name is legacy - no Web3 functionality.

interface UnifiedWeb3ProviderProps {
  children: React.ReactNode
}

SimpleDevDashboard

Location: frontend/shared/components/SimpleDevDashboard.tsx

Purpose: Development debugging dashboard.

Monitoring:

  • React Status: React runtime initialization
  • Auth Status: JWT tokens and authentication
  • Network Status: Online/offline connectivity

Only visible in development mode.

TYPESCRIPT TYPES

Auto-generated from Go backend: 

make generate-types

Output: frontend/shared/types/generated-types.ts

API INTEGRATION

BaseApiService

  • Auto-extracts data.data from {success, data} responses
  • Auto-attaches JWT Authorization header
  • Error handling with typed responses

Services

  • auth-service.ts - Authentication operations
  • api-service-facade.ts - Unified API facade

BUILD & DEPLOYMENT

# Development
cd frontend/user-app && npm run dev

# Production build
make restart  # Rebuilds and deploys both apps

# Generate types after Go model changes
make generate-types