ConsumerApp Project Documentation

Overview

ConsumerApp is a multi-platform consumer-facing application for the MagicPets system, designed specifically for end-users to browse and interact with pet information. Built using the same Blazor + MVVM architecture as AdminApp and StoreApp, it provides a simplified, consumer-focused interface that supports both web deployment (Blazor WebAssembly) and cross-platform mobile/desktop deployment (.NET MAUI).

Project Structure

ConsumerApp/
├── ViewModels/          # MVVM business logic 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 Consumer Design

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

Consumer-Specific Focus

Unlike AdminApp (system administration) and StoreApp (store operations), ConsumerApp focuses on:

• Pet browsing and discovery
• Consumer account management
• Public pet information access
• Simplified, user-friendly interfaces
• Read-only pet viewing (no editing capabilities)

Project Components

ViewModels Project

Purpose: Contains the MVVM business logic layer with ViewModels specific to consumer operations.

Key Classes:

Session Management

• SessionsViewModel: Root application state manager (singleton) for consumer sessions
• SessionViewModel: Individual consumer session with authentication and user context
• ICurrentSessionViewModel: Interface for dependency injection of current session
• ISessionViewModel: Interface defining session operations
• ISessionsViewModel: Interface for the root session manager

Configuration

• ConfigureViewModels: Dependency injection setup for ViewModels and ConsumerApi clients
• AppConfig: Static application configuration holder for consumer settings

Key Differences from AdminApp/StoreApp:

• Uses ConsumerApi instead of AdminApi or StoreApi
• Also accesses PublicApi for non-authenticated content
• Configured for ConsumerAuth authentication (separate Cognito User Pool)
• Simplified business logic focused on consumption rather than management

Dependencies:

• BaseApp.ViewModels (base MVVM framework)
• ConsumerApi (generated client SDK for consumer operations)
• PublicApi (public access to pet information)
• LazyMagic client libraries for authentication and factories

BlazorUI Project

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

Key Components:

Layout Components

• MainLayout.razor: Primary application layout with consumer-friendly navigation
• LoadingLayout.razor: Minimal layout for loading screens and initialization
• NavMenu.razor: Simple navigation menu for consumers (Home, Pets when signed in)
• Main.razor: Application root component with router and initialization logic

Consumer-Specific Pages

• HomePage.razor: Consumer landing page with authentication component (/)
• Sessions.razor: Application entry point for consumer sessions with loading animation
• PetsPage.razor: Pet browsing interface for consumers (read-only view) (/PetsPage)

Configuration

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

Key Differences from AdminApp/StoreApp:

• Simplified navigation (Home, Pets only)
• Read-only pet viewing (no editing capabilities like StoreApp)
• Consumer-focused UX optimized for browsing and discovery
• Public access support for unauthenticated users

Dependencies:

• BaseApp.BlazorUI (shared UI components and base classes)
• ViewModels project (consumer business logic)
• LazyMagic Blazor authentication libraries
• MudBlazor (UI component library)

WASMApp Project

Purpose: Blazor WebAssembly application entry point for web deployment of consumer interface.

Key Classes:

• Program: Static entry point that configures WebAssembly host for consumer operations

Configuration:

• Optimized for consumer web experience
• Service worker support for Progressive Web App (PWA) functionality
• Trimming optimizations for faster loading

MAUIApp Project

Purpose: .NET MAUI hybrid application for cross-platform consumer access.

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 for consumer interface
• MauiProgram: Application factory that configures platform-specific services

Authentication Architecture

Consumer Authentication (ConsumerAuth)

ConsumerApp uses a separate authentication system from AdminApp and StoreApp:

// ConsumerApp - Uses ConsumerAuth
authProcess.SetAuthenticator(clientConfig.AuthConfigs?["ConsumerAuth"]!);

// AdminApp/StoreApp - Uses TenantAuth  
authProcess.SetAuthenticator(clientConfig.AuthConfigs?["TenantAuth"]!);

Key Features:

• Separate Cognito User Pool: Isolated from store employees and administrators
• Self-Registration: Consumers can create their own accounts
• Consumer-Specific Permissions: Access only to consumer and public APIs
• Session Persistence: Maintains login state across app sessions

Data Flow and Communication

Consumer-Specific Architecture Flow

Entry Point (WASM/MAUI) → Consumer Service Registration → Consumer Session Creation → Pet Browsing → Consumer/Public API Communication

Communication Pattern

Consumer UI Components ↔ Consumer ViewModels ↔ ConsumerApi/PublicApi ↔ Backend Services
           ↑                      ↑                    ↑
     Data Binding → Consumer State Mgmt → Consumer/Public HTTP Calls

API Access Pattern

• ConsumerApi: Authenticated consumer operations
• PublicApi: Unauthenticated public content access
• Read-Only Access: No administrative or store management capabilities

MVVM Implementation Details

Consumer-Specific ViewModels

• Pet Viewing ViewModels: Read-only pet browsing and discovery
• Consumer Session Management: Tailored for consumer authentication flows
• Public Content Access: ViewModels for accessing public pet information

Factory Pattern

• ViewModels use [Factory] attribute for automatic code generation
• Consumer-specific factories: IConsumerSessionViewModelFactory
• Factories registered in DI container for consumer operations

State Management

• Consumer Sessions: Manages consumer login and personalization
• Pet Discovery: Browse and search pet information
• Public Access: Handle both authenticated and anonymous users

Validation

Simplified validation for consumer operations:

1. ConsumerSchema DTO validation
2. Consumer Model validation in ConsumerApi client
3. Basic UI validation for consumer interactions

Key Features

Pet Discovery

• Pet Browsing: View available pets with detailed information
• Search and Filtering: Find pets by category, tags, and other criteria
• Public Access: Basic pet information available without authentication
• Responsive Design: Optimized for mobile and desktop viewing

Consumer Account Management

• Self-Registration: Consumers can create accounts independently
• Profile Management: Basic consumer profile and preferences
• Session Management: Secure login/logout with session persistence

Cross-Platform Consumer Experience

• Web Interface: Browser-based pet browsing
• Mobile Apps: Native mobile experience for iOS and Android
• Desktop Apps: Full-featured desktop applications
• Progressive Web App: PWA support for enhanced web experience

Configuration

Consumer-Specific Service Registration

builder.Services.AddAppViewModels();    // Consumer ViewModels
builder.Services.AddBlazorUI();         // Consumer UI components

Key Service Registrations

• ISessionsViewModel: Singleton consumer session manager
• ICurrentSessionViewModel: Transient current consumer session accessor
• IConsumerApi: Singleton instance for consumer backend communication
• IPublicApi: Singleton instance for public content access
• Consumer Module Clients: ConsumerModuleClient, PublicModuleClient

Configuration Sources

• appConfig.js: JavaScript configuration for consumer web deployment
• launchSettings.json: Development environment settings for consumer operations
• tenantconfig.json: Consumer-specific tenant configuration
• Consumer Assets: Consumer-facing themes, branding, and resources

Comparison with Other Apps

Functional Scope

Aspect	ConsumerApp	StoreApp	AdminApp
API Client	ConsumerApi + PublicApi	StoreApi	AdminApi
Authentication	ConsumerAuth	TenantAuth	TenantAuth
Primary Users	End Consumers	Store Employees	System Administrators
Main Features	Pet Browsing	Pet Management	User/Tenant Management
Data Access	Read-Only	Read/Write	Full Administrative
Registration	Self-Service	Employee Only	Admin Only

Page Comparison

ConsumerApp Pages	StoreApp Pages	AdminApp Pages
HomePage.razor	HomePage.razor	HomePage.razor
PetsPage.razor (view-only)	PetsPage.razor (management)	UsersPage.razor
Sessions.razor	Sessions.razor	Sessions.razor
-	PetEditPage.razor	UserEditPage.razor
-	-	SubtenantsPage.razor
-	-	SubtenantEditPage.razor

Authentication Scope

• ConsumerApp: ConsumerAuth for end consumer operations
• StoreApp: TenantAuth for store employee operations
• AdminApp: TenantAuth for system administrative operations

Dependencies on Other Projects

Generated Client SDKs

• ConsumerApi: Generated from Service project for consumer backend communication
• PublicApi: Generated from Service project for public content access
• SharedSchema: Common data models shared across applications

Base Libraries

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

Consumer-Specific Dependencies

• ConsumerSchema: Consumer-specific data models and DTOs
• ConsumerModule: Backend business logic for consumer operations
• PublicModule: Backend business logic for public content

Development Workflow

Building

cd ConsumerApp
dotnet build ConsumerApp.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. Consumer-Focused Design: Optimized for end-user pet browsing and discovery
2. Simplified Interface: Clean, intuitive design for non-technical users
3. Dual API Access: Both authenticated (ConsumerApi) and public (PublicApi) content
4. Independent Authentication: Separate consumer identity system
5. Cross-Platform Reach: Consistent experience across web and mobile devices
6. Progressive Enhancement: Works for both anonymous and authenticated users
7. Scalable Architecture: Can support large numbers of concurrent consumers
8. Security Isolation: Complete separation from administrative functions

Integration with MagicPets Ecosystem

ConsumerApp is part of the larger MagicPets ecosystem:

• Consumes: ConsumerApi and PublicApi from Service project
• Shares: BaseAppLib components with other applications
• Coordinates: With StoreApp for pet availability information
• Isolated: From AdminApp administrative functions for security
• Public Access: Provides public-facing interface for pet information