Building a Modular E-commerce Platform with Angular Micro-Frontends

This challenge focuses on implementing a foundational micro-frontend architecture for an e-commerce platform using Angular. You will build separate, independently deployable Angular applications that work together as a cohesive user experience, demonstrating how to break down a large application into smaller, manageable pieces.

Problem Description

Your task is to create a micro-frontend architecture for a simplified e-commerce platform. This platform will consist of two main micro-frontends: a "Product Catalog" and a "Shopping Cart". These micro-frontends will be hosted and orchestrated by a main "Shell" application.

Key Requirements:

1. Product Catalog Micro-frontend:

   • Should be a standalone Angular application.
   • Display a list of products (you can hardcode these for this challenge).
   • Each product should have a name, price, and a button to "Add to Cart".
   • When a product is added to the cart, it should emit an event.

2. Shopping Cart Micro-frontend:

   • Should be a standalone Angular application.
   • Display the items currently in the cart.
   • Should be able to receive events from the Product Catalog to add items.
   • Display the total price of items in the cart.

3. Shell Application (Orchestrator):

   • The main Angular application that hosts the micro-frontends.
   • Should load and display both the Product Catalog and Shopping Cart micro-frontends dynamically.
   • Must implement a mechanism for inter-micro-frontend communication (e.g., Product Catalog adding items to the Shopping Cart).
   • Should handle routing for different sections of the e-commerce platform (e.g., /products, /cart).

Expected Behavior:

• When the user navigates to /products, the Product Catalog micro-frontend is displayed.
• When the user clicks "Add to Cart" on a product in the catalog, the item is added to the Shopping Cart micro-frontend, and the cart total updates.
• When the user navigates to /cart, the Shopping Cart micro-frontend is displayed.

Edge Cases to Consider:

• Error handling for micro-frontend loading.
• What happens if one micro-frontend is not available?

Examples

Example 1: Adding a Product

• Input:

  • User views the "Product Catalog" (at /products).
  • Products displayed: "Laptop" ($1200), "Mouse" ($25).
  • User clicks "Add to Cart" for "Laptop".

• Output:

  • The "Shopping Cart" (displayed alongside or at /cart) now shows: "Laptop" ($1200).
  • The cart total updates to $1200.

• Explanation: The Product Catalog micro-frontend detected the "Add to Cart" action, emitted an event with product details, and the Shell application relayed this event to the Shopping Cart micro-frontend, which updated its display and total.

Example 2: Adding Multiple Products

• Input:

  • User views the "Product Catalog".
  • Products displayed: "Laptop" ($1200), "Mouse" ($25), "Keyboard" ($75).
  • User clicks "Add to Cart" for "Laptop".
  • User clicks "Add to Cart" for "Keyboard".

• Output:

  • The "Shopping Cart" shows: "Laptop" ($1200), "Keyboard" ($75).
  • The cart total updates to $1275.

• Explanation: The system correctly accumulates multiple items and their prices in the cart.

Example 3: Navigating to Cart

• Input:

  • User has added "Laptop" and "Mouse" to the cart.
  • User clicks a navigation link to /cart.

• Output:

  • The "Shopping Cart" micro-frontend is displayed prominently, showing "Laptop" ($1200), "Mouse" ($25).
  • The cart total is $1225.
  • The "Product Catalog" micro-frontend might be hidden or displayed in a different layout depending on the shell's routing.

• Explanation: The Shell application's router correctly directs the user to the Shopping Cart view, ensuring the cart content is visible and interactive.

Constraints

• All micro-frontends must be built using Angular CLI and TypeScript.
• The Shell application must dynamically load the micro-frontends. Common approaches include Module Federation or custom solutions using dynamic imports.
• Inter-micro-frontend communication should be handled via events or a shared service managed by the Shell. Direct component-to-component communication across micro-frontends is discouraged.
• Each micro-frontend should have its own distinct build artifacts and be deployable independently.
• For this challenge, assume a single domain for simplicity.

Notes

• Consider how you will manage shared dependencies between micro-frontends to avoid duplication.
• Think about how routing will be handled. The Shell application will likely be responsible for overall routing, but micro-frontends might manage their internal routing.
• Module Federation is a popular and powerful solution for Angular micro-frontends, but you can explore other dynamic loading strategies as well.
• Focus on the core concepts of separation, independent deployment, and communication. The UI can be kept simple.