Case Study: RealComposer

An edge-native Backend-for-Frontend (BFF) and API composition engine built on Cloudflare Workers, Astro, and Neon PostgreSQL.

The Problem: The “Glue Code Tax”

Modern web, mobile, and internal tools routinely depend on 3 to 6 disparate upstream SaaS services (for example, Supabase for user data, Stripe for billing, PostHog for analytics, and OpenAI for machine intelligence).

Historically, engineering teams faced two poor architectural compromises:

1. The Client-Side Mess

• Mobile or frontend applications make 3 to 6 chatty HTTP requests across high-latency cellular connections.
• Private API keys (sk_live_..., service role keys) risk extraction through decompiled mobile binaries (.apk or .ipa) or browser DevTools.
• Massive JSON responses (such as Stripe returning 50+ fields when the mobile view only requires 4) waste bandwidth, memory, and battery.

2. The Microservice Tax

• Building and hosting a dedicated Backend-for-Frontend (BFF) requires provisioning Docker containers, writing Express or FastAPI boilerplate, maintaining Redis instances for caching, managing CORS, and paying 24/7 server hosting fees just to join JSON responses.

RealComposer eliminates this “Glue Code Tax”: allowing developers to stitch multiple upstream APIs, inject secrets securely, slim payloads by 80%+, and serve responses in sub-10ms edge cache hits without deploying, monitoring, or managing backend microservices.

The Solution: RealComposer Edge Architecture

RealComposer delivers a zero-maintenance, globally distributed API composition engine that cleanly separates the Control Plane from the Edge Data Plane.

Core Features & Capabilities

1. Edge Pipeline Execution

A single edge URL (https://realcomposer.com/v1/:workspace/:slug) resolves incoming client requests across 300+ global Cloudflare edge data centers. The engine concurrently queries upstream REST APIs with isolated per-step timeouts and graceful JSON fallbacks if an upstream provider times out or returns a 500 status.

2. Zero-Trust Secret Vault

Client devices authenticate via scoped Public Tokens with CORS origin whitelisting. Upstream private API keys are encrypted at rest with AES-256-GCM via the Web Crypto API (crypto.subtle) and injected into request headers server-side at the edge. Private tokens never touch the client bundle or telemetry logs.

3. Declarative Payload Slimming

Visual key mapping and projection reduces third-party JSON payloads by 80% to 92%, standardizing outputs and conserving cellular bandwidth.

4. Sub-10ms Edge Response Caching

Configurable TTL cache rules leverage Cloudflare’s native Cache API (caches.default) with normalized cache keys and automated background invalidation.

5. Programmatic SEO and Taxonomy Growth Engine

A pre-rendered programmatic catalog of 100 high-intent customer search recipe pages targeting FlutterFlow, React, Bubble, Retool, Stripe, Supabase, and OpenAI with automated sitemap generation, structured schema markup, and strict Answer Engine Optimization (AEO) copy architecture.

Technical Stack & Implementation Details

Engineering Challenges & Deep Dives

Challenge 1: Sub-10ms Response Caching on Serverless Edge

• The Problem: Normal relational database lookups across continents introduce 50 to 150ms roundtrip penalties, destroying mobile API response times.
• The Solution: Layered Cloudflare KV for compiled pipeline configurations with the native Cloudflare Cache API (caches.default). Query parameters are deterministically sorted to prevent cache pollution. Cache hits return in 3 to 8ms without touching PostgreSQL. Telemetry writes are decoupled via ctx.waitUntil(), adding 0ms user-facing latency.

Challenge 2: Client Secret Leakage Prevention

• The Problem: Developers embedding API keys in FlutterFlow, React Native, or Webflow expose master credentials in decompiled mobile apps and client-side JavaScript.
• The Solution: RealComposer implements restricted Public Bearer Tokens scoped by allowed origins. Sensitive upstream keys (sk_live_...) reside strictly in Neon encrypted with AES-256-GCM. The edge execution engine decrypts keys in-memory on the fly, interpolates them into upstream request headers, and strips all secrets before returning the response.

Challenge 3: Edge Static Asset Routing and Trailing-Slash 307 Normalization

• The Problem: Prerendered static pages on Cloudflare Workers Static Assets (dist/client/route/index.html) triggered unexpected 307 Temporary Redirect responses when requested with slashless URLs, threatening search engine crawl budget and SEO indexation.
• The Solution: Configured html_handling: "drop-trailing-slash" in wrangler.jsonc, mapped legacy backlinks via a 1,144-rule _redirects file, and normalized dynamic route parameters in [...slug].ts to eliminate trailing-slash redirect chains across all pages and API endpoints.

Key Metrics & Outcomes

• Edge Latency: Cache hits served in < 10ms across global edge nodes.
• Payload Reduction: 80% to 92% reduction in transfer size between third-party SaaS payloads and client responses.
• Infrastructure Cost Efficiency: $5/month base operational cost (Cloudflare Workers Paid + Neon Serverless PostgreSQL free tier) capable of handling up to 10,000,000 edge executions before incurring incremental usage costs.
• Distribution & SEO Scale: 100 programmatic recipe landing pages targeting long-tail API integration queries across 22 client platforms and 20 upstream SaaS providers.

Summary

RealComposer bridges the gap between client applications and modern SaaS backends without requiring dedicated server infrastructure. Building it end-to-end: from distributed edge data planes to Web Crypto vaults, serverless database modeling, and Stripe billing pipelines: reflects the full-stack engineering rigors required for modern cloud-native systems.

Live site: realcomposer.com