Was there an architecture based on micro frontends?

Yes, I have experience working with micro-frontend architecture. It is an approach where a large frontend application is divided into independent, isolated parts (micro-frontends), each developed and deployed separately. For example, in an online store project, separate micro-frontends can be allocated for the product catalog, shopping cart, and user profile. This allows teams to work autonomously, use different technologies, and speeds up releases.

An example of the simplest integration of micro-frontends using Web Components:

// In the product catalog micro-frontend
class ProductList extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h2>Product Catalog</h2><ul><li>Product 1</li><li>Product 2</li></ul>`;
  }
}
customElements.define('product-list', ProductList);

// In the main application
// <product-list></product-list> is inserted into the DOM

Thus, each micro-frontend encapsulates its own logic and UI.