ArchGen

Web Application System Architecture

Focus: Auth + APIs + Data + Observability. Key areas: React, Next.js, TypeScript.

Use this as a block diagram of the system when explaining architecture.

Preview
Edit this example
Diagram caption: Web Application System Architecture (Auth + APIs + Data + Observability) has 4 layers: Edge & Client, API & Core Services, Data & Messaging, Platform & Observability.

Prompt

System architecture diagram for a modern web application. Users access a React/Next.js UI through a CDN with TLS termination and WAF protection. Authentication uses OAuth2/OIDC with MFA and JWT access tokens. Requests flow through an API gateway to core services (User, Content, Search) running in containers with autoscaling. Data storage includes PostgreSQL for transactions, Redis for session and cache, Elasticsearch for search, and S3 for media uploads. Use Kafka for async jobs and event-driven updates. Add CI/CD with GitHub Actions and ArgoCD, plus monitoring with OpenTelemetry, Datadog, and centralized logging. Highlight RBAC, rate limiting, and audit trails.
Highlights
  • Layer details · Edge & Client: Modules include Web Client, CDN & WAF, Auth & Identity.
  • Module responsibilities · Edge & Client / CDN & WAF: Reduce latency; Block malicious traffic; Shield origin
  • Module responsibilities · Edge & Client / Web Client: Render UI; Call APIs securely; Handle client navigation

Overview

Web Application System Architecture (Auth + APIs + Data + Observability) has 4 layers: Edge & Client, API & Core Services, Data & Messaging, Platform & Observability.

Layer details

Show all (4)
  • Edge & Client: Modules include Web Client, CDN & WAF, Auth & Identity.
  • API & Core Services: Modules include API Gateway, User Service, Content Service, Search Service.
  • Data & Messaging: Modules include Transactional Database, Cache Layer, Event Bus, Object Storage.
  • Platform & Observability: Modules include CI/CD Pipeline, Monitoring & Logging, Security & Compliance.

Module responsibilities

Show all (14)
  • Edge & Client / Web Client: Render UI; Call APIs securely; Handle client navigation
  • Edge & Client / CDN & WAF: Reduce latency; Block malicious traffic; Shield origin
  • Edge & Client / Auth & Identity: Authenticate users; Issue JWTs; Manage sessions
  • API & Core Services / API Gateway: Enforce policies; Route traffic; Aggregate endpoints
  • API & Core Services / User Service: Manage identities; Authorize requests; Emit user events
  • API & Core Services / Content Service: Serve content; Validate payloads; Publish updates
  • API & Core Services / Search Service: Build indexes; Serve search results; Track query analytics
  • Data & Messaging / Transactional Database: Guarantee ACID writes; Support OLTP queries; Maintain backups
  • Data & Messaging / Cache Layer: Reduce latency; Protect databases; Store ephemeral data
  • Data & Messaging / Event Bus: Decouple services; Buffer spikes; Guarantee delivery
  • Data & Messaging / Object Storage: Store blobs; Serve assets; Archive data
  • Platform & Observability / CI/CD Pipeline: Automate releases; Scan artifacts; Promote to prod
  • Platform & Observability / Monitoring & Logging: Track SLOs; Detect incidents; Enable debugging
  • Platform & Observability / Security & Compliance: Protect credentials; Enforce least privilege; Track access trails

Key flows

Show all (3)
  • Login flow: a user hits the CDN/WAF, completes OAuth2/OIDC authentication, receives JWTs, and the API Gateway validates tokens before calling the User Service and PostgreSQL.
  • Content flow: the UI uploads media to S3 via signed URLs, Content Service writes metadata to PostgreSQL, emits events to Kafka, and the Search Service indexes updates in Elasticsearch for fast discovery.
  • Operational flow: CI/CD ships new containers through ArgoCD, while OpenTelemetry traces and logs stream to Datadog/Grafana for SLO tracking and alerting.