Code Scaffolder
A web app where users write code in a browser editor, save reusable Templates, and insert reusable Blocks from a slide-out Block Sidebar.
const project = {
title: "Code Scaffolder",
year: 2026,
tech: ["React", "TypeScript", "TanStack Start", "Supabase", "PostgreSQL", "Tailwind CSS v4"],
};Problem
Developers often repeat the same scaffolding work across projects, while existing snippet tools split code between disconnected docs and local files. The challenge was designing a clear domain where full Templates, insertable Blocks, Categories, Tags, Language, and Visibility all stay understandable for both end users and implementation.
Solution
I defined and implemented a domain-first model centered on User-owned Templates and Blocks with explicit Visibility (private/public), Category ownership, and language metadata for syntax-aware editing. The editor includes a Block Sidebar that opens from line-level insert controls so users can drop in Blocks inline, while Community and profile routes expose public content for discovery and following.
Outcomes
- Introduced a shared domain language that removed ambiguous UI terms and standardized product and engineering communication
- Separated full-document Templates from insertion-focused Blocks to support both save and compose workflows
- Designed relationship and access rules for Visitor, User, Community, Subscriptions, and public profiles
- Added notification event model with per-event toggles to support follow and save activity
- Created a foundation for cross-device template reuse with private-by-default authoring and optional public sharing