LazyMagic

AdminApp Project Documentation

Overview

AdminApp is a multi-platform administrative interface for managing the MagicPets system. Built using Blazor with MVVM architecture, it supports both web deployment (Blazor WebAssembly) and cross-platform mobile/desktop deployment (.NET MAUI). The application provides tenant and user management capabilities with a shared UI codebase.

Project Structure

AdminApp/
├── ViewModels/          # Business logic and data management (MVVM layer)
├── BlazorUI/            # Shared Razor components and pages
├── WASMApp/             # Blazor WebAssembly entry point
├── MAUIApp/             # .NET MAUI mobile/desktop entry point
├── Config/              # Configuration project
└── MakeRelease/         # Build and release tooling

Architecture

Multi-Platform Design

  • Web: Blazor WebAssembly for browser deployment
  • Mobile/Desktop: .NET MAUI hybrid app (iOS, Android, Windows, macOS)
  • Shared UI: Single set of Blazor components works across all platforms

MVVM Implementation

  • ViewModels handle business logic and state management
  • Blazor components provide declarative UI with data binding
  • Factory pattern for ViewModel creation with dependency injection
  • Reactive programming using ReactiveUI for real-time updates

Project Components

ViewModels Project

Purpose: Contains the MVVM business logic layer with ViewModels that manage application state and data operations.

Key Classes:

Session Management

  • SessionViewModel: User session state, implements authentication and current user context
  • ISessionViewModel: Interface defining session operations

User Management

  • TenantUsersViewModel: Collection manager for tenant users, provides CRUD operations
  • TenantUserViewModel: Individual tenant user data and operations with validation

Subtenant Management

  • SubtenantsViewModel: Collection manager for subtenants
  • SubtenantViewModel: Individual subtenant data and operations

Configuration

  • ConfigureViewModels: Dependency injection setup for all ViewModels and API clients
  • AppConfig: Static application configuration holder

Dependencies:

  • BaseApp.ViewModels (base MVVM framework)
  • AdminApi (generated client SDK)
  • LazyMagic client libraries for authentication and factories

BlazorUI Project

Purpose: Shared Blazor Razor components and pages used by both Web and Mobile applications.

Key Components:

Layout Components

  • MainLayout.razor: Primary application layout with MudBlazor theming, navigation drawer, and app bar
  • NavMenu.razor: Dynamic navigation menu that shows/hides based on authentication state
  • Main.razor: Application root component with router and initialization logic

Pages

  • HomePage.razor: Landing page with authentication component (/)
  • Sessions.razor: Application entry point that creates and manages user sessions
  • UsersPage.razor: CRUD interface for tenant users with data table display (/UsersPage)
  • UserEditPage.razor: Form for creating/editing tenant users with validation (/UserEditPage)
  • SubtenantsPage.razor: CRUD interface for subtenants (/SubtenantsPage)
  • SubtenantEditPage.razor: Form for viewing/editing subtenant details (/SubtenantEditPage)

Reusable Components

  • StringList.razor: Generic editable string list component with add/edit/delete functionality
  • ApisEditor.razor: Inline editor for API configurations
  • AssetsEditor.razor: Inline editor for asset configurations
  • WebAppsEditor.razor: Inline editor for web app configurations
  • UnitsToggle.razor: Component for toggling measurement units
  • Pet.razor: Pet display component

Configuration

  • ConfigureBlazorUI: Service registration and dependency injection setup for UI layer

Dependencies:

  • MudBlazor (UI component library)
  • BaseApp.BlazorUI (base UI components)
  • ViewModels project (business logic)
  • LazyMagic Blazor libraries

WASMApp Project

Purpose: Blazor WebAssembly application entry point for web deployment.

Key Classes:

  • Program: Static entry point that configures WebAssembly host, handles JavaScript interop for app configuration, and starts the Blazor runtime

Features:

  • Service worker for offline capabilities
  • JavaScript configuration loading
  • Production-ready deployment settings

MAUIApp Project

Purpose: .NET MAUI hybrid application for cross-platform deployment.

Target Platforms:

  • Android (net9.0-android)
  • iOS (net9.0-ios)
  • macOS (net9.0-maccatalyst)
  • Windows (net9.0-windows10.0.19041.0)

Key Classes:

  • App.xaml/App.xaml.cs: MAUI application lifecycle management
  • MainPage.xaml/MainPage.xaml.cs: Primary page hosting Blazor WebView
  • MauiProgram: Application factory that configures platform-specific services

Platform-Specific Features:

  • Native app packaging and deployment
  • Platform-specific permissions and capabilities
  • Embedded resource handling

Data Flow and Communication

Application Architecture Flow

Entry Point (WASM/MAUI) → Service Registration → Session Creation → Page Navigation → ViewModel Injection → API Communication

Communication Pattern

UI Components ↔ ViewModels ↔ API Clients ↔ Backend Services
     ↑              ↑           ↑
 Data Binding → State Mgmt → HTTP Calls

Authentication Flow

  • Uses AWS Cognito through LazyMagic authentication libraries
  • TenantAuth system for admin/store users
  • Authentication state managed in SessionViewModel.AuthProcess
  • UI components reactively update based on IsSignedIn property

MVVM Implementation Details

Base Classes

  • ViewModels: Inherit from LzItemViewModel<T> or LzItemsViewModel<T> base classes
  • UI Components: Inherit from LzComponentBase variants for ViewModel binding

Factory Pattern

  • ViewModels use [Factory] attribute for automatic code generation
  • Factories registered in DI container and injected where needed
  • Example usage: ITenantUserViewModelFactory.Create(parent, data)

State Management

  • Reactive Programming: Uses ReactiveUI for property change notifications
  • Entity States: ViewModels maintain state (New, Edit, Current, Deleted)
  • CRUD Operations: Base classes provide SaveEditAsync(), DeleteAsync(), CancelEditAsync()

Validation

Multi-level validation approach:

  1. DTO validation in generated ClientSDK
  2. Model validation in ClientSDK
  3. Local UI validation in BlazorUI project

Configuration

Service Registration

Both WASM and MAUI entry points call:

builder.Services.AddAppViewModels();    // ViewModels project services
builder.Services.AddBlazorUI();         // BlazorUI project services

Key Service Registrations

  • ISessionsViewModel: Singleton session manager
  • ICurrentSessionViewModel: Transient current session accessor
  • API Clients: Singleton instances for backend communication
  • Factory Classes: Generated factories for ViewModel creation

Configuration Sources

  • appConfig.js: JavaScript configuration for web deployment
  • launchSettings.json: Development environment settings
  • tenantconfig.json: Runtime tenant-specific configuration
  • Embedded Resources: MAUI platform configuration

Key Features

Multi-Tenancy Support

  • Built-in tenant and subtenant management
  • Tenant-specific configuration and branding
  • Secure isolation between tenants

User Management

  • Complete CRUD operations for tenant users
  • Role-based access control
  • User authentication and authorization

Cross-Platform Compatibility

  • Single codebase runs on web browsers and native mobile/desktop apps
  • Platform-specific optimizations through MAUI
  • Responsive design that adapts to different screen sizes

Real-Time Updates

  • Reactive UI updates through ReactiveUI
  • Automatic refresh of data when changes occur
  • Efficient state management for large datasets

Dependencies on Other Projects

Generated Client SDKs

  • AdminApi: Generated from Service project for backend communication
  • SharedSchema: Common data models shared across applications

Base Libraries

  • BaseApp.ViewModels: MVVM framework and base classes
  • BaseApp.BlazorUI: Common UI components and utilities

Third-Party Libraries

  • MudBlazor: Material Design component library
  • ReactiveUI: Reactive programming framework
  • FluentValidation: Validation framework
  • Microsoft Blazor/MAUI: Application frameworks

Development Workflow

Building

cd AdminApp
dotnet build AdminApp.sln

Running Web Version

cd WASMApp
dotnet run

Running MAUI Version

cd MAUIApp
dotnet build -f net9.0-windows10.0.19041.0

Clean Build

.\DeleteObjAndBin.ps1

Architectural Strengths

  1. Code Reuse: Shared UI components across web and mobile platforms
  2. Clean Architecture: Clear separation between UI, business logic, and API layers
  3. Code Generation: Automated factory pattern and API client generation
  4. Reactive UI: Real-time updates through data binding
  5. Scalability: Multi-tenant architecture supports growth
  6. Security: Integrated AWS Cognito authentication
  7. Maintainability: Well-structured MVVM pattern with dependency injection