n8plusus:~$cat case-studies.md

One loop, a decade deep.

For ten years I built the tools a major media company's teams ran every day — one connected loop. PubHub is where a small social team plans a week, composes per-platform posts through one guided flow, and publishes across four networks. Callout is where operators launch rule-driven on-site promotions with exact confidence, previewing against the same renderer readers see. Tag Yourself is where the content loops back — a quiz result becomes a personalized generated image worth sharing, and the share pulls friends into the site.

The through-line: non-engineers driving complex systems safely. Automation proposes and a human disposes. The preview is the real thing. The share comes back.

plancompose publishpromote sharereturn

PubHub — social publishing platform

role: owned the frontend for a decade · scheduling · publishing · media pipelines · incident response

A social publishing platform for scheduling and publishing content across four networks — YouTube, Instagram, Facebook, and Twitter. It's the tool a small social team uses to plan a week of posts, compose per-platform posts through one guided flow, see which accounts are connected or need attention, and review automation-suggested posts before they go out.

planner · weekly calendarwireframe
PubHub planner wireframe — single-account weekly calendar with hover preview
Single-account weekly calendar; hover-preview shows real post content without leaving the grid. The right rail surfaces a calm "connection expired" notice and a queue of automation-suggested posts.
composer · guided flowwireframe
PubHub composer wireframe — guided four-step post flow at the media step
Guided 4-step flow — pick channel, pick post type, attach media, compose & schedule — shown at the media-attach step with inline validation.
accounts · connectionswireframe
PubHub accounts wireframe — two-pane platform connection manager
Two-pane settings view — one platform per nav entry with a connected-count badge, and per-account favorite, quick links, and disconnect.
                                     ┌────────────────┐
                                     │  Automations   │
                                     │  (rule-based   │
                                     │   bots)        │
                                     └───────┬────────┘
                                             ▼
                                  ┌──────────────────────┐
                                  │ Recommendation queue │
                                  │ (candidate posts,    │
                                  │  awaiting approval)  │
                                  └──────────┬───────────┘
                                             │
 ┌───────────┐     ┌───────────┐     ┌───────▼──────────────┐     ┌────────────┐
 │ Accounts  │ ──▶ │ Composer  │ ──▶ │ Scheduler / Queue    │ ──▶ │ Platforms  │
 │ (connect/ │     │ (channel→ │     │ (calendar + cross-   │     │ YouTube ·  │
 │ reconnect │     │ type→media│     │  account queue, same │     │ Instagram· │
 │ a channel)│     │ →schedule)│     │  underlying posts)   │     │ Facebook · │
 └───────────┘     └─────▲─────┘     └──────────────────────┘     │ Twitter    │
                         │                                        └────────────┘
                         └╌╌╌ an approved recommendation becomes a real
                              scheduled post, back into Composer/Scheduler
Thesis: automation proposes, a human disposes, before anything reaches the platforms.
  • Owned PubHub's frontend for a decade: core scheduling and publishing workflows, media pipelines, incident response during platform outages, and the steady product improvements that kept a small team publishing at network scale.
  • Migrated the platform's UI to Next.js using a self-designed agentic loop — a reusable agent definition plus a five-step verification gate that kept the full test suite green throughout.
  • Shipped that migration to production in weeks instead of quarters, and it became the template for modernizing other internal services.

Callout — on-site promotions admin

role: sole author of the admin tier · built from scratch in Next.js (React)

An in-house platform for running on-site promotional units — email-signup prompts and link placements — on a large media website: a client-side unit renderer, a serving API that decides what runs where, and the admin app operators use to create, configure, preview, and manage units. The goal: let a non-engineer launch a complex, rule-driven promotion with exact confidence in the result — without ever touching raw config.

units · listingwireframe
Callout units listing wireframe with delete confirmation modal
Filterable, searchable index of every unit — status, type, audience, schedule, and a performance stat at a glance, with per-row actions and a confirm-modal.
wizard · create/editwireframe
Callout create/edit wizard wireframe at the Content step
Five-step guided form (Information → Placement → Content → Conditions/Targeting → Review) with persistent autosave + undo/redo.
live preview · the money shot ⭐wireframe
Callout live WYSIWYG preview wireframe — split editor and on-site preview
Split editor/preview — typing on the left updates the on-site unit on the right in real time, rendered by the same engine that serves readers.
▶ Try the live preview — clickable demo ↗ Opens in a new tab. Interactive reconstruction — type in the editor and watch the unit update live. Fictional "Acme Media" data.
 ┌──────────────┐        ┌──────────────┐        ┌───────────────┐
 │    ADMIN     │  ───▶  │  SERVING API │  ───▶  │ UNIT RENDERER │
 │  operator    │        │  validates,  │        │  shows unit   │
 │  configures  │        │  decides what│        │  to readers   │
 │  a unit      │        │  runs where  │        │  on the site  │
 └──────────────┘        └──────────────┘        └──────┬────────┘
        ▲                                               │
        │   dashed feedback: the SAME renderer drives   │
        └─ ─ ─ ─ ─ ─ ─  the admin's live preview  ─ ─ ─ ┘
The thesis: the tool previews with the real thing — what an operator sees while editing is exactly what ships.
  • Built the admin app in Next.js from scratch — the listing, the multi-step creation form, and the live WYSIWYG preview.
  • The preview is driven by the real production renderer, eliminating a whole class of "looked different live" errors.
  • Operator-grade reliability craft: custom server-side caching, undo/redo, and autosave with session resume so long configurations survive interruptions.
  • Enabled audience-targeted, scheduled on-site promotions launched by non-engineers.
  • Part of a three-tier system (renderer / serving API / admin) — sole author of the admin tier.

Tag Yourself — shareable quiz results

role: redesigned the share flow end to end · authored the platform's upload security model

A shareable results experience for personality quizzes, powered by a template-image platform — server-rendered React composited to shareable images at scale, so every quiz taker gets a personalized, on-brand result image generated on the fly. The goal: turn a quiz result into something worth sharing, make sharing frictionless, and make the shared artifact pull friends back into the quiz — all safely at scale.

The flow as shipped: before the reveal, the quiz asks you to predict your own result — the celebration fires at the actual result, not the guess. After the reveal you can tag a friend by predicting their result and sharing it, and long result sets scroll.

+176%
desktop share engagement — the redesigned flow won its A/B test
+82%
share engagement lift on mobile web
59→69%
readers returning through shared links
share flow · the loopdiagram
Tag Yourself share flow — quiz result to generated image to shared link to return visit
The redesigned flow: a quiz result becomes a personalized generated image, the share is one tap, and the returning friend takes the quiz — the loop compounds.
result page · expectation vs realityshipped product
Shipped Tag Yourself result page — expectation vs reality with the tag-a-friend prompt
The shipped result page: your predicted result beside your actual one, with the tag-a-friend prompt underneath. Screenshot of the public product.
tag a friend · predict theirsshipped product
Shipped tag-a-friend screen — predict a friend's result and share it
Tag a friend: predict which result they'd get, then send it their way. Screenshot of the public product.
generated share card · expectation vs realityshipped product
Generated share image — expectation versus reality card produced by the template-image platform
A share card generated by the template-image platform — personalized per quiz taker, composited server-side. Screenshot of the public product.
in a social feed · the share landscontext mockup
The generated share card as it lands in a social feed — contextual mockup around a real product screenshot
The card in a feed — where the +176%/+82% share-engagement lift lives. Generic post chrome (mockup); the card itself is the real product.
in a message thread · sms sharecontext mockup
The generated share card in a message thread — contextual mockup around a real product screenshot
The card in Messages — the person-to-person share that pulls a friend back to the quiz. Generic thread chrome (mockup); the card is the real product.
  • The redesigned share flow won its A/B test — +176% desktop share engagement, +82% on mobile web.
  • Raised the rate of readers returning through shared links from 59% to 69%.
  • Built on a template-image platform — server-rendered React composited to images at scale — powering personalized, on-brand share images.
  • Authored the platform's upload security model — the safeguards governing what gets accepted and rendered into shared images at scale.
Public proof — live product
The screenshots above are the shipped feature as any reader sees it on the site. Live quiz-result links are being added — no internal system shown, only the real product in the wild.
Two more case studies in progress
AI Support Triage Engine·Agent-Driven Next.js Migration

PubHub and Callout screens are illustrative reconstructions from memory for portfolio purposes — not BuzzFeed work products; all names, content, and numbers in those wireframes are fictional ("Acme Media"). Tag Yourself is shown via screenshots of the shipped public product, and its quoted metrics are public. No internal systems, proprietary code, or data are shown anywhere on this page.