Architecture Overview

The Editor platform is built using modern web technologies and follows a modular architecture that promotes code reuse and maintainability.

Technology Stack

• Frontend Framework: Angular 20 with standalone components
• State Management: NGXS for global state management
• Styling: SCSS with Tailwind CSS for utility classes
• Build System: NX for monorepo management
• Testing: Jest for unit tests, Cypress for E2E tests

Core Concepts

Monorepo Structure

We use NX to manage our monorepo, which contains multiple applications and libraries. This approach allows us to:

• Share code between applications
• Enforce consistent code quality standards
• Implement atomic changes across the ecosystem
• Optimize build and test times through caching

Component-Based Architecture

The Editor platform follows a component-based architecture, where UI elements are broken down into reusable components. This approach:

• Promotes code reuse
• Improves maintainability
• Enables easier testing
• Allows for consistent styling across applications

State Management

We use NGXS for state management, which provides:

• A single source of truth for application state
• Predictable state changes through actions and reducers
• Developer tools for debugging
• Integration with Angular's dependency injection system

Libraries

Core Library

The Core library contains business logic and services that are shared across applications, including:

• API clients
• Authentication services
• Data models
• Utility functions

Shared UI Library

The Shared UI library contains reusable UI components that are used across applications, including:

• Buttons, inputs, and other form controls
• Layout components
• Navigation elements
• Data visualization components

Widgets Library

The Widgets library contains higher-level components that implement specific functionality, including:

• Rich text editors
• Data grids
• Media viewers
• Interactive charts