Headless CMS Architecture: GraphQL, Block Editors, and S3 Media Pipelines

Traditional CMSes couple content with presentation. Zenith decouples them entirely, letting any frontend consume content via GraphQL.

1. Block-Based Content Model

Content is stored as an array of typed blocks (paragraph, heading, image, code, quote), making it framework-agnostic:

typescript
interface ContentBlock {
  type: 'paragraph' | 'heading' | 'image' | 'code' | 'quote';
  data: Record<string, any>;
  order: number;
}

2. GraphQL Content API

NestJS serves a GraphQL schema that supports querying posts by slug, category, or tag with field-level resolution for optimal data fetching.

3. S3 Media Pipeline

Images uploaded through the editor are processed by Sharp (resize, WebP conversion) and stored in S3 with signed URLs, keeping the CMS server stateless.

Summary

A block-based headless CMS with GraphQL delivery gives content teams flexibility while developers get a clean, typed API to build any frontend.