> For the complete documentation index, see [llms.txt](https://docs.digit.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digit.org/sandbox/platform/architecture/sandbox-ui/high-level-design.md).

# High Level Design

## Overview

This document outlines the architecture for the Sandbox UI host application and its associated remote applications. The architecture utilizes a micro frontend approach, where multiple independently deployable remote applications are integrated into a single host application.

## Components

<figure><img src="https://383170073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLTNzsJMDGVoewNjC1V95%2Fuploads%2FfTTBzG1yxcntFGbuVvfe%2FUI%20Tech%20Designs%20-%20UI%20Framework%20(Sandbox)%20(2).jpg?alt=media&amp;token=e694641e-4b16-4c3a-931a-3b01f506e08d" alt=""><figcaption><p>Sandbox UI </p></figcaption></figure>

**Host App: Sandbox UI**

* **Responsibilities**:
  * Handles tenant information and routing.
  * Serves as the central point for integrating remote applications.
* **Key Features**:
  * Obtains tenant information, which is used across various remote applications.
  * Manages routing between different remote applications.

**Remote Applications**

Each remote application serves a specific domain and can be developed, deployed, and maintained independently.

1. **User Remote App**
   * **Responsibilities**:
     * Handles user-related functionalities such as signup, signin, onboarding, landing pages, and application management.
   * **Key Features**:
     * Interfaces with the host app to receive tenant information.
     * Manages user sessions and authentication processes.
2. **Account Management Remote App**
   * **Responsibilities**:
     * Manages tenants, users, and authentication (AuthN) & authorization (AuthZ).
   * **Key Features**:
     * Provides administrative functionalities for tenant and user management.
     * Integrates with user authentication services.
3. **Data Management Remote App**
   * **Responsibilities**:
     * Manages data for various applications.
   * **Key Features**:
     * Handles CRUD operations for application data.
     * Ensures data consistency and availability across the platform.
4. **Workbench Remote App**
   * **Responsibilities**:
     * Manages Master Data Management System (MDMS), boundaries, and localization.
   * **Key Features**:
     * Facilitates the configuration and management of master data.
     * Supports localization for different regions.
5. **Client Applications Remote App**
   * **Responsibilities**:
     * Handles various client-specific applications such as HCM (Human Capital Management), PGR (Public Grievance Redressal), and HRMS (Human Resource Management System).
   * **Key Features**:
     * Provides specialized functionalities for different client requirements.
     * Integrates with other remote apps for data and user management.

### Shared Components

**CSS and UI Components**

* **Responsibilities**:
  * Provides a consistent look and feel across all applications.
  * Ensures reusable components for UI consistency.
* **Key Features**:
  * Maintains a component library (Digit UI Components v0.2) for use across remote applications.
  * Centralized CSS management for styling consistency.

## Integration & Communication

**Tenant Management**:

* The host app retrieves and manages tenant information, which is shared with remote applications to ensure consistent tenant-specific behaviour.

**Routing**:

* The host app handles routing between different remote applications, ensuring a seamless user experience.

**Inter-App Communication**:

* Remote applications communicate with each other and the host app through defined APIs and shared services.

**Component Sharing**:

* Shared UI components and CSS are utilized across remote applications to maintain a cohesive design and improve development efficiency.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.digit.org/sandbox/platform/architecture/sandbox-ui/high-level-design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.