MicroserviceGridShopFrontend is the frontend application of the Microservice Grid ecosystem.
This Angular-based client communicates with the API Gateway and backend microservices to deliver a modular and scalable shopping interface.

Admin panel for managing products, orders and users.
Built with Angular 20 and designed to work with a microservice backend architecture.

• Product catalog fetched from Product Service
• Inventory availability from Inventory Service
• OrderService creation through OrderService Service
• Secure integration via API Gateway
• Angular 20 standalone architecture
• Modular structure prepared for future expansion (Cart, Auth, Payments, Admin Panel)

• Angular 20
• TypeScript
• RxJS
• Angular Router
• SCSS
• REST communication through API Gateway
• Docker-ready production build

src/
  app/
    core/
      auth/
        auth.config.ts
        auth.interceptor.ts
      header/
        header.component.html
        header.component.scss
        header.component.ts
    order/
      data-access/
        cart.service.ts
        order.service.ts
      feature-cart/
        cart.component.html
        cart.component.scss
        cart.component.ts
      feature-orders/
        orders.component.html
        orders.component.scss
        orders.component.ts
      model/
        cart-item.model.ts
        order-create.request.ts
        order.model.ts
    product/
      data-access/
        admin-product.service.ts
      feature-list/
        product-list.component.html
        product-list.component.scss
        product-list.component.ts
      feature-details/
        product-details.component.html
        product-details.component.scss
        product-details.component.ts
      model/
        admin-product.model.ts
    pages/
      admin/
      home/

Order Payload Example

{
  "items": [
    {
      "sku": "iphone-15",
      "productName": "iPhone 15",
      "price": 999,
      "quantity": 1
    }
  ],
  "userDetails": {
    "email": "[email protected]",
    "firstName": "John",
    "lastName": "Doe"
  }
}

flowchart TD
    User -->|Interacts with| Frontend[Angular Frontend - Products Cart Orders]
    Frontend -->|Calls API| Gateway[API Gateway]

    subgraph Microservices["Microservice Grid"]
        Product[Product Service]
        Inventory[Inventory Service]
        Order[Order Service]
    end
    
    Gateway --> Product
    Gateway --> Inventory
    Gateway --> Order

npm install

2. Start the development server

ng serve

Open in browser:

http://localhost:4200/ Hot-reload works automatically.

ng build --configuration production

The build output will be generated inside the:

dist/microservice-grid-shop-frontend/

You can serve it using Nginx, Docker, or any static hosting.

Generate new components:

ng generate component component-name

View all available schematics:

ng generate --help

All backend communication goes through the API Gateway:

Endpoint Description /api/v1/products Product catalog /api/v1/inventory Inventory check /api/v1/order Create order

Environment config:

src/environments/environment.ts

docker build -t microservice-grid-frontend .
docker run -p 4200:80 microservice-grid-frontend

• Keycloak Authentication (Login / Register)

• User profile & session handling

• Shopping cart & checkout page

• Payment interaction via Pay Service

• Admin Dashboard (Products, Inventory, Orders)

• Weather & Currency integration widgets

Andrii Kulynch Part of the Microservice Grid distributed system.