System Architecture Design Example using Mermaid

flowchart TB
    %% Users
    User[User / Driver Browser]

    %% Frontend
    User -->|HTTPS| CloudFront
    CloudFront --> S3[S3<br/>React - SPA]

    %% API Access
    CloudFront -->|API Requests| ALB[Application Load Balancer]

    %% Kubernetes Cluster
    subgraph AWS_EKS[AWS EKS Cluster]
        ALB --> Ingress[Ingress Controller]

        subgraph Backend[Backend Services]
            Auth[Auth Service]
            UserSvc[User Service]
            DriverSvc[Driver Service]
            RideSvc[Ride Service]
            PaymentSvc[Payment Service]
        end

        Ingress --> Auth
        Ingress --> UserSvc
        Ingress --> DriverSvc
        Ingress --> RideSvc
        Ingress --> PaymentSvc
    end

    %% Datastores
    Auth --> MySQL[(MySQL)]
    UserSvc --> MySQL
    DriverSvc --> MySQL
    RideSvc --> MySQL
    PaymentSvc --> MySQL

    Auth --> Redis[(Redis)]
    RideSvc --> Redis
    DriverSvc --> Redis

    %% CI/CD
    subgraph CICD[CI / CD]
        GitHub[GitHub Repository]
        GHA[GitHub Actions]
    end

    GitHub --> GHA
    GHA -->|Build & Deploy| AWS_EKS
    GHA -->|Build & Upload| S3

Frontend

• React: SPA
• S3: Hosts static frontend assets
• CloudFront: CDN, Routes API requests to backend

Backend

• API Services
• Kubernetes on EKS: Auto-scaling, self-healing microservices
• Ingress Controller: Routes HTTP traffic to internal services
• Docker: Containerized services for portability

Data Layer

• MySQL: users, drivers, rides, payments
• Redis: Caching & real-time data (driver locations, ride state, sessions)

CI/CD

• GitHub Actions
  • Frontend: build -> upload to S3 -> CloudFront cache invalidation
  • Backend: build Docker images -> deploy to EKS