Application Registry
Relevant source files
The following files were used as context for generating this wiki page:
The Application Registry serves as the central orchestration point for managing application components within the Portfolio OS environment. It maps unique application identifiers to their respective React components, enabling dynamic rendering and window management across the desktop and mobile interfaces.
This system ensures that the desktop environment can resolve and instantiate specific features (like "About", "Projects", or "Contact") based on a unified AppId type definition.
Architecture and Core Components
The registry architecture is built on a mapping pattern that decouples application definitions from their rendering logic. It relies on a centralized record that associates AppId keys with actual component implementations.
The Registry Map
The core of the system is the appComponents record. This object acts as a lookup table where keys are restricted to the valid AppId types defined in the system.
export const appComponents: Record<AppId, React.ComponentType> = {
about: AboutApp,
projects: ProjectsApp,
contact: ContactApp,
};
Sources: features/desktop/components/appRegistry.tsx:7-11, types/index.ts:1
Component Resolution Flow
When a user interacts with an icon on the desktop or mobile home screen, the system uses the AppId to retrieve the component from the registry. The MobileHome component, for instance, utilizes createElement to dynamically render the component associated with the currently active application ID.
The diagram shows how an interaction triggers a lookup in the registry to perform dynamic rendering.
Sources: features/desktop/components/MobileHome.tsx:15-30, features/desktop/components/appRegistry.tsx:7-11
Data Structures and Types
The registry is strictly typed to prevent the instantiation of unregistered or invalid applications.
Application Identifiers
The AppId type defines the set of permissible applications within the ecosystem. Currently, the system supports three primary applications.
| AppId | Target Feature | Description |
|---|---|---|
about | AboutApp | Personal biography and skills showcase. |
projects | ProjectsApp | Portfolio of completed work and links. |
contact | ContactApp | Communication form and social links. |
Sources: types/index.ts:1, features/desktop/components/appRegistry.tsx:7-11
Localization and Metadata
While the registry handles component mapping, application metadata such as titles are handled via the internationalization (i18n) system using the same AppId keys.
| Translation Key | English Value | Persian Value |
|---|---|---|
apps.about | "About Me" | "درباره من" |
apps.projects | "Projects" | "پروژهها" |
apps.contact | "Contact" | "تماس" |
Sources: messages/en.json:2-6, messages/fa.json:2-6
Integration with Window Management
The Application Registry is a critical dependency for the WindowManagerContext. The context manages the state of open windows, but the Window component relies on the registry and configuration utilities to resolve the application's specific title and content.
Window Rendering Sequence
The following sequence illustrates how the Window component uses registry-related data to render an application instance.
Conclusion
The Application Registry provides a scalable and type-safe mechanism for managing the various modules of the portfolio. By centralizing component mapping in appRegistry.tsx and enforcing strict type checking via AppId, the project ensures consistency between the desktop's window management system, the mobile home screen, and the localization files.