What was the overall architecture of your project…

The project is built on a micro-frontend architecture.

Main principles:

Independent applications: Each functionality (e.g., product catalog, cart, user profile) is implemented as a separate, standalone application.
Communication via Event Bus or API: Micro-frontends exchange data and events through an event bus or internal API calls.
Client-side composition: The main application (Container App) assembles and displays micro-frontends in a unified interface.
Isolation: Each micro-frontend has its dependencies, state, and routing, minimizing the impact of changes in one application on others.

Technologies:

Framework: React with react-router-dom for routing.
State management: Redux Toolkit for global state and local state for each micro-frontend.
Styling: Using CSS modules and styled-components.
Build: Webpack with Module Federation plugin for micro-frontend integration.
Communication: Custom implementation of Event Bus based on browser API CustomEvent.

Example project structure:

// File structure
my-project/
├── container-app/ // Main application
│   ├── src/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── modules/ // Micro-frontend integration
│   │       └── ProductCatalog.js
│   ├── package.json
│   └── webpack.config.js
├── product-catalog-app/ // Micro-frontend "Product Catalog"
│   ├── src/
│   │   ├── components/
│   │   │   └── ProductList.js
│   │   ├── pages/
│   │   │   └── CatalogPage.js
│   │   └── index.js
│   ├── package.json
│   └── webpack.config.js
├── cart-app/ // Micro-frontend "Cart"
│   ├── src/
│   │   ├── components/
│   │   │   └── CartItems.js
│   │   ├── pages/
│   │   │   └── CartPage.js
│   │   └── index.js
│   ├── package.json
│   └── webpack.config.js
└── ... other micro-frontends

Advantages of this approach:

Independent development: Different teams can work on different micro-frontends in parallel.
Scalability: Easily add new features as separate micro-frontends.
Technological heterogeneity: In theory, different micro-frontends can use different technologies (though in our case, we adhered to React for consistency).
Gradual deployment: New versions of micro-frontends can be deployed independently.
Improved maintainability: Problems in one micro-frontend have less impact on others.

Disadvantages:

Infrastructure complexity: Requires more complex build and deployment setup.
Communication between applications: Organizing effective interaction can be challenging.

Overall, the micro-frontend architecture allowed us to develop a large and complex project with multiple teams, while maintaining flexibility and scalability.

What was the overall architecture of your project system?