HomeWeb Architecture

Web Architecture & Systems

Systems that scale
without rewrites.

I design full-stack architectures with failure modes in mind from day one — where scaling from 100 to 100,000 users is a config change, not a rewrite. Every system I build is observable, testable, and documented before it ships.

Next.js 14TypeScriptSupabaseEdge FunctionspgvectortRPC
See the work View tech stack
architecture.ts
// Request flow const pipeline = [ 'Edge Network', 'Middleware', 'App Router (RSC)', 'tRPC Procedures', 'Supabase RLS', 'pgvector', ] // Guaranteed properties type SystemContract = { latency_p99: '<200ms' uptime_sla: '99.9%' type_safe: true observable: true }
40+
Systems shipped
99.97%
Avg. uptime across prod systems
<200ms
P99 target on all API routes
0
Production incidents from architecture flaws

Design Philosophy

How I think about
system design

01

Constraints first

Before a single line of code, I establish the non-negotiables: latency budget, data residency, team size, and the most likely scaling axis. A B2B SaaS with 500 enterprise accounts has different architecture needs than a DTC brand doing 50k daily sessions.

02

Edge by default

Static where possible, edge where necessary, server where required. Vercel's Edge Network and Cloudflare Workers have made global sub-50ms response times accessible at mid-market budgets. I design for this by default.

03

Observable from day one

Logging, tracing, and error boundaries are architectural decisions, not post-launch additions. Every system I build ships with Sentry for errors, Posthog for product analytics, and structured logging before the first user hits it.

04

Type safety end-to-end

TypeScript + tRPC + Zod means a database schema change propagates as a compile error, not a runtime 500. The investment in type safety pays back 10:1 in systems that are live for more than six months.

01 — Full-Stack Applications

Production apps,
real constraints.

Each project below is either live in production or was delivered to a paying client. No side projects dressed as case studies.

Full-Stack SaaS

Meridian Analytics Platform

Multi-tenant analytics dashboard for HR teams. Real-time data pipeline handling 2M+ events/day with sub-200ms query response at P99. Built with Next.js App Router, Supabase, and a custom React query layer.

// data flow

Edge → API Routes → Supabase Realtime → React Query

2M+
Events/day
<200ms
P99 query
99.97%
Uptime

Stack

Next.js 14TypeScriptSupabasePrismatRPCVercel
Headless Commerce

Volta Commerce Engine

Rebuilt a $3M/yr DTC storefront from a bloated Shopify theme to a headless Next.js architecture. Custom cart engine, predictive search with Algolia, and a CDN-first image pipeline via Cloudinary.

// data flow

CDN → Edge Cache → Storefront API → Incremental Static Regen

0.8s
LCP mobile
3.2×
Conversion lift
94
Lighthouse score

Stack

Next.jsShopify Storefront APIAlgoliaCloudinaryUpstash RedisEdge Functions
Internal Platform

Pulse CRM Internal Tool

Custom CRM built for a 12-person sales team that outgrew HubSpot. Role-based access control, real-time deal pipeline with WebSocket updates, and a Slack integration for automated deal stage notifications.

// data flow

Clerk RBAC → Drizzle → PlanetScale → WebSocket → Slack Webhook

40%
Pipeline visibility ↑
6hr
Saved/week/rep
12
Users, day one

Stack

Next.jsClerk AuthPlanetScaleDrizzle ORMPusherResend

02 — Automation Workflows

Humans do the work
machines can't.

Every workflow below eliminates a recurring manual task. The design principle: automate the handoffs, not the judgment.

Trigger: Notion DB update

Content Production Pipeline

When a content brief is marked 'Ready' in Notion, the workflow: pulls the brief, calls GPT-4o for a structured first draft, runs a brand-voice check, notifies the editor in Slack, and creates a Google Doc — all within 90 seconds.

N
Notion
⚡
n8n
AI
GPT-4o
S
Slack
G
GDocs
⏱ ~90s end-to-end
n8n (self-hosted)OpenAI APINotion APIGoogle Workspace APISlack Webhooks
Trigger: Form submission → CRM

Lead Enrichment & Routing

Inbound form leads are enriched via Apollo.io, scored against ICP criteria, and routed: enterprise leads go to the founder's calendar (Calendly auto-create), SMB leads receive a personalized Resend sequence, unqualified leads are tagged and archived.

F
Webform
A
Apollo
◈
Scorer
⑃
Router
C
CRM
⏱ ~12s from submission
Make (Integromat)Apollo.io APIResendCalendly APISupabase
Trigger: Supabase cron + event

E-commerce Re-engagement

Churn prediction model flags at-risk customers (90-day no-purchase). A server-side cron queries Supabase, builds a personalised cohort, generates tailored win-back offers using product affinity data, and fires a multi-step email sequence via Resend.

⏱
Cron
SB
Supabase
ML
Predictor
✉
Resend
📊
Analytics
⏱ Nightly batch, 2AM
Supabase Edge FunctionsSupabase CronPython ML modelResend APIPosthog

03 — AI Integrations

AI that ships,
not prototypes.

Every AI integration below is in production. Each one has error handling, fallbacks, cost controls, and observability baked in from day one.

Hybrid RAG

RAG Document Intelligence

Production RAG pipeline for a legal tech client — 400k+ contract documents, chunked, embedded with text-embedding-3-large, and stored in pgvector (Supabase). The query layer runs hybrid search (BM25 + cosine similarity) with re-ranking via Cohere.

Key result

Retrieval accuracy: 94% on domain-specific queries

Stack

OpenAI EmbeddingspgvectorSupabaseCohere RerankLangChainNext.js
Structured Output + Tool Use

Structured Extraction API

Extracts structured data from unstructured documents (invoices, contracts, intake forms) using GPT-4o with function calling and a Zod validation layer. Handles 3,000+ documents/day with a retry loop and human-review queue for low-confidence outputs.

Key result

98.6% extraction accuracy, <$0.004 per document

Stack

GPT-4oZodTypeScriptVercel AI SDKUpstash QueueNext.js
Query Rewriting + Hybrid Search

AI-Augmented Search Layer

Replaced keyword search with a hybrid semantic + keyword layer for a SaaS product. User queries are rewritten by an LLM for intent clarity, embedded for vector search, and combined with Algolia's BM25 results. Query rewriting alone lifted successful searches by 31%.

Key result

+31% successful search completions

Stack

OpenAIAlgoliaUpstash VectorVercel EdgeTypeScript

Full Stack

The complete
toolchain.

Frontend

Next.js 14
React 18
TypeScript
Tailwind CSS
Radix UI
Framer Motion

Backend & API

Node.js
tRPC
REST
GraphQL
Zod
Prisma

Data & DB

Supabase
PlanetScale
Drizzle ORM
Redis
pgvector
Turso

AI / ML

OpenAI API
Vercel AI SDK
LangChain
Cohere
Embeddings
RAG

Infra & DevOps

Vercel
Railway
Cloudflare
Docker
GitHub Actions
Sentry

Automation

n8n
Make
Zapier
Resend
Webhooks
Cron

Let's build

Have a system that needs
to actually work?

I take on 2–3 architecture engagements per quarter. If you have a system to build, migrate, or scale — the first technical session is diagnostic. You leave with a clear architectural recommendation whether or not we work together.

TypeScript end-to-end
Documented before shipped
2–3 engagements per quarter

Weekly thinking

One idea, every Sunday.

Web architecture, marketing systems, and going independent — one idea per issue. No filler. Real numbers from the build-in-public arc.

No spam. Unsubscribe any time. Free.