Notes on things I build and learn.
The exact setup behind this site's own admin login: server config, the Next.js catch-all route handler, the client, and the two-layer middleware + layout protection that actually secures /admin.
Read article
Making Recharts feel native to a Tailwind design system: correct Client Component boundaries, wiring colors to CSS variables for automatic dark mode, custom tooltips/legends, and handling RTL locales.
Read article
The exact Tiptap setup behind every post on this site: one shared extension list for the editor and generateHTML(), storing JSON in Postgres, syntax-highlighted code blocks, and uploaded (not base64) images.
Read article
Base config, mutations + invalidation, dependent queries, optimistic updates, server-side prefetch with hydration — and a clear rule of thumb for React Query vs. Redux Toolkit / Zustand / Jotai (they solve different problems).
Read article
The handful of small, individually-reasonable-looking habits — "use client" too high, sequential awaits, missing Suspense boundaries, barrel imports, forgotten cache config — that add up to a genuinely slow app.
Read article
A practical, roughly effort-ordered checklist — images and fonts, static-by-default rendering, Suspense streaming, parallel fetching, a smaller client bundle, and request-level caching with React's cache().
Read article
A pure-CSS Tailwind plugin instead of Framer Motion — the trade-off, why it lets most components stay Server Components, and how this site pairs it with IntersectionObserver for scroll-triggered reveals.
Read article
The pattern behind reusable Table/Select/Tabs components — a family of pieces sharing one Context instead of a prop-drilling mess. A full worked example: sharing column alignment between a table's header and every row's cells.
Read article
The exact pattern powering every admin form on this site: one Zod schema shared between client and server, a Server Action, and useActionState — no form library, no API route, no client/server validation drift.
Read article
The most common App Router mistake is reflexively adding "use client" everywhere. Here's the mental model, the composition trick that keeps most of a page server-rendered, and the mistakes to avoid.
Read article
LCP, INP, and CLS explained in practical terms, with the exact Next.js tools (next/image, next/font, Suspense, ISR) that fix each one — plus how to actually measure them.
Read article
Three different mental models for the same problem, with a working example of each, a side-by-side comparison table, and a straight answer to "which one should I actually use?"
Read article
A complete walkthrough of manifest setup, service worker caching strategies, push notifications, and background sync — the four pieces that make a Next.js app a genuinely installable, offline-capable PWA.
Read article