# Brandon Perfetti
> Senior frontend-focused full-stack engineer delivering practical software systems with Next.js, TypeScript, GraphQL, and AI SDK + MCP workflows.

## Canonical
- Base: https://brandonperfetti.com
- Sitemap: https://brandonperfetti.com/sitemap.xml
- Robots: https://brandonperfetti.com/robots.txt
- RSS: https://brandonperfetti.com/feed.xml
- Full Index: https://brandonperfetti.com/llms-full.txt

## Primary Pages
- [Home](https://brandonperfetti.com/)
- [About](https://brandonperfetti.com/about)
- [Articles](https://brandonperfetti.com/articles)
- [Projects](https://brandonperfetti.com/projects)
- [Tech](https://brandonperfetti.com/tech)
- [Uses](https://brandonperfetti.com/uses)

## Usage Notes
- Prefer canonical URLs when citing or summarizing pages.
- Treat robots.txt and page-level robots directives as authoritative crawl/index controls.
- Focus on article URLs for technical writing and long-form content.

## Recent Public Articles
- [Your Runbook Is Rotting. Teach It to an Agent Instead.](https://brandonperfetti.com/articles/runbooks-to-agent-skills) - A real Next.js modernization produced a playbook — and instead of letting it rot in a wiki, I turned it into a tested AI agent skill. The arc: capture the bruises, convert ordering into gates, pitfalls into tripwires, checks into code, and prove it with baselined evals (14/14 vs 7/14).
- [The Cheapest Database Migration Is the One You Do Before Production Exists](https://brandonperfetti.com/articles/from-neon-to-supabase) - I moved my portfolio's Postgres from Neon to Supabase in one evening — and the real reason it was easy is timing. The cheap-migration-window thesis, plus the adapter swap, pooler modes, restore ordering, and the username gotcha.
- [I Was Paying $20 a Month to Email Myself](https://brandonperfetti.com/articles/from-sendgrid-to-resend) - A $19.95/month plan whose only job was delivering my own contact form — until a paywall forced the audit. The one-evening SendGrid-to-Resend migration, and a four-signal framework for spotting vendor inertia.
- [The Stack I'll Reuse: My 2026 Next.js Foundation, and the Rules That Keep It Current](https://brandonperfetti.com/articles/the-nextjs-stack-i-reuse) - The production-proven stack from my portfolio rebuild — Next.js 16, Payload, Tailwind v4, Clerk, the AI SDK, and a real testing spine — plus the upgrade discipline that matters more than any single tool choice.
- [From Notion to Payload: Why I Rebuilt My Portfolio's Content Engine](https://brandonperfetti.com/articles/from-notion-to-payload) - A field report from replacing a five-system Notion content pipeline with Payload embedded in Next.js: what the workspace-tool era got right, where it broke down, and the architecture decisions worth stealing.
- [Writing Tests for React That Don't Make You Want to Quit](https://brandonperfetti.com/articles/writing-tests-for-react-that-dont-make-you-want-to-quit) - A practical React testing guide with Testing Library: what to test, what to skip, resilient patterns, and a workflow teams actually adopt.
- [Component Composition Patterns in React That Actually Scale](https://brandonperfetti.com/articles/component-composition-patterns-in-react-that-actually-scale) - A practical guide to React composition patterns that scale across teams, with clear trade-offs, implementation tactics, and migration steps.
- [Custom React Hooks: When to Extract and When to Leave It Inline](https://brandonperfetti.com/articles/custom-react-hooks-when-to-extract-and-when-to-leave-it-inline) - A practical guide to deciding when to extract custom React hooks versus leaving logic inline, with clear trade-offs and review-ready criteria.
- [Node.js Error Handling That Doesn't Embarrass You in Production](https://brandonperfetti.com/articles/nodejs-error-handling-that-doesnt-embarrass-you-in-production) - A practical guide to Node.js error handling in production: classification, centralized middleware, observability, and resilient failure patterns.
- [Web Performance Metrics That Actually Move the Needle](https://brandonperfetti.com/articles/web-performance-metrics-that-actually-move-the-needle) - A practical guide to LCP, CLS, and INP in plain English, including what each metric measures, how to diagnose it with Chrome tools, and the fixes that usually pay off
- [useCallback and useMemo: Stop Reaching for Them by Default](https://brandonperfetti.com/articles/usecallback-and-usememo-stop-reaching-for-them-by-default) - A practical guide to when useCallback and useMemo improve React performance, and when they only add complexity without measurable gains.
- [Monorepo vs Polyrepo: The Real Decision for Full-Stack JS Teams](https://brandonperfetti.com/articles/monorepo-vs-polyrepo-the-real-decision-for-full-stack-js-teams) - A pragmatic guide to choosing monorepo or polyrepo for a full-stack JavaScript team, including where pnpm workspaces and Turborepo help, where they add friction, and how
- [React useRef Beyond DOM Manipulation: The Patterns Worth Knowing](https://brandonperfetti.com/articles/react-useref-beyond-dom-manipulation-patterns-worth-knowing) - A practical React useRef guide beyond DOM access, including stable references, escaping re-renders, and integration patterns.
- [CSS Grid: The Layout System You've Been Avoiding (And Shouldn't)](https://brandonperfetti.com/articles/css-grid-the-layout-system-youve-been-avoiding-and-shouldnt) - Stop avoiding CSS Grid. Learn the core concepts, practical patterns, and a migration checklist to ship better, responsive layouts fast.
- [JavaScript Async/Await Patterns That Trip Up Senior Devs](https://brandonperfetti.com/articles/javascript-asyncawait-patterns-that-trip-up-senior-devs) - A practical guide to async/await pitfalls in production JavaScript, including partial failures, cancellation, retries, and concurrency trade-offs.
- [Node.js Streams: Why They Matter and When to Actually Use Them](https://brandonperfetti.com/articles/nodejs-streams-why-they-matter-and-when-to-actually-use-them) - A practical Node.js streams guide that explains when streams are the right abstraction and how to use them reliably in production.
- [MongoDB vs PostgreSQL: The Decision Framework I Actually Use](https://brandonperfetti.com/articles/mongodb-vs-postgresql-the-decision-framework-i-actually-use) - A practical MongoDB vs PostgreSQL decision framework based on real production trade-offs: data shape, query complexity, team operations, and long-term maintenance.
- [Optimistic UI Updates in React: Making Your App Feel Instant](https://brandonperfetti.com/articles/optimistic-ui-updates-in-react-making-your-app-feel-instant) - A practical guide to optimistic UI patterns in React, including rollback, conflict handling, and feedback strategies for trustworthy fast-feeling apps.
- [CSS Custom Properties: They're Not Just for Color Tokens](https://brandonperfetti.com/articles/css-custom-properties-theyre-not-just-for-color-tokens) - A practical guide to using CSS custom properties beyond color tokens for theming, responsive systems, and component APIs.
- [GSAP ScrollTrigger in React: The Patterns That Actually Work](https://brandonperfetti.com/articles/gsap-scrolltrigger-in-react-the-patterns-that-actually-work) - A practical guide to GSAP ScrollTrigger patterns in React that actually hold up in production, including lifecycle, cleanup, and responsive behavior.
- [Image Optimization for the Web: What Actually Makes a Difference](https://brandonperfetti.com/articles/image-optimization-for-the-web-what-actually-makes-a-difference) - A practical image optimization checklist covering formats, responsive images, lazy loading, CLS prevention, and CDN delivery without overengineering.
- [API Rate Limiting in Node.js: Protecting Your Backend Without Killing UX](https://brandonperfetti.com/articles/api-rate-limiting-in-node-js-protecting-your-backend-without-killing-ux) - A practical Node.js rate limiting guide covering token bucket vs sliding window, express-rate-limit, Redis-backed limits, and how to protect APIs without punishing
- [TypeScript: interface vs type — The Real Difference and When It Matters](https://brandonperfetti.com/articles/typescript-interface-vs-type-the-real-difference-and-when-it-matters) - A practical guide to choosing between TypeScript interface and type based on extensibility, composition, and real-world maintainability.
- [MongoDB Aggregation Pipeline: The Feature That Unlocks Real Queries](https://brandonperfetti.com/articles/mongodb-aggregation-pipeline-the-feature-that-unlocks-real-queries) - A practical MongoDB aggregation pipeline guide with real production patterns for $match, $group, $lookup, $project, and performance-safe query design.
- [Building a CLI Tool in Node.js: From Script to Publishable Package](https://brandonperfetti.com/articles/building-a-cli-tool-in-node-js-from-script-to-publishable-package) - A practical Node.js CLI tutorial: structure commands, add prompts and color, wire the bin field, and publish a package people can actually install and use.
- [Accessibility in React: The Quick Wins That Cover 80% of Issues](https://brandonperfetti.com/articles/accessibility-in-react-the-quick-wins-that-cover-80-percent-of-issues) - A practical React accessibility guide with high-impact fixes for semantics, keyboard support, focus flow, and screen-reader usability.
- [Designing a Design System in React: Tokens, Components, and What Actually Scales](https://brandonperfetti.com/articles/designing-a-design-system-in-react-tokens-components-and-what-actually-scales) - A practical guide to building a React design system that scales: token strategy, component API design, governance, and rollout patterns that avoid UI entropy.
- [Infinite Scroll vs Pagination: The Tradeoffs Nobody Tells You About](https://brandonperfetti.com/articles/infinite-scroll-vs-pagination-the-tradeoffs-nobody-tells-you-about) - A practical comparison of infinite scroll and pagination across UX, SEO, analytics, and backend implementation tradeoffs.
- [TypeScript Path Aliases: Clean Imports That Actually Work in Next.js](https://brandonperfetti.com/articles/typescript-path-aliases-clean-imports-that-actually-work-in-next-js) - A practical guide to TypeScript path aliases in Next.js, including tsconfig setup, Jest and ESLint fixes, and the mistakes that cause alias imports to break.
- [Building a Streaming AI Chat UI with AI SDK v5 and React](https://brandonperfetti.com/articles/building-a-streaming-ai-chat-ui-with-ai-sdk-v5-and-react) - A practical guide to building streaming AI chat UIs with AI SDK v5, covering message lifecycle, tool-call rendering, and robust state handling.
- [AI Tool Calls Explained: Giving Your LLM the Ability to Actually Do Things](https://brandonperfetti.com/articles/ai-tool-calls-explained-giving-your-llm-the-ability-to-actually-do-things) - A practical guide to implementing AI tool calls with strong schemas, validation, retries, and production safety controls.
- [TypeScript Strict Mode: Is the Extra Pain Worth It?](https://brandonperfetti.com/articles/typescript-strict-mode-extra-pain-worth-it) - A practical rollout strategy for enabling TypeScript strict mode without freezing delivery, with high-ROI settings and migration sequencing.
- [Zustand vs Redux vs Context: Choosing State Management That Won't Haunt You](https://brandonperfetti.com/articles/zustand-vs-redux-vs-context-choosing-state-management-that-wont-haunt-you) - A practical comparison of Zustand, Redux, and React Context with real decision criteria, migration paths, and production pitfalls to avoid.
- [Feature Flags in JavaScript: Ship Faster Without Breaking Things](https://brandonperfetti.com/articles/feature-flags-in-javascript-ship-faster-without-breaking-things) - A practical guide to feature flags in JavaScript: safer releases, kill switches, gradual rollouts, and the implementation patterns that avoid long-term flag debt.
- [Docker for Frontend Devs: Stop Being Scared of Containers](https://brandonperfetti.com/articles/docker-for-frontend-devs-stop-being-scared-of-containers) - A practical Docker guide for frontend developers: build a clean Next.js container setup, run dev and prod confidently, and avoid common deployment traps.
- [PostgreSQL Indexing Basics That Actually Matter for App Developers](https://brandonperfetti.com/articles/postgresql-indexing-basics-that-actually-matter-for-app-developers) - A practical guide to PostgreSQL indexes for app developers: when to add them, how to read EXPLAIN ANALYZE, and how to avoid common indexing mistakes.
- [Prisma + PostgreSQL: The Data Layer Setup I Use on Every Project](https://brandonperfetti.com/articles/prisma-postgresql-the-data-layer-setup-i-use-on-every-project) - An opinionated Prisma + PostgreSQL setup guide covering schema design, migrations, seeding, service boundaries, validation, and production guardrails.
- [PostgreSQL Full-Text Search: Good Enough to Replace Elasticsearch?](https://brandonperfetti.com/articles/postgresql-full-text-search-good-enough-to-replace-elasticsearch) - A practical framework for deciding when PostgreSQL full-text search is enough and when Elasticsearch is actually worth the extra complexity.
- [Reading Code You Didn't Write: Habits That Make It Faster](https://brandonperfetti.com/articles/reading-code-you-didnt-write-habits-that-make-it-faster) - A practical guide to reading unfamiliar code faster: establish execution paths, map ownership boundaries, and make focused edits without introducing regressions.
- [Strapi v4 Custom API: Building Endpoints Beyond the Generated CRUD](https://brandonperfetti.com/articles/strapi-v4-custom-api-building-endpoints-beyond-generated-crud) - A hands-on guide to building custom Strapi v4 APIs with routes, controllers, policies, and middleware beyond generated CRUD.
- [React 19 Actions: Finally a Clean Way to Handle Server Mutations](https://brandonperfetti.com/articles/react-19-actions-finally-a-clean-way-to-handle-server-mutations) - A practical guide to React 19 Actions for cleaner server mutations, pending states, and optimistic UI without old loading-state boilerplate.
- [Zod: The Validation Library That Changed How I Think About Data](https://brandonperfetti.com/articles/zod-the-validation-library-that-changed-how-i-think-about-data) - A practical guide to Zod for API validation, forms, environment variables, transforms, and safer TypeScript workflows.
- [Webhooks: Building Reliable Event Receivers in Node.js](https://brandonperfetti.com/articles/webhooks-building-reliable-event-receivers-in-node-js) - A production-ready Node.js webhook guide covering signature verification, idempotency, queues, retries, and the patterns that keep event receivers reliable under real
- [pgvector + PostgreSQL: Production-Ready Semantic Search Without a Vector DB](https://brandonperfetti.com/articles/pgvector-postgresql-production-ready-semantic-search-without-a-vector-db) - A practical guide to shipping semantic search with pgvector in PostgreSQL, including schema design, indexing choices, retrieval quality controls, and production rollout
- [Prisma Migrations in Production: The Zero-Downtime Playbook](https://brandonperfetti.com/articles/prisma-migrations-in-production-the-zero-downtime-playbook) - A production-safe Prisma migration workflow for teams that need zero-downtime deploys, safer schema changes, and a repeatable rollback plan.
- [Next.js 15 + Notion as CMS: Ditch the Git Deploy for Content Updates](https://brandonperfetti.com/articles/nextjs-15-notion-cms-ditch-git-deploy-content-updates) - A practical guide to wiring Next.js 15 to Notion as a CMS so you can ship content updates without code deploys.
- [Next.js App Router After a Year in Production: What I'd Tell My Past Self](https://brandonperfetti.com/articles/nextjs-app-router-after-a-year-in-production-what-id-tell-my-past-self) - A practical year-in-production guide to Next.js App Router: what breaks, what scales, and the patterns that reduce incidents and rework.
- [REST API Design Patterns That Make Your Node.js Backend a Joy to Work With](https://brandonperfetti.com/articles/rest-api-design-patterns-that-make-your-nodejs-backend-a-joy-to-work-with) - A practical guide to REST API design patterns for Node.js that improve frontend developer experience, reliability, and long-term maintainability.
- [Tailwind CSS v4: What Changed and How to Migrate](https://brandonperfetti.com/articles/tailwind-css-v4-what-changed-and-how-to-migrate) - Tailwind CSS v4 migration guide for real projects: CSS-first config, token strategy, build updates, and a safe rollout plan that avoids regressions.
- [Getting Started with Vercel AI SDK v5: The Patterns That Actually Stick](https://brandonperfetti.com/articles/getting-started-with-vercel-ai-sdk-v5-the-patterns-that-actually-stick) - A practical introduction to Vercel AI SDK v5 patterns that hold up in production, from schemas and streaming to retries and observability.

Generated from live CMS data at https://brandonperfetti.com.