A modern media and discovery platform for Three.js games, browser-based game development, and the WebGL/WebGPU ecosystem — with a custom CMS and an AI draft generation pipeline.
ThreeForged is a full-stack publishing site covering the emerging world of browser-native 3D. It combines original editorial content, curated project showcases, and a live community feed into a single home for developers and players who care about what's happening at the edge of web graphics.
The site runs a custom CMS with role-based auth, a rich text editor with tweet embeds, a media library with automatic WebP conversion, an SEO scoring widget that grades drafts against 13 checks in real time, and an AI draft generation pipeline that turns a topic and a few source URLs into a publish-ready article with a matching cover image.
I designed and built ThreeForged end-to-end — from the editorial voice and visual system to the CMS, auth, and AI pipeline. Rather than paying for Contentful or Sanity, I built a lightweight admin in the same Next.js app. Supabase handles auth, Postgres, and storage; Server Actions handle mutations; direct SQL queries handle reads. No ORM, no form library, no state manager. The result is a CMS that takes seconds to extend when a new field is needed.
/admin with post and showcase CRUD, categories, tags, a media library, curated tweet management, and an AI generation dashboard.sanitize-html allowlists, middleware-enforced admin routes, RLS policiesThe most interesting engineering problem was automating draft generation without producing the generic, hedge-heavy slop that AI content tools usually output. The pipeline lives at /admin/generate and chains three models together.
An editor provides a topic angle and up to five source URLs. The API route fetches each URL, feeds the HTML through Mozilla Readability (the same engine Firefox Reader View uses), and extracts the clean article text. Navigation, footers, sidebars, and ads get stripped. Each source is capped at 12,000 characters to control token usage while preserving the substantive content.
Clean source text plus the editor's angle goes to Claude Sonnet 4 with a carefully engineered system prompt. The prompt is the heart of the pipeline.
leverage, robust, comprehensive, seamless, and cutting-edge, bans hedging openers, bans cliché opens, and bans summary conclusions. Each rule states the reason, so the model understands the intent.The model returns a structured JSON object with title, slug, excerpt, body (sanitized HTML), meta_title, meta_description, and source_urls.
Once the article is drafted, the cover image goes through Google's Gemini API. Three Nano Banana variants and both Imagen 3 tiers are exposed in the admin UI, so editors can pick the tradeoff between speed and quality per article.
The image prompt is auto-generated from the article's title and excerpt, with a fixed style guide appended for consistent visual identity. Editors can override the auto-prompt with a custom one when they want a specific visual. The image comes back as base64, gets converted to WebP at quality 82 via Sharp for a typical 60 to 80 percent file size reduction, uploads to Supabase Storage, and writes a corresponding row to the media table.
The finished article is written to Postgres as a draft with source_type: "ai_generated" and the Supabase-hosted cover URL. An editor opens it in the Tiptap editor, reviews against the SEO widget's 13 checks, tweaks, and publishes. End to end, a fetched-to-draft cycle takes 30 to 60 seconds.