Digital PublishingProduction Ready

Poster — Digital Magazine

Zero-network-hop editorial publishing monolith uniting Next.js 16 App Router and Payload CMS 3.

View Source on GitHub

TypeScriptNext.jsPayload CMSPostgreSQLTailwind CSSPlaywrightVitest

0 msCMS Network Hop Overhead

Real-TimeIframe Live Preview

E2E + UnitPlaywright & Vitest Coverage

Problem

Decoupled headless CMS setups introduce network latency, complex cache invalidation, and disjointed preview workflows for editorial teams needing instant visual feedback and custom ad placements.

Solution

Integrated Payload CMS 3 directly inside the Next.js 16 App Router monolith on PostgreSQL 16, querying data in-process via Payload Local API with zero HTTP overhead and real-time iframe postMessage Live Preview.

System Design

Architecture Breakdown

Presentation & RSC

Next.js 16 (App Router)

React Server Components, Cmd+K Command Palette search, rotating AdGallery carousel, and RSS/Sitemap routes.

Editorial Engine

Payload CMS 3 + Live Preview

Bidirectional iframe postMessage sync, autosave drafts, lexical rich-text blocks, and role-based access.

Data Access Layer

Payload Local API

Direct Node.js in-process database queries from Server Components bypassing REST/GraphQL serialization.

Database & QA

PostgreSQL 16 + Playwright/Vitest

Containerized relational storage verified with automated integration and end-to-end browser test suites.

Implementation Details

Key Engineering Highlights

Architected a unified publishing monolith integrating Next.js 16 RSC and Payload CMS 3 on PostgreSQL 16 with zero network-hop queries via Payload Local API.
Engineered real-time Live Preview in Payload Admin utilizing iframe postMessage synchronization, autosave drafts, and responsive viewport emulation.
Built an accessible Cmd+K Command Palette search with debounced querying, a dynamic advertising engine (AdGallery & ArticleAds), and automated RSS 2.0 / XML sitemaps.
Established end-to-end reliability with Playwright E2E suites and Vitest integration tests running against a containerized PostgreSQL environment.

Explore More Projects

E-Commerce Monorepo

Atelier — Fashion E-Commerce

High-performance fullstack e-commerce monorepo. Ultra-fast Astro storefront with reactive Preact islands, backed by a modular NestJS API, Prisma, and PostgreSQL.

Telegram Bot RPG

Pokeshowdown — Telegram Bot RPG

Full-stack Telegram bot powered by grammY, TypeScript, and PostgreSQL with Prisma. Features 809 live species from PokeAPI, decorator-driven command registration, transactional trading, and bilingual commands.