Frontend Architecture

A consistent, layered architecture across Flutter, Angular, React, and React Native — enabling you to build on top of shared Foundation infrastructure without rebuilding common capabilities.

Layered Composition

Every frontend platform follows the same three-layer model:

┌─────────────────────────────────────────────────┐
│  Product Applications                            │
│  Domain-specific screens, business logic, UX     │
├─────────────────────────────────────────────────┤
│  Product SDKs (optional)                         │
│  Domain packages that extend the Foundation      │
├─────────────────────────────────────────────────┤
│  Foundation Layer                                │
│  Auth, theming, error handling, UI components,   │
│  REST clients, data layer, CI/CD                 │
└─────────────────────────────────────────────────┘

Each layer depends only downward. Foundation packages never reference product code. Product SDKs extend Foundation capabilities for a specific domain. Product apps compose both layers into a deployable experience.

Dependency Injection

Each platform provides an abstraction layer over its DI mechanism, keeping SDK code framework-agnostic:

The Flutter DI abstraction is the most decoupled — the GetX dependency is an implementation detail that product code never touches. Angular uses its native DI but standardizes the pattern. React/RN uses a lightweight container with React hooks.

SDK Composition

Product apps wire Foundation SDKs together at startup. Each platform has a consistent “one call per SDK” initialization pattern:

Flutter — static initialize() factories that self-register dependencies:

AuthSdk.initialize(config: AuthConfig(di: di, ...));
MessagingSdk.initialize(config: MessagingConfig(di: di, ...));
FilesSdk.initialize(config: FilesConfig(di: di, ...));

Angular — forRoot() module imports with config providers:

AuthModule.forRoot({ configProvider: AuthConfigProvider }),
FilesModule.forRoot({ configProvider: FilesConfigProvider }),
MessagingModule.forRoot({ configProvider: MessagingConfigProvider }),

React / RN — nested provider composition:

<FirebaseProvider {...config}>
  <AuthSdkProvider>
    <FilesProvider uploadConfig={config}>
      <MessagingProvider>
        {children}
      </MessagingProvider>
    </FilesProvider>
  </AuthSdkProvider>
</FirebaseProvider>

Feature Organization

All platforms organize code by domain feature, not by file type:

feature/
├── data/           # Services, repositories, state
├── ui/             # Screens, components, controllers
└── resources/      # Constants, permissions, config

Backend Integration

Every platform provides typed clients for the Foundation backend with automatic auth token injection:

• REST — HTTP clients wrap Dio (Flutter), Angular HttpClient, or Axios (React/RN) with interceptors that attach JWT bearer tokens, Firebase AppCheck tokens, and tenant ID headers on every request
• Firestore — Real-time stream wrappers provide streamDocument, streamCollection, query builders, and pagination with graceful permission-denied handling
• Search — Algolia integration with platform-native search UI (InstantSearch for Angular/React, direct client for Flutter)
• Push Notifications — Firebase Cloud Messaging with platform-specific token management and routing

Shared Foundation Capabilities

These capabilities are provided across all platforms:

Next Steps

• Platforms — Deep-dive into each platform’s capabilities
• Capabilities — Authentication, theming, error handling, state, testing, performance, build/deploy, component libraries, and SDKs