WebModern Platform

SaaS Platform

Multi-tenant CMS with a security-hardened AWS media pipeline for Dutch SMB websites

Next.js 16TypeScriptAWS CDKS3CloudFrontSupabaseDrizzle
cms.webmodern.nl
WebModern CMS
BeheerUitloggen
← Alle websites
Bakkerij De Korenbloem✎ Visueel bewerken
Hero
Hero titel✓ Opgeslagen
Vers brood, elke *ochtend* gebakken
Hero subtitelConcept — niet gepubliceerd
Ambachtelijk sinds 1962, nu ook online te bestellen
2 wijzigingen nog niet gepubliceerdPubliceer
0
Public S3 access
1
IAM permission (PutObject)
100%
Infra as code (CDK)
v0.4
SDK on npm

Overview

WebModern Platform lets non-technical small business owners edit the content of their custom-designed websites without touching code. An admin dashboard (cms.webmodern.nl) connects to a network of client sites that fetch and render content in real time. Every client site is its own repository forked from a shared template, while a published npm SDK (@webmodern/cms-sdk) keeps all sites compatible with the CMS backend.

The Challenge

Client image uploads needed to be fast, cheap, and above all secure: no AWS credentials in the browser, no publicly readable storage, and no shared failure modes between client sites. At the same time, each client needed full design freedom and isolated deployments — a classic multi-tenancy trade-off that a dynamic site router would not solve cleanly.

The Solution

Private-by-default AWS media pipeline

Built with AWS CDK (TypeScript): a fully private S3 bucket that blocks all public access, fronted by CloudFront with Origin Access Control as the only entity allowed to read it. The CDN is the single public endpoint for every image URL. Deployed to eu-central-1, reproducible from code.

Presigned uploads, least-privilege IAM

The CMS generates temporary presigned PUT URLs so the browser uploads directly to S3 — credentials never leave the server. The uploader IAM user has exactly one permission: s3:PutObject on the sites/* prefix. It cannot read, delete, or modify anything. Its secret key lives in AWS Secrets Manager.

SDK-first architecture

A published npm package (@webmodern/cms-sdk) is the single contract between the CMS, the site template, and every forked client site. Editable content flows through <Editable> and <EditableImage> components keyed by (siteId, blockId), with mandatory canonical blocks enforced at build time.

Visual editing with realtime preview

Client sites load inside the CMS in an iframe with ?edit=1, activating a visual editor overlay. Changes broadcast to the preview over Supabase Realtime channels per site. Clients mark accent words with *asterisks* — the site controls the styling, the client only marks the words.

Key Features

S3 + CloudFront OAC

Private bucket, CDN-only reads — a textbook secure media setup

Least-Privilege IAM

Single PutObject permission, secrets in AWS Secrets Manager

Presigned Uploads

Browser uploads straight to S3 without exposing credentials

Fork-per-Client

Every client site is an isolated repo with its own deploys

npm SDK

@webmodern/cms-sdk: one stable contract for all client sites

Visual Editor

Iframe edit mode with instant preview via Supabase Realtime

Results

Image upload pipeline live in production — presigned flow verified end-to-end

Zero AWS credentials in the browser, zero public bucket access

Entire infrastructure reproducible from a single CDK stack

Clients edit content with magic-link login — no passwords, no code

Complete deploy isolation: one client's issue never affects another