Introduction
After understanding the architectural and DDD evolution roadmap, this article draws the overall blueprint for the Full-Stack Microservices + Micro Frontend system — an architectural map that we will dive into in detail throughout the series.
1. Architecture Overview
1.1 Full-Stack Architecture Blueprint
┌─────────────────────────────────────────────────────┐
│ CLIENTS │
│ (Browser, Mobile, IoT) │
└──────────────────────┬──────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ CDN (Static Assets) │
│ CloudFront / CloudFlare / Vercel │
└──────────────────────┬──────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ MICRO FRONTEND LAYER │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────────┐ │
│ │Shell │ │Produc│ │ Cart │ │Order │ │ Account │ │
│ │ App │ │ MFE │ │ MFE │ │ MFE │ │ MFE │ │
│ └──┬───┘ └──┬───┘ └──┬───┘ └──┬───┘ └────┬─────┘ │
└─────┼────────┼────────┼────────┼──────────┼─────────┘
└────────┴────────┴────────┴──────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ BFF LAYER (Optional) │
│ Backend for Frontend Aggregation │
└──────────────────────┬──────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ API GATEWAY │
│ (Kong / APISIX / Envoy Gateway) │
│ Auth │ Rate Limit │ Routing │ Load Balance │
└──┬────────┬────────────┬────────────┬───────────────┘
│ │ │ │
┌──┴──┐ ┌───┴───┐ ┌────┴────┐ ┌────┴────┐
│User │ │Product│ │ Cart │ │ Order │
│ µS │ │ µS │ │ µS │ │ µS │
│ │ │ │ │ │ │ │
│┌───┐│ │┌────┐ │ │ ┌─────┐ │ │ ┌─────┐ │
││PG ││ ││PG │ │ │ │Redis│ │ │ │ PG │ │
│└───┘│ │└────┘ │ │ └─────┘ │ │ └─────┘ │
└─────┘ └───────┘ └─────────┘ └────┬────┘
│
┌────────────────────────────────────┴────────────────┐
│ MESSAGE BROKER │
│ (Kafka / RabbitMQ / NATS) │
│ Events: OrderPlaced, PaymentConfirmed, etc. │
└─────────────────────────────────────────────────────┘
2. Main layers
2.1 Micro Frontend Layer
Shell Application (Container) coordinates Remote Micro Frontend applications. Each MFE is an independent application, built and deployed separately.
Shell App Responsibilities:
- General layout (Header, Footer, Sidebar)
- Routing & Navigation
- Authentication state
- Error boundaries
2.2 BFF Layer
Backend for Frontend aggregates data from many microservices, transforming it into a suitable format for each micro frontend. Especially useful when:
- Frontend needs data from many services in one request
- Mobile vs Web needs different data formats
- Need separate caching layer for frontend
2.3 API Gateway
Entry point for all API calls. Handling cross-cutting concerns:
- Authentication/Authorization: Verify JWT tokens
- Rate Limiting: Protects the backend from abuse
- Request Routing: Route to the correct service
- Load Balancing: Traffic distribution
- SSL Termination: Handles HTTPS
2.4 Microservices Layer
Each microservice owns a Bounded Context, has its own database, and deploys independently. Communicate via REST/gRPC (sync) or Message Broker (async).
2.5 Message Broker / Event Bus
Backbone for async communication between services. Ensure loose coupling and event-driven data flow.
3. Request Flow End-to-End
User clicks "Add to Cart" trên Product MFE:
1. Product MFE → Shell App (event: addToCart)
2. Shell App → API Gateway (POST /api/cart/items)
3. API Gateway → Auth check → Route đến Cart Service
4. Cart Service → Validate product (call Product Service via gRPC)
5. Cart Service → Save to Redis
6. Cart Service → Publish event "ItemAddedToCart" lên Kafka
7. Response → API Gateway → Shell App
8. Shell App → Cart MFE (update cart badge via custom event)
9. Recommendation Service (async) → Listen event → Update recommendations
4. Technology Stack Overview
| Layers | Technology | Why |
|---|---|---|
| Micro Frontend | React + Module Federation | Mature ecosystem, large community |
| Shell App | React + React Router | SPA routing, lazy loading |
| Design System | Tailwind CSS + Storybook | Consistent UI, component library |
| BFF | Node.js (Fastify) | Same language as frontend, fast I/O |
| API Gateway | Kong / APISIX | Plugin ecosystem, high performance |
| Microservices | Node.js/Go | Node for CRUD, Go for high-perf |
| Message Broker | Apache Kafka | Durability, replayability, high throughput |
| Databases | PostgreSQL, Redis, Elasticsearch | Polyglot persistence |
| Auth | Keycloak | Open-source, full OAuth2/OIDC |
| CI/CD | GitHub Actions + ArgoCD | GitOps, Kubernetes-native |
| Observability | OpenTelemetry + Grafana Stack | Vendor-neutral, full-stack tracing |
Summary
This article provides an overview architectural map for the entire series. Each layer will be delved into in the following sections. Understanding big picture helps you not get lost when going into the details of each component.
Next article: Lesson 4: Service Decomposition — Bounded Context & Service Boundaries