Tutorial11 min read
Tailwind 3 to 4: Migration Checklist and Visual Regression Audit
Upgrade Tailwind CSS v3 to v4 safely: verify PostCSS, theme tokens, dark mode, borders, focus states, source scanning, and visual regressions.
The ASoc Blog
Guides for shipping faster with Tailwind and Next.js
Practical write-ups from the team that builds the templates — architecture decisions, migration notes, and honest framework comparisons.
Read more
Tutorial10 min read
Tailwind Disable Dark Mode in v4: Light-Only vs Manual Theme
Learn how to disable Tailwind v4 dark mode without breaking UI: remove dark styles for light-only sites or use a class-based manual theme.
Comparison12 min read
Nuxt vs WordPress: Traditional CMS, Code-Owned Site, or Headless?
Compare Nuxt, WordPress, and headless WordPress for editorial workflow, rendering, SEO, security, maintenance, and developer ownership.
Comparison7 min read
Nuxt vs Shopify: They Are Different Layers—Choose the Store Architecture
Nuxt and Shopify are not competing frameworks. Compare a themed Shopify store, a Nuxt headless frontend, and a fully owned commerce stack.
Tutorial7 min read
Tailwind fit-content: When w-fit Is the Right Width
Use Tailwind w-fit for intrinsic controls, not page layout. Learn when it works, how it differs from max-w and w-full, and the flexbox traps to avoid.
Tutorial8 min read
Tailwind Image Size: Match the CSS Box, File Variant, and Loading Priority
Size images in Tailwind without stretching or shipping excess bytes: reserve the aspect ratio, fit the crop, select the right variant, then set loading priority.
Comparison8 min read
Nuxt vs Solid: Choose a Meta-Framework, Not a Benchmark Screenshot
Nuxt and SolidStart differ most in team fit, rendering model and ecosystem. Use this practical comparison to choose for a content site or a reactive application.
Tutorial10 min read
Tailwind Search Bar: Accessible React Input, Icon and Live Filtering
Build a Tailwind CSS v4 search bar with a real React example: icon positioning, accessible labels, keyboard focus, live filtering and empty states.
Tutorial9 min read
Tailwind Custom Class in v4: @utility vs @layer vs @theme
Learn when to use @utility, @layer components, @theme or plain CSS for custom Tailwind v4 classes, with examples from a real Next.js storefront.
Tutorial8 min read
React Router Prompt: Blocking Navigation After Prompt Was Removed
Prompt left React Router at v6. What 8.5.1 actually exports, what the react-router-prompt package costs, and the App Router equivalent.
Tutorial8 min read
Supabase Magic Links: The Callback That Has to Set a Cookie
signInWithOtp sends the link; the click has to land somewhere a cookie can be set. The PKCE callback this storefront ships, and the cross-device failure.
Tutorial8 min read
The Supabase REST API: What PostgREST Exposes, and What Stops It
Every public table and function becomes an endpoint the moment it exists. Six tables, six select-only policies, four RPCs with EXECUTE revoked.
Comparison7 min read
Nuxt vs Sass: Not a Choice, and the Question Underneath It
A Vue framework and a CSS preprocessor are not alternatives. The real question is whether a preprocessor still earns its build step, answered in 2,801 bytes.
Comparison8 min read
Nuxt vs Remix: What a Framework Move Actually Rewrites
Vue's Nitro server against React's loader and action model. In a working paid backend, 760 lines are framework-free and 226 are adapter. Counted here.
Tutorial9 min read
Next.js Head: next/head, the Metadata API, and Which One You Need
next/head is inert in the App Router. The metadata exports that replace it, and the missing export that un-prerendered 381 OG cards.
Tutorial9 min read
React Switch: The Accessible Toggle, and When Not to Use One
role=switch in 30 lines, no dependency. Then the harder part: seven two-state toggles ship here, and not one of them is a switch.
Comparison8 min read
Nuxt vs Qwik: Hydration, Resumability, and What Actually Moved Our Numbers
Vue's meta-framework against resumability. We ship neither — but the two decisions behind our Lighthouse 100s are identical in both, and one cost us 1.67s.
Tutorial8 min read
Where to Find Your Supabase URL (and What Breaks If It's Wrong)
The Project URL, the dashboard URL and the connection string look alike. Four files read it here, one accepts the wrong value silently, and an unset one errors every page.
Tutorial9 min read
require is not defined in React: Three Different Errors, One Message
The same ReferenceError means three unrelated things. Measured in Chromium and Node 22, plus the two ways this repo gets __dirname with zero require calls.
Tutorial9 min read
TypeScript: Get the Props of a Component (and When Not To)
ComponentProps<typeof X> in one line, then the harder question: 92 components here use it zero times. The two patterns that remove the need, and the one that doesn't.
Tutorial9 min read
What Is Tailwind Used For? 908 Routes, One 15 KB Stylesheet
What Tailwind actually does for a production site, what it refuses to do, and the measured cost: 41 tokens, 92 components, 15,162 gzipped bytes of CSS.
Comparison9 min read
Nuxt vs Bulma: "No JavaScript Included" Is the Whole Comparison
Bulma 1.0.4 ships 96 files and zero .js, so your Vue code owns every interaction. The six components this storefront had to write for exactly that reason.
Comparison9 min read
Nuxt vs Bubble: Which Half of the Work Do You Want to Own?
Bubble includes the expensive half: auth, data model, workflows. Priced in this repo's own files — 8 migrations, 6 RLS policies, 31 test files — and what code buys back.
Tutorial7 min read
Next.js Navigate to Another Page: Link, push or redirect
Five ways to change pages in the App Router and where each runs. Counted in a real codebase: 26 files use Link, 2 call useRouter, 12 redirect() calls.
Comparison8 min read
Nuxt vs Bootstrap: A Framework and a Stylesheet, Priced on a Real Build
Nuxt builds the pages, Bootstrap styles them, so they are not rivals. The styling options under Nuxt, with one measured build: 1 CSS file, 14.7 KiB gzipped.
Comparison9 min read
Next.js vs Wix: The Line Is What You Can Export
Both can be fast and both can look good. The decision is whether your pages are derived from your own data — and whether the source code leaves with you.
Tutorial8 min read
Next.js: Pass Props to a Component Across the Client Boundary
Props are React; the serialization boundary is Next.js. The four shapes a 92-component codebase uses, including a Server Action and three server-rendered slots.
Tutorial8 min read
Next.js router.push Query Params: push, replace, and the Round Trip
Copy searchParams into a mutable URLSearchParams, then decide push or replace. Three real writes: a dashboard tab, a validated ?next= redirect, a checkout hand-off.
Tutorial6 min read
Is Next.js Better Than React? It's React Plus the Parts You'd Build
Next.js is React plus a router, build and server rendering. Measured on this repo: 884 prerendered pages, and a client FAQ whose text is still in the HTML.
Tutorial6 min read
Next.js Force Client-Side Rendering: "use client" Doesn't, and the Build Shows It
"use client" still prerenders on the server. A probe build shows what ssr: false emits instead, and how useOwnedProducts keeps per-viewer UI off the static HTML.
Tutorial8 min read
create-next-app Ships TypeScript by Default. Here's Every Line It Writes.
The --typescript flag is a no-op in Next 16. The 24-option tsconfig, the gitignored next-env.d.ts that turns out not to matter here, and where the type check really runs.
Tutorial9 min read
A Health Landing Page Is a Lead Form With Rules Attached
The sections are the easy part. Three constraints a SaaS page skips: no clinical detail in the form, no person in the analytics, and a CSP that makes every tracker a commit.
Tutorial8 min read
How to Share a Supabase Project: You Share the Organization
There is no per-project invite below the Team plan. The four roles, the 24-hour invite, and why 271 lines of migrations beat a dashboard seat for most collaborators.
Comparison7 min read
Next.js vs. Tailwind CSS: They Don't Compete, and the Glue Is 5 Lines
Next.js routes and renders; Tailwind generates CSS. Measured on this repo: 876 static pages, one 15 KB gzipped stylesheet, no Tailwind config file.
Comparison10 min read
Next.js vs HubSpot: The Line Is the Lead Record, Not PageSpeed
HubSpot is a CRM with a CMS attached. What a Next.js storefront had to write instead: a Server Action, a CSP that blocks form embeds, and attribution with no person in it.
Tutorial9 min read
TypeScript Ignore Type Check: Four Scopes, Measured in One Repository
@ts-nocheck must be line 1, tsconfig exclude does not stop checking, skipLibCheck saved 0.2s, and ignoreBuildErrors deleted the only type gate this CI had.
Comparison8 min read
Next.js vs Ghost: Pick by Who Publishes, Not by Framework
Ghost is a publishing platform; Next.js is a framework. A comparison from a 361-post MDX blog beside a 111-product storefront, plus the link-graph defect only code could fix.
Comparison11 min read
Next.js vs Framer: The Line Is Accounts, Not Design Quality
Where a hosted builder stops: logins, gated downloads, pages derived from your own catalog. With the Lighthouse table this Next.js storefront measured.
Tutorial10 min read
Supabase Auth UI for React Is Archived: What We Shipped Instead
Maintenance mode since Feb 2024, archived Oct 2025. The 158-line Server Action file that replaced it here, and the 68 KiB it kept off four pages.
Tutorial9 min read
Next.js API Query Params: Read Them, Then Stop Trusting Them
request.nextUrl.searchParams is one line; the next twenty decide whether the endpoint is safe. Walked through one entitlement-gated route handler.
Tutorial9 min read
Convert CSS to Tailwind: Four Destinations, 133 Lines That Stayed CSS
Every declaration lands in one of four places. Measured on a 92-component port: 41 tokens, 96 arbitrary values, and 12 hex colors that duplicated a token.
Tutorial9 min read
Supabase MCP in Cursor: Your RLS Policies Do Not Apply To It
The connection runs SQL as `postgres`, which carries rolbypassrls. Measured against six RLS-enabled tables, plus the migration drift it surfaced immediately.
Comparison10 min read
LemonSqueezy vs Gumroad: Checkout Is the Cheap Part
Both take the payment. The difference is the delivery path you own — 1,547 lines here, the webhook guards that keep it safe, and the bug that grants nothing.
Tutorial9 min read
Next.js Custom Server: Five Jobs It Is Asked To Do, and Where They Belong
What ejecting costs, measured: 846 prerendered routes on the line, plus the five jobs people reach for a custom server for and the file that owns each.
Tutorial8 min read
shadcn/ui on React 19: Nothing Breaks, and That Is the Problem
Both the forwardRef and the ref-as-prop shape typecheck on React 19.2.4. Eight peer ranges measured today, and the cleanup copy-in leaves you owning.
Tutorial8 min read
Next.js Auth Middleware: Refresh in the Proxy, Authorize at the Data
The proxy keeps the session fresh; layouts and route handlers decide access. A 42-line proxy.ts and its matcher, run against 21 paths: 11 hit it, 10 skip.
Tutorial9 min read
shadcn/ui on Tailwind v4: Three Jobs, Only One of Them shadcn's
Tokens into @theme, the dark variant, then the components. Compiled selectors measured in a v4 repo: why :is() and :where() change your cascade.
Comparison8 min read
Headless WordPress Alternative: What 352 Posts Run On Instead
Three families of alternative, and the measured cost of dropping the CMS entirely: 352 MDX posts into 852 static pages in ~12s, plus what you give up.
Tutorial8 min read
Tailwind Properties: What 58 @property Rules Reveal in a v4 Build
Tailwind v4 classes set CSS properties and register --tw-* variables with @property. Read from a real 84 KB build: 58 rules, how translate and shadow compose.
Tutorial9 min read
PropTypes in React: Silently Ignored Since 19, and What Replaced It
React 19 removed propTypes for function components. Zero declarations across 92 component files here, one copy still in node_modules, and the three patterns that took over.
Tutorial8 min read
Next.js ISR: 846 Prerendered Pages, Zero revalidate Exports
ISR refreshes static pages without a deploy. This build prerenders 846 pages and exports revalidate zero times, because compiled-in data has no staleness to correct.
Comparison9 min read
Gatsby vs Qwik: One Moves the Data, the Other Moves the Hydration
Gatsby resolves data at build time; Qwik never hydrates. Measured against a build that chose neither: 846 static pages, no GraphQL, 24 of 92 components on the client.
Tutorial9 min read
React Email Builder: Visual Editor, React Components, or a Plain String?
A React email builder is three different products: an embedded editor, a component library, or a plain string. The question that decides which one you need.
Comparison8 min read
Gatsby vs. Bootstrap: One Builds the Pages, the Other Styles Them
Gatsby generates pages, Bootstrap styles them — they are not alternatives. Which job you are shopping for, priced against one build: 840 static pages, 84 KB of CSS.
Tutorial9 min read
Custom Checkout: What to Own, What to Rent, and the Bug That Charged Without Granting
A custom checkout is mostly data and button states, not a payment form. The 3 URL fields we set, 5 button states, and the variant-id mix-up that charges buyers and grants nothing.
Tutorial9 min read
Online Store Checkout: The Half That Runs After the Card Clears
An online store checkout is a form plus a webhook pipeline. The 8 checks our 287-line handler runs in order, and the six cases that would lose a paid order if skipped.
Tutorial11 min read
Next.js JSON-LD: One Component, Seven Schema Types, 472 Pages
One 19-line Server Component emits seven schema types across 472 pages. The escape most tutorials omit, and two blocks we ship knowing they earn nothing.
Tutorial12 min read
Next.js Canonical URLs: 15 Declarations, 472 URLs, None From the Request
A canonical is one line of metadata; deciding what collapses into it is the work. The facet URLs we never created, and two noindex pages that keep theirs.
Tutorial11 min read
Building a Next.js Storefront: The Four Parts, From Production Code
A Next.js storefront is a static catalogue, a hosted checkout, a signed webhook and a fulfilment check. The code, the Lighthouse numbers, and three defects we shipped.
Comparison12 min read
Firebase vs Prisma: One Replaces Your Backend, One Replaces Your Queries
Firebase replaces your backend; Prisma replaces your queries. Audited against 6 RLS policies, 6 SECURITY DEFINER functions and one TOCTOU bug that shipped.
Tutorial11 min read
Next.js 13 Folder Structure: 44 Files in app/, None of Them Components
27 pages, 4 route handlers, 13 metadata files in app/ — and not one component. The real tree behind 111 products and 337 posts, plus the rule that keeps it honest.
Tutorial7 min read
Next.js force-dynamic: What It Costs and When You Need It
One line turned a 112 KiB static page into a server render, 820 prerendered pages to 819. Measured in a real build, plus the 8 routes that go dynamic with no config.
Tutorial11 min read
React Image Upload: The Component, and the Resize After It
A controlled file input with preview and validation, the object-URL leak it hides, and the build-time resize that cut 110 covers from 15,102 KiB to 3,570 KiB.
Comparison12 min read
Firebase vs PlanetScale: One Is a Backend, One Is Only a Database
Firebase bundles auth, storage and functions; PlanetScale is MySQL alone. Audited against 271 lines of production SQL, 7 foreign keys and 8 CHECK constraints.
Comparison11 min read
Firebase vs PocketBase: Self-Hosting Behind a Serverless Front End
PocketBase is one Go binary with embedded SQLite; Firebase is a managed bundle. The axis nobody compares: what each costs when your front end holds no state.
Tutorial8 min read
React Hot Reload Not Working: Five Causes, Measured
Measured on Next 16.2.9: edits reach the page in 0.35–1.5 s. The five causes of broken React hot reload, including the CSP one tutorials skip.
Tutorial8 min read
Next.js 13 Authentication on Next 16: What Changed
Map every Next.js 13 auth step to Next 16: middleware is now proxy, cookies() is async, and getClaims() replaces unverified session reads.
Tutorial11 min read
Next.js env: Which File Wins, and Why Your Script Reads None
Measured on Next 16.2.9: the three .env files dev loads, which one wins, the build-time freeze, and the 500 every request throws when one is missing.
Comparison10 min read
Fathom vs Matomo: Who Runs the Server, and What It Costs Your CSP
Hosted or self-hosted is the real axis. The CSP cost of each, measured against a live policy, plus why script weight is the wrong thing to compare.
Tutorial10 min read
Tailwind Sizes: One Variable Behind 435 Uses of w-, h- and size-
Every numeric size is calc(var(--spacing) * n). Measured across 139 files: which families get used, the fractional steps, and the sizes that aren't classes.
Comparison12 min read
Firebase vs Convex: Where Authorization Lives
Rules in a DSL or logic in functions — judged on a shipped schema, including the check-then-act race that proved declarative rules can't hold an invariant.
Tutorial7 min read
Tailwind hover: 149 Uses, 59 Rules, and Why None Fire on a Phone
Tailwind v4 wraps hover: in a hover media query. Measured in a real browser, plus the recipe, the hover-only overlay bug and a troubleshooting table.
Tutorial10 min read
Supabase: permission denied for schema public — Which Gate Failed
Error 42501 fires before RLS runs. The four gates a Supabase query passes, the grants that fix the schema one, and the two this schema trips on purpose.
Comparison9 min read
Directus vs Hygraph: Who Owns the Database Decides It
Directus layers over your own SQL; Hygraph holds content in a federated graph. The axis that decides it, and why this blog's 326 posts run on neither.
Tutorial10 min read
Should I Use Next.js or React? A Component Census Answers It
Only 24 of 92 components here run in the browser. The ratio that decides the choice, plus two defects showing what a framework does and does not buy.
Tutorial10 min read
Shopping Cart Page Design: The Confirm Step Most Carts Skip
What each region of a cart page has to prove, a two-stage commit lifted from a real redemption picker, and the mobile reorder that needs no second button.
Tutorial7 min read
How to Add Items to a Cart with HTML and JavaScript (Safely)
A 70-line cart with data attributes, one delegated click handler and localStorage, then the production version of the same pattern from a real storefront.
Tutorial7 min read
Next.js: Get Query Params on the Server (and Validate Them)
Where searchParams is available in the App Router, where it is not, and the one-line guard that stops ?next= becoming an open redirect.
Tutorial7 min read
React Hook Form on React 19: What the Upgrade Actually Changes
React 19 absorbed the submission lifecycle, not the validation engine. The API-by-API split, five forms with no form library, and the a11y trap.
Comparison7 min read
Cypress vs Vitest: Which Defects Each One Catches
A browser runner and a Node runner, scored against seven defects this codebase actually shipped. Measured: 391 tests in 4.40s, and three bugs neither caught.
Tutorial7 min read
Tailwind focus-visible: 37 Uses, 28 focus:, and the Hover Trap
Where focus-visible: beats focus: in a real codebase, the ring recipe behind every CTA, and the invisible-overlay bug no variant can fix.
Tutorial7 min read
Creating a Navbar in React: One Boolean, Two Effects, One Tab-Order Bug
A React navbar from a real 200-line header: aria-expanded toggle, scroll lock, Escape to close, and why pointer-events-none left links tabbable.
Tutorial7 min read
getServerSideProps in Next.js 16: Where Each Piece Went in the App Router
The Pages Router function has no App Router export. Here is the mapping, using the dashboard, auth layout and notFound pages of a real Next.js 16 app.
Tutorial10 min read
React Bundle Size: The Framework Floor vs. the Part You Control
Bundle size is two numbers, not one. Measured here: a 195.2 KiB gzipped floor identical on every page, and the 68 KiB auth stack that used to sit inside it.
Tutorial10 min read
React Contact Form: Pick Who Sends the Mail First
React cannot send email, so the only real decision is who does. Three routes compared, plus the 40-line action this site runs — honeypot, reply_to and error hygiene.
Comparison9 min read
Cypress vs. Storybook: A Test Runner and a Workshop, Not Rivals
They overlap on one thing and solve different problems. What each catches, what browser binaries cost every CI install, and four defects here that neither would have found.
Comparison7 min read
CSS Modules Alternatives: What a 0-Module Codebase Ships Instead
Utilities, CSS-in-JS, BEM or native @scope: what each gives up. This repo has no module files and ships one 83 KB stylesheet (14.8 KB gzipped) for every page.
Comparison9 min read
Contentful vs. Storyblok: Who Composes the Page Decides Everything
Both are API-first headless CMSs. The real split is whether editors arrange pages themselves -- and what that costs your component layer.
Comparison9 min read
Convex vs. Prisma: Type Safety Was Never the Hard Part
Both give you end-to-end types. Neither stops a check-then-act race -- the CWE-367 defect this codebase shipped, and the SQL that fixed it.
Comparison8 min read
Convex vs. Turso: Reactive Backend, Edge SQLite, or Neither
Edge read latency only helps if reads block a request. Here they do not -- so the 68 KiB auth bundle was the real latency, and a regex fixed it.
Tutorial7 min read
TypeScript Ignore Next Line: Why This Repo Has One @ts-expect-error and Zero @ts-ignore
Suppress a TypeScript error on one line the safe way. Measured TS2578, TS2790 and ban-ts-comment output, the multi-line trap, and a cast that avoids the directive.
Tutorial9 min read
React Hook Form getValues: The Source Line That Explains Why Your Button Stays Disabled
getValues reads without subscribing — proven from the 7.89.0 source. Why that breaks a disabled button, when to use watch, and the useState gate this repo used instead.
Comparison9 min read
Bulma vs. daisyUI: One Card, Measured at 65.2 KB, 6.4 KB and 2.5 KB
The same card built three ways and weighed. Why Bulma ships the whole framework, where daisyUI's 6.4 KB actually goes, and the token cost both bring along.
Comparison8 min read
Bulma vs. Sass: Not a Choice, and the 40 KB Hiding in It
Bulma is written in Sass, so the real decision is precompiled or compiled. Measured: 65.2 KB down to 25.3 KB — with an 18.2 KB floor the theme layer makes mandatory.
Tutorial8 min read
Next.js as a Static Site Generator: 754 Pages in 8.8 Seconds, and Why We Skip Export
Use Next.js as a static site generator two ways: output export or the default build. Measured here: 754 prerendered pages in 8.8s, with 8 routes that need a server.
Tutorial9 min read
Supabase Cron Jobs: pg_cron, and Three Jobs This Backend Didn't Need
How to schedule with pg_cron — and the three nightly jobs an 8-migration commerce schema replaced with a rolling window, a foreign key and a pure function.
Tutorial8 min read
Supabase Google Auth in Next.js: One Server Action, Three Consoles
The Server Action, the shared PKCE callback and the three dashboard surfaces that actually break Google sign-in — including the trailing slash that cost us a redirect.
Tutorial8 min read
Supabase Generate Types: The Command, and When to Skip It
What supabase gen types typescript produces, and why one shipped commerce backend runs six tables and 271 lines of SQL with zero generated types.
Comparison7 min read
Angular vs. Tailwind CSS: Not Rivals — One Token File Styles 111 Products
Angular renders components, Tailwind generates CSS. Measured here: one 42-token Tailwind file styles 111 products across four frameworks in 14.8 KB of gzipped CSS.
Tutorial8 min read
Shopify International Markets vs One Price and a Merchant of Record
Eight Shopify Markets settings audited against a digital storefront: five are empty, VAT belongs to the MoR, and one currency fallback was printing a dollar sign that lied.
Tutorial8 min read
Supabase Cloud vs Self-Hosted, Audited Against One Shipped Project
What the managed platform owns and what stays yours: 271 lines of SQL and 102 of client code move; the advisor linter, the pooler and six dashboard settings do not.
Tutorial8 min read
Online Store 2.0 in Next.js: Sections, Templates and the Missing Editor
Shopify's four Online Store 2.0 ideas mapped to a shipped Next.js codebase: 33 organisms, typed metafield-style fields, one 14.8 KB stylesheet, and the editor you cannot port.
Tutorial9 min read
What Are Dashboards Used For? Four Jobs, Audited in a Shipped One
Monitoring, stating what a user has, offering actions, and auditing them. Which jobs a real 505-line dashboard does, and the two defects it took to get right.
Tutorial9 min read
Shopify Advantages, Priced in the Code You Write Without Them
Checkout, order records, apps, the admin: each Shopify advantage measured against the 1,545 lines of TypeScript and 271 of SQL it took to replicate a subset.
Tutorial10 min read
Ecommerce Process Flow: Six Stages, and the One Joint That Breaks
The six stages mapped to the files that implement them in a shipped store, plus the four failure modes that all cluster at one hop: order processing.
Tutorial8 min read
What Does Next.js Do? Five Jobs, Counted From a Real Build
Next.js routes, renders, bundles, runs server code and emits metadata. Each job checked against this storefront's build output: 425 HTML files, 8 dynamic routes.
Tutorial8 min read
Next.js 13 App Directory: What Changed by Next.js 16
The folder contract is unchanged, but six APIs drifted: async params, searchParams and cookies(), the proxy rename, and two changes that never warn.
Comparison9 min read
Website Builder vs Developer: The Row Nobody Prices
Six image findings worth 1.67s of load delay, three a11y defects that survived a Lighthouse 100, and the third path both options' marketing pages skip.
Tutorial8 min read
The Supabase Personal Access Token Is Not an App Credential
A PAT authenticates your account to the Management API, not your app to its database. The four credentials, which plane each sits on, and why this app ships three.
Tutorial9 min read
Next.js Config: 121 Lines That Set Exactly One Option
What belongs in next.config.ts and what doesn't, from a real storefront's 121-line config — 11 CSP directives, and the MDX plugin Turbopack silently drops.
Tutorial8 min read
Tailwind object-fit: 7 Uses, One Value, and Why object-contain Is Absent
object-cover 7×, object-contain 0×. The two patterns that establish the box, why gallery slides need object-top, and the wrapper mistake that breaks it.
Tutorial11 min read
Tailwind Translate: 16 Uses, and the One That Had to Be Inline
Centering, drawers and hover swaps across 8 components — plus the containing-block defect a no-op translate-x-0 shipped, and why a computed value can't be a class.
Tutorial8 min read
Supabase JavaScript: One Package, Three Clients, and the 68 KiB Every Page Was Paying
supabase-js, @supabase/ssr and the admin client, read from a real Next.js 16 storefront: 18 queries, getUser vs getClaims, and the lazy import that removed 68 KiB.
Tutorial8 min read
Where to Put Components in Next.js: 92 Files, None of Them in app/
The App Router routes special files, not folders — so the placement question is about one import path and one place to look, not about avoiding accidental routes.
Tutorial9 min read
React Caching: 2 useMemo Calls, and the One Cache That Mattered
Five caching layers, and the render layer is rarely the one that pays. Nine lines of module-scope promise removed a dozen round trips per page load.
Comparison9 min read
Strapi vs TinaCMS: Content in a Database, or Content in the Repo
One axis decides it. What content-in-git actually costs, measured at 282 posts — including the bundler defect that only exists on that side of the line.
Tutorial8 min read
A Website Requirements Checklist Where Every Line Can Fail
Seven requirements written as pass/fail acceptance criteria, each with the number this storefront actually measured — and the defects that changed the list.
Tutorial8 min read
Supabase: Canceling Statement Due to Statement Timeout
Error 57014 is almost never the timeout's fault. On Supabase it is usually a policy calling auth.uid() per row against an unindexed column — with the six-policy fix.
Comparison8 min read
Storyblok vs Tina CMS: Who Holds the Content, and Who Pays for Links
Both ship visual editing, so the feature grid hides the real trade. Git-backed means you build the content graph yourself — measured, with the defect that proved it.
Comparison8 min read
Strapi vs Payload CMS: Where the Content Model Lives
Strapi's GUI writes your schema; Payload's schema is TypeScript you review. That one difference decides the rest — measured against 391 tests and no CMS at all.
Comparison9 min read
Strapi vs Headless WordPress: Two Servers, One Unasked Question
Both put a server and a database between your pages and your words. Measured against a build that serves 702 static pages in 38s with no content server at all.
Tutorial8 min read
Admin Panel Design: The Contract a Comp Can't Show You
A dashboard tab switcher with three of six required ARIA parts, the fix that shipped, and what this site's 9 admin templates are actually built to solve.
Tutorial8 min read
What Is a Digital Store? Three Shapes, and What 'Owned' Actually Costs
Marketplace listing, hosted platform, or owned storefront: the four real files (75 to 373 lines) this site's entitlement engine and download route are built from.
Comparison8 min read
shadcn/ui vs. Mantine: Copy-In Primitives vs. a Batteries-Included Library
120+ components vs. 92 hand-rolled ones, and the two real ARIA defects this codebase shipped with that a component library would have caught on day one.
Comparison8 min read
shadcn/ui vs. Emotion: Zero-Runtime CSS vs. CSS-in-JS
Zero styling runtime vs. a render-time serializer, measured against 92 hand-built components, a 24/92 client-boundary ratio, and a CSP line Emotion wouldn't need.
Comparison9 min read
Sanity vs TinaCMS: Hosted Content Store vs Content in Git
The axis is where content lives. Plus the case where neither wins — 269 MDX articles and 470k words here run on a typed registry and a test, no CMS.
Tutorial9 min read
Supabase: Check If a User Is Logged In (getUser vs getClaims)
Three methods, one of which trusts an unverified cookie. Counted across this codebase: 14 getUser() calls, 3 getClaims(), and zero getSession().
Tutorial8 min read
Tailwind IntelliSense Not Working? It's Looking for a v4 Config
v4 has no tailwind.config.js, so every tool needs pointing at your CSS instead. Six causes, the Prettier pointer this repo sets, and the one that isn't tooling.
Tutorial8 min read
Tailwind Container in v4: What It Generates, and When to Override
The utility is width:100% plus a max-width per breakpoint — no centring, no padding. Read from v4.3.1's source, next to the 43 lines of CSS that replaced it.
Tutorial9 min read
Supabase + Zapier: Why This Storefront's Webhooks Skip It
Supabase has no native Zapier integration. Here's the signed webhook route and one atomic Postgres RPC this storefront uses instead, and why a Zap chain can't match it.
Tutorial8 min read
React: Passing Props, the Three Shapes This Codebase Actually Uses
Explicit named props, a full data-object spread, and forwarding the rest — 7 real spread call sites and Button's own default-parameter signature, from a 92-component codebase.
Tutorial8 min read
Next.js Partial Prerendering: 678 Static Pages, 8 Dynamic Routes, Zero PPR
A fresh build generates 678 prerendered pages and 8 dynamic routes. None of the 8 mix a static shell with a dynamic hole — which is exactly the shape PPR needs to pay off.
Tutorial8 min read
Is Tailwind Good or Bad? The Trade, Measured Against a Real Codebase
A real 19-class hero attribute, the 'keep every class' policy that keeps it that way, and the one compiled stylesheet — 81,866 bytes for 111 products — that pays for it.
Comparison8 min read
Sanity vs Headless WordPress: The Decision Is About Who Edits
Sanity gives you a schema in TypeScript and nothing to patch. Headless WordPress gives you an editor your team knows, and a PHP stack you still operate.
Comparison7 min read
Sanity vs Payload CMS: Hosted Content Lake or a CMS in Your Repo
Payload installs into your Next.js app, so content reads skip HTTP entirely. Sanity hands the 3am pager to someone else. Measured against a build with no CMS at all.
Tutorial8 min read
Webflow or Squarespace: The Gap Is Skill Required, Not Features
Squarespace is a finished product you fill in; Webflow is a design tool that hosts. The axis nobody checks during the trial is which way out you are choosing.
Tutorial8 min read
Dynamic React Components: The Four Shapes, and Which One You Need
Most guides show a string-keyed registry. This codebase's 92 components use three other shapes instead — a variant prop, selection state, and data that carries its own JSX.
Tutorial8 min read
Next.js Prefetch: What Fires on Viewport Entry, Not Just on Click
Link prefetches on scroll into view, before anyone clicks. This storefront keeps one href out of Link entirely because a prefetch there would burn a buyer's download quota.
Tutorial8 min read
Creating an Object From a TypeScript Interface: Literal, Spread, or Factory
Three call sites derive the same narrow WishlistEntry from a full catalog product, and none of them spread it. Here's why, plus the factory-function shape that spreading can't replace.
Tutorial8 min read
Tailwind v4 Config: Where It Went When tailwind.config.js Didn't
This repo has zero JS config files. All 42 design tokens live in a CSS @theme block, and the four-line PostCSS file is the entire build pipeline.
Tutorial8 min read
sh: tailwind: command not found — v4 Ships No Binary at All
Tailwind v4's package declares no `bin`, so npm links nothing. Measured in this repo: 26 entries in node_modules/.bin, none of them tailwind.
Tutorial10 min read
Supabase Deploy: Three Variables Decide Whether Any Page Loads
Eight migrations, seven dashboard settings a migration can't carry, and why a missing Supabase env var takes down 111 product pages instead of one.
Tutorial9 min read
An Ebook Download Landing Page Is Two Systems, Not One
The page converts; the download has to not leak. A 60-second signed URL, a private bucket, and the honeypot most ebook-page advice leaves out.
Tutorial9 min read
Migrating Off @supabase/auth-helpers-nextjs: Five Factories Become Two
Five client factories map onto two: createBrowserClient and createServerClient. The cookie adapter and getSession() are what find-and-replace misses.
Tutorial8 min read
React use client: Only 26 of 92 Components Need It Here
This storefront ships 92 components; only 26 carry "use client". What actually earns the directive, and the leaf-component pattern that keeps the rest server-only.
Tutorial8 min read
Supabase UI vs Hand-Rolled Auth: What 812 Lines Actually Buy
This storefront's auth stack is 812 lines of Server Actions, not the Supabase UI library. What the library would replace, and what it wouldn't touch at all.
Comparison8 min read
Vercel Analytics vs Matomo: Five Events, Zero Servers
This site's entire analytics surface is five typed events and one CSP entry. What Matomo's self-hosted depth would actually cost to run instead.
Comparison8 min read
LemonSqueezy vs PayPal: Merchant of Record vs Payment Processor
614 lines of LemonSqueezy integration compute zero sales tax, because LemonSqueezy is the merchant of record. What a PayPal-only checkout puts back on you.
Comparison9 min read
Resend vs AWS SES: Three Send Sites, Zero Email Packages
This storefront sends mail from three files, all of them one fetch call. What SES would change, what it would improve, and what neither vendor fixes.
Tutorial8 min read
Supabase Local Dev: The Codebase That Never Runs supabase start
Eight migrations, six RLS policies and 357 tests in 3.3 seconds — with no Docker and no local stack. What that buys, and exactly where it stops working.
Comparison9 min read
Lemon Squeezy vs Polar: 543 Lines, and Which of Them Survive
Both are merchants of record, so the tax question is settled. An inventory of the vendor-specific code in this storefront, and what a migration would cost.
Comparison8 min read
Supabase vs Turso: Four Platform Pieces, and Who Replaces Them
Postgres with RLS, auth and storage versus edge SQLite. An inventory of what a move off this storefront's Supabase stack would actually have to rebuild.
Tutorial11 min read
Supabase Migrations: Eight Files, and Four of Them Are Fixes
An audit of this storefront's eight commerce migrations — three create, five change or fix — plus the three habits that make one safe to re-run.
Tutorial8 min read
next/script: Three Scripts, Three Mechanisms, One CSP Bill
This layout loads three scripts and only one is a <Script>. A census of which mechanism each needs, and what every script costs your CSP.
Tutorial9 min read
Next.js File Upload: The Codebase That Ships Zero File Inputs
Four places an upload can live, compared — and the release pipeline this storefront uses instead, with the scanners that fail closed before it.
Comparison10 min read
TypeScript Interface vs. Class: One Interface, Two Implementations, One Class
This codebase has one interface with two implementations — the textbook case for a class — and reaches for a class exactly once, in a test file.
Tutorial8 min read
Next.js and TypeScript: What next build Actually Generates
This repo generates real route types on every build. What .next/types actually contains, and why this project still hand-writes its own params types instead of using the new helpers.
Tutorial9 min read
React with TypeScript: The Four Type Constructs Doing All the Work
139 typed files, 92 components, zero React.FC and zero any. The props pattern, the exhaustive union and the Record lookup that carry a production React app.
Tutorial8 min read
React JSX: The Rules That Only Break the Production Build
JSX compiles to function calls, not HTML. Where the two diverge, why a lowercase SVG tag survives dev and fails next build, and the key rule behind phantom state bugs.
Comparison9 min read
Fathom vs. Vercel Analytics: Portability, Priced
Both are cookieless with a one-line install. The difference is what happens when you leave your host, measured against this site's live CSP, event wrapper and Lighthouse run.
Comparison9 min read
Supabase vs. AWS: What Five Services Replace One Dependency
Supabase bundles Postgres, auth, storage and atomic RPCs behind one SDK. Mapped against this app's real files, here's what RDS, Cognito, S3 and Lambda would cost to assemble instead.
Comparison8 min read
Chakra UI vs. daisyUI: Which One Survives 68 Server Components
Chakra needs a client provider; daisyUI is a Tailwind plugin with zero JS. Measured against this codebase's 92 components and its own design tokens, only one can join the tree as-is.
Comparison9 min read
CSS Modules vs. Sass: Two Classes Say Neither Is Needed Here
CSS Modules scopes class names; Sass preprocesses them — different jobs, often combined. This repo's entire hand-written stylesheet has two custom classes, and one is dead code.
Comparison9 min read
Vue ref vs. reactive: A 33-State Census Says ref
reactive() cannot hold a primitive, and 30 of this codebase's 33 state values are primitives. Of the 3 objects left, 2 do the thing reactive() breaks on.
Tutorial8 min read
React Install: The 7.5 MB You Asked For, and the 734 MB You Didn't
npm ci on this storefront installs 633 packages and 742 MB. React is 7.5 MB of it — what the other 99% is, and which of the three install paths to pick.
Tutorial9 min read
Supabase Email Rate Limit Exceeded: Why This Codebase Doesn't Fight It
Supabase's built-in email provider caps auth emails project-wide. This codebase relies on that limit by design (R-13) instead of building a bespoke one — and builds one anyway, elsewhere.
Tutorial9 min read
ARIA in HTML: 13 Roles, and Why Not One More
This codebase's first rule of ARIA in practice: 13 role attributes across 9 files, each filling a gap HTML has no native element for — plus the live-region defect every form here used to ship.
Tutorial9 min read
Next.js Search Params: Three APIs, and the One This Codebase Uses
A Server Component prop, a client hook, and a Route Handler's own request object all read the same URL differently. This codebase's two real reads are both the third kind, for security reasons.
Comparison8 min read
TypeScript vs TypeScript + SWC: Two Jobs, Two Tools
SWC compiles fast and never type-checks; tsc does the opposite. This codebase's own tsconfig and a Turbopack defect it actually shipped show exactly where that split shows up in practice.
Tutorial9 min read
Tailwind Dropdown: One Real Menu, and a Second One Rejected in a Comment
This storefront has exactly one real dropdown, and its header explicitly rejected a second in a code comment. What DownloadMenu gets right that a div toggle usually skips.
Tutorial9 min read
Tailwind Position: 100 Instances, and the One Where relative Is Scoped on Purpose
44 absolute, 37 relative, 14 fixed instances audited — plus the scoped relative wrapper that stops a stretched card link from swallowing a neighboring button.
Tutorial9 min read
React Loading Spinner: 3 Instances, and 3 More Places That Skip It
Three components spin a Loader2 icon; three more swap button text instead and skip it entirely. The rule that decides between them, audited across this codebase's seven loading states.
Tutorial10 min read
Tailwind Padding: 432 Instances, and the One That Isn't a Utility
A census of every p-*, px-* and py-* in this codebase — 89 distinct values — plus why the site's page gutter lives in globals.css instead.
Tutorial9 min read
React Functional Components: 92 of Them, Only 24 Reach the Browser
Zero class components here. The split that replaced function-vs-class is 68 Server Components shipping no JS against 24 client ones that need state.
Tutorial8 min read
Tailwind Aspect Ratio: 22 Uses, Zero of Them aspect-video
Why this codebase writes aspect-[16/9] instead, and how the card's ratio has to agree with the img's width, height and the generated file's width.
Tutorial9 min read
process is not defined: Why One Line Works in Next.js and Throws in Vite
This codebase reads process.env 37 times, including in browser code, and never hits the error. What bundlers really do with it — and the prefix trap.
Tutorial9 min read
Tailwind Height: 139 Uses, Zero of Them Plain h-screen
This codebase's h-* utilities are mostly icon sizing. The one true viewport lock is h-[100dvh], not h-screen — because a static 100vh lies on mobile.
Tutorial8 min read
This Site Uses Zero HTML data-* Attributes. Here's What Replaced Them
114 aria-* attributes across 36 files carry every state hook this codebase needs. grep for data- in src/components and you get nothing back.
Tutorial8 min read
This Storefront Ships Zero Tailwind Plugins — Here's the 74 Lines Instead
No @plugin line in globals.css, no @tailwindcss/forms or typography. A hand-rolled container, marquee keyframes, and no-scrollbar cover what plugins usually do.
Tutorial9 min read
React: Pass a Component as a Prop, the Way This Codebase Does It 35 Times
Every icon on this site is JSX assigned to a data field, not a name looked up inside a component. 35 instances across 5 data files, one helper function pattern.
Comparison10 min read
Supabase vs Vercel: Both, and 42 Lines Where They Meet
Not alternatives. Vercel builds and serves 584 pages, Supabase holds the schema and the policies, and one 42-line proxy can take the whole site down.
Tutorial9 min read
React DevTools Shows 24 of This Site's 92 Components
Open the Components tab on an App Router page and the tree looks empty. 68 of 92 components ran at build time and never mount in a browser.
Tutorial9 min read
React Icons: 12 From a Library, 55 Written by Hand
One icon library, twelve imports, 55 inline SVGs — and the split falls exactly on the client boundary rather than on taste.
Tutorial9 min read
Tailwind Flex: 6 of 12 Utilities, 296 Call Sites
296 flex-utility call sites across 68 files use 6 of Tailwind's 12 flex classes — the other six, all per-child grow/shrink tuning, are never needed.
Tutorial9 min read
Next.js Components: 92 Files, Five Layers, One Client Boundary
Next.js names two component types. This codebase runs five layers across 92 files, and 79% of its client components live in just one of them.
Tutorial8 min read
Next.js UI Library Roundups List Five. This Site Uses Zero.
Zero of shadcn, Radix, MUI, Chakra or daisyUI in this package.json. 92 components run on Tailwind v4 tokens and one enforced import rule instead.
Tutorial9 min read
E-Commerce in React: The Storefront With No Shopping Cart
This storefront sells 113 products with zero cart code: one Server Action resolves a fixed-tier checkout, and a slot-based entitlement engine replaces the order.
Guide9 min read
Firebase Hosting Cost, Measured Against a Real 156 MB Build
Firebase bills $0.026/GB stored and $0.15/GB transferred. This storefront's 156.5 MB build uses 1.6% of the free storage tier — transfer is the line that bills.
Tutorial8 min read
forEach in TypeScript: 4 Uses Against 149 Maps
A census of a real TypeScript codebase: 4 forEach calls, 149 .map() and 137 for...of. What the four have in common, and the async trap that explains the ratio.
Comparison8 min read
Vite vs. Vue: A Build Tool and a Framework Are Not Alternatives
Vite builds, Vue renders, and most projects use both. The comparison that resolves is Vite vs. Vue CLI — plus which layer to blame when a build breaks.
Comparison9 min read
SvelteKit vs. Remix: Same Primitives, Different Component Bill
Both answer routing, data loading and form posts the same way. The divergence is what reaches the browser — and how much of a page you can avoid shipping at all.
Comparison9 min read
Qwik vs. Next.js: Resumability vs. Not Shipping the Component
Qwik ships near-zero JS through resumability; this site's RSC split already does that for 9 of 10 home-page sections. Where the real cost still lands: one accordion.
Tutorial8 min read
Building an HTML/CSS Navigation Bar (and the Bug That Hides It)
Six ingredients build an accessible nav bar — and this site's own mobile drawer shipped the pointer-events-none bug that leaves closed links keyboard-reachable.
Tutorial10 min read
Tailwind Font Weight: 9 Named Steps, 4 This Codebase Uses
193 font-weight utility calls across this codebase, spanning only 4 of Tailwind's 9 named steps — traced to two atoms that set the hierarchy once.
Tutorial9 min read
React + EmailJS: What Ships in Your Bundle vs. a Server Action
EmailJS ships its service ID, template ID and public key in your bundle by design. This storefront's contact form ships none of that — the two files that decide it.
Tutorial12 min read
DB Schema: Two Meanings, Six Tables, and 271 Lines of Postgres
In Postgres “schema” means both the structure and a namespace. Here is a real commerce schema — 6 tables, 8 migrations, and the four times it had to change.
Comparison10 min read
Next.js vs Create React App: 334 Prerendered Pages vs One index.html
Measured on this storefront: 334 HTML files from 27 route files, and 68 of 92 components that never reach the browser. Plus where a CRA-shaped app still wins.
Guide7 min read
Tailwind CSS License, Explained: One Free Framework, Two Paid Products
Tailwind CSS is MIT and free. The confusion is Tailwind Plus and a template's own EULA — three different licenses hiding under one name.
Tutorial8 min read
What Is CRM? The Definition, and the 9 of 111 Templates That Ship One
CRM means customer relationship management — audited against 9 of our 111 templates, from one dedicated CRM to a landing page that only markets one.
Tutorial9 min read
Tailwind Grid: 26 Files, and Not One col-span
A 538-page site's whole grid vocabulary is three utilities — plus the display:contents trick that reorders a product page on mobile without duplicating state.
Tutorial7 min read
Next.js Turbopack: 13.9s vs. webpack's 18.3s, Same Commit
A measured head-to-head on 538 pages, plus the config trap: Turbopack serializes options to Rust, so an imported MDX plugin now fails the build outright.
Tutorial9 min read
The Supabase Service Role Key Makes Your WHERE Clause the Policy
Read in one file, guarded by server-only, used at six audited call sites — and why dropping one .eq() returns every user's rows instead of none.
Comparison8 min read
shadcn vs. Tailwind Is a Category Error (One Runs on the Other)
92 components, 13 runtime dependencies, zero UI libraries — what hand-rolling actually cost this codebase, and the seven components shadcn would have handed over.
Comparison8 min read
Vercel vs. Firebase: Two Route Handlers Instead of a Function per Endpoint
This storefront's whole backend is 2 Route Handlers, 8 Server Actions and a 42-line Edge proxy — no Cloud Functions, no separate BaaS deploy.
Comparison8 min read
Firebase vs. Postgres: Six RLS Policies a Client Can Never Reach
Grep-verified: zero client components query a table directly, so this schema's six row-level-security policies defend a path the browser never uses.
Comparison8 min read
Vercel Postgres vs. Supabase: We Deploy on Vercel and Still Run Supabase
8 migrations, 6 RLS policies and one site-wide outage risk — why a Vercel-hosted storefront still runs Supabase for its database and identity.
Comparison8 min read
Vitest vs. Jest: 11 Lines of Config and 331 Tests in 2.48s
Measured on this repo: 31 files, 331 tests, 2.48s — and the `environment 3ms` line that explains most of the Vitest-versus-Jest gap.
Tutorial9 min read
React Dropdown: The Two Defects a useState Toggle Ships With
A production dropdown, defect by defect: why one `open` boolean breaks the click, and why the 8px gap has to be padding rather than margin.
Comparison9 min read
SolidJS vs. Next.js: You're Comparing the Wrong Two Things
SolidStart is the real comparison. 24 of 92 component files here ship client JS — the number that decides fine-grained reactivity against RSC.
Tutorial8 min read
Supabase User Management: 5 Server Actions and the JWT That Outlives a Deleted User
5 real Server Actions, an admin-client rule, and the one line that stops a deleted user's still-valid JWT from staying logged in.
Tutorial8 min read
Tailwind `display: none`: 6 Uses, and the Keyboard Bug That Needed `invisible` Instead
A real tab-order bug this codebase's own comments document, and why `hidden` couldn't have fixed it — `display: none` can't be part of a CSS transition.
Tutorial8 min read
Next.js Layout: 27 Routes, One Root Layout, and the One Reason a Second Exists
27 routes, 2 layout.tsx files, and 11 places that render the same header and footer independently — the one nested layout isn't for shared chrome.
Tutorial8 min read
Tailwind `group-hover`: 15 Plain Uses, 3 Named, and the Bug a Name Prevents
12 files declare a group, 3 need a named one — because their outer group already answers to a hover the inner one has to ignore.
Tutorial11 min read
Supabase Auth in Next.js 16: Three Clients, One Rule, and 68 KiB That Shouldn't Ship
Three Supabase clients, not one — and why every authorization decision here uses getClaims(), never getSession(). Plus the auth stack that reached every page.
Tutorial8 min read
Tailwind `inline-block`: 3 Uses in 257 Display Utilities, and What Replaced It
Counted every display utility in this codebase: inline-flex took 53, inline-block kept 3 — and all three are the same case, a vertical margin on inline text.
Tutorial9 min read
Is Next.js Frontend or Backend? 68 of 92 Components Never Reach the Browser
Both — and the split is countable: 8 Server Action modules, 4 Route Handlers, one HMAC verified over raw bytes, and no database, ORM or scheduler anywhere.
Guide9 min read
Supabase "New Row Violates Row-Level Security Policy": Zero INSERT Policies, On Purpose
Six tables, six SELECT-only policies, zero INSERT policies anywhere — the exact error this schema guarantees, and where writes actually happen instead.
Tutorial8 min read
Tailwind `!important`: 13 Uses in This Codebase, 12 of Them Provably Unnecessary
Compiled this project's own stylesheet to check — a plain leading-[1.2] would already win the cascade over text-3xl's paired line-height, no ! required.
Comparison8 min read
Laravel vs. Next.js: 897 Lines of Server Actions Where Eloquent Would Live
No ORM, no Artisan, no PHP anywhere — 271 lines of SQL and 897 lines of Server Actions doing what Laravel's migrations and controllers do instead.
Comparison8 min read
Next.js vs. Django: No Admin Panel, No ORM, 556 Lines of Hand-Built Dashboard
Django's admin panel is free and automatic. This storefront's buyer dashboard is three files, 556 lines, purpose-built instead of generated from a schema.
Tutorial9 min read
React Images: 26 `<img>` Tags and Not One `import`
1,160 image files, zero imported ones. The import-vs-string-path choice is really a choice about who verifies the path — and what you have to build once the bundler stops.
Tutorial8 min read
The Latest Next.js Version Is 16.3.4. This Repo Runs 16.2.9.
npm carries sixteen dist-tags for `next` and `latest` is only one of them. Which version to be on, measured from a repo that pins the framework and ships it to other people.
Tutorial9 min read
React Hooks: Why This Codebase's `useContext` Count Is Zero
24 useState, 13 useEffect, 0 useContext across 22 files — a real hook census, and the module-scope store pattern this codebase uses instead of Context.
Tutorial9 min read
HTML `<textarea>`: Auditing the Only One in This Codebase
One real <textarea> across 111 products, a honeypot beside it, and a silent mismatch between the field's missing maxlength and the server's 5,000-char cap.
Comparison8 min read
esbuild vs. Vite: What This Repo's Own Lockfile Says
Neither is a dependency here — but the Vite version vitest pulls in has already dropped esbuild for Rolldown, proven straight from the lockfile.
Tutorial9 min read
Web Accessibility Tools: Which Ones Caught This Site's Real Defects
Accessibility 100 on all 8 pages, and two real defects no scanner flagged. Four defects sorted by which tool found them — and why two were structurally invisible.
Guide9 min read
Is Tailwind CSS Worth It? 881 Class Attributes, One 78 KB File
Answered with three measurements instead of taste: 133 hand-written lines, 14 KB gzipped across 488 pages, and the AA contrast bug the token scale made easy to ship.
Comparison9 min read
Vite vs. Webpack: 488 Pages Built by a Repo Running Neither
Most comparisons assume you pick a bundler. On a framework you inherit one — and the two config lines this codebase writes anyway are where the real difference shows.
Tutorial8 min read
What's Actually in a Data Dashboard? 59 Views, Counted
9 admin templates, 59 dashboard views, audited from the catalog — what a coded data dashboard actually contains versus a BI tool.
Comparison8 min read
Vercel vs. DigitalOcean: What Owning the Server Actually Costs
Two Route Handlers, zero Dockerfiles, zero nginx configs — what this storefront's own deploy setup says about Vercel vs a DigitalOcean Droplet.
Tutorial8 min read
What Actually Builds a Landing Page? Ten Organisms, One Cut
Ten organisms, one deliberately unmounted, and a real LCP image bug — what actually builds a landing page, audited from the source file.
Tutorial7 min read
Inline Styles in React: 55 Uses, Audited From a Tailwind Codebase
55 inline styles across 21 files in a Tailwind-only codebase — audited by hand, each one tied to a runtime value or a non-CSS renderer.
Tutorial8 min read
Is React a Framework? 110 of 139 Editions Say Next.js
React ships no router, no data layer, no build step and no server. Settled with inventory: 139 framework editions across 111 products, and the 9 built twice.
Tutorial8 min read
What Is a Web Page Template? Two Products Share the Word
A hosted design you edit in a builder, and a source repo you own, are both called templates. What is actually inside one, from a catalog of 111.
Tutorial8 min read
What Is Supabase Used For? Four Things, in One Real App
Four things, precisely: auth, row-level authorization, private storage, atomic writes -- including the rate-limit race this app actually hit and fixed.
Comparison8 min read
React vs. Gatsby: The Real Question Is the GraphQL Layer
Gatsby adds a GraphQL data layer on top of React. This catalog imports typed data directly instead, with zero GraphQL and zero content plugins.
Comparison9 min read
Tailwind vs. CSS: 139 Components, One 133-Line Stylesheet
139 components, 881 classNames, one 133-line stylesheet: the exact 40 lines of hand-written CSS a Tailwind codebase still needs, and why.
Guide8 min read
Website Template Copyright: What You Own, What You Don't
Buying a template never transfers copyright in its code. What you actually own, plus the hardcoded footer year this codebase shipped unfixed for a month.
Tutorial9 min read
Next.js Link: 40 of Them, and 22 CTAs the Lint Rule Cannot See
no-html-link-for-pages reads literal hrefs on raw anchors, so it never saw this site's button atom. Plus the internal URL that must stay an anchor: /api/download.
Tutorial9 min read
Tailwind Button: 15 Utilities, 3 Variants, and Zero Buttons
The component called Button renders a link all 22 times it is used, while 44 real button elements sit elsewhere. The full class list, and the disabled state it was missing.
Tutorial10 min read
React Focus Trap: Two Dialogs Claimed aria-modal, One Meant It
An audit of four overlay surfaces: the wishlist panel that let Tab walk out of a modal dialog, the off-screen drawer pointer-events-none never hid, and the iframe case.
Tutorial8 min read
React + Tailwind CSS: The Config File Every Setup Guide Starts With Is Gone
v4 deleted the init command, the JS config and the content globs. What a real React setup is instead: one import, one PostCSS plugin, 879 class attributes, 133 lines of CSS.
Comparison9 min read
Supabase vs PlanetScale: 7 Foreign Keys Into a Table MySQL Doesn't Have
The dialect differences port. The 7 foreign keys into auth.users and 6 policies built on auth.uid() don't — inventoried line by line from this storefront's 8 migrations.
Tutorial8 min read
Supabase SQL Editor: This Schema Has Never Been Edited Through It
Studio's SQL Editor is built for one-off queries. Every schema change here shipped instead as one of 8 reviewed migration files — what each tool is actually for.
Tutorial8 min read
React Multi-Step Forms: 1 of 5 Form Components Here Needs One
Most tutorials assume a step-index useState pattern by default. This codebase's one real example is two states confirming an irreversible choice, not more fields.
Comparison9 min read
Next.js vs. Nuxt: 24 of 92 Components Opt Into the Client
Not React versus Vue — the real split is where each framework lets you draw the server/client boundary. Next.js draws it through the import graph; Nuxt's default is universal.
Tutorial10 min read
Email Signup Landing Pages: Where the Capture Point Actually Goes
Squeeze-page advice says strip the page to one form. Only 14 of 66 landing templates in this catalog do — audited against this storefront's own single, sitewide capture point.
Comparison9 min read
Astro vs. Remix: Two Opposite Rendering Defaults
Astro assumes a page is static until a component opts in; Remix assumes a route is a server request until it opts out. This build's own 452-static/8-dynamic split shows why that matters.
Tutorial10 min read
Is Webflow Good for Ecommerce? What the SKU Cap Actually Costs
Webflow's ecommerce plans cap items and charge a transaction fee on top. This storefront's entire commerce stack — entitlements, checkout, webhook — is 843 lines with no cap at all.
Tutorial10 min read
How to Learn Next.js by Reading a Real, Shipped Codebase
Courses teach the Next.js API in isolation. This walkthrough traces one real request through five actual files in a shipped storefront, linking to deeper audits at every stop.
Guide10 min read
Website Redesign Cost: What $3K–$250K Actually Buys, Audited From a Real One
Agency guides bracket redesign cost by page count. The real driver is content versus architecture — audited from this storefront's own 111-page copy rewrite: one commit, 32 lines of code.
Tutorial10 min read
Next.js on AWS: Amplify, Lambda, ECS or EC2 — 8 Routes Decide It
Amplify, Lambda via SST, ECS Fargate, or EC2 — AWS has no framework-aware default. This build's own 428 static and 8 Node-runtime dynamic routes decide which compute layer actually fits.
Comparison10 min read
Angular vs. Svelte: 7 of 24 Client Components Need No State At All
DI-injected signals versus a build-time compiler. Both assume a component needs a reactive primitive — 7 of this codebase's 24 Client Components prove a third of the time, it doesn't.
Tutorial9 min read
Tailwind Font Family: One next/font Import, 46,988 Bytes, Zero Google Requests
Tailwind's font-family utilities point at a CSS variable next/font has to define. One Outfit import, two self-hosted .woff2 files, 46,988 bytes, zero requests to Google's font servers.
Tutorial10 min read
What Is a Tailwind Class? 658 className Attributes, One Compiler Rule
A Tailwind class is a compiler-generated CSS rule that only exists because a literal string appeared in your source. Audited from 658 className attributes and 91 components.
Comparison10 min read
GitHub Pages Alternative: 420 Static Routes, 8 That Need a Server
GitHub Pages has no compute layer at all. The five alternatives worth naming, measured against this build's 420 static routes and 8 dynamic ones.
Tutorial10 min read
next-seo Is Obsolete: 28 Native Metadata Declarations, Zero Package
next-seo is a Pages Router package the native Metadata API replaced in Next 13. Zero dependency here, 28 metadata sources across 27 pages — the full migration mapping.
Tutorial10 min read
Next.js Order Confirmation: The Return URL Is a Convenience, the Webhook Is the Receipt
The return URL and the webhook are two independent HTTP calls in parallel. This storefront resolves the race by rendering the receipt only from Postgres rows the webhook wrote.
Comparison10 min read
React vs. Bootstrap: 74 KB of CSS for 420 Routes, Zero jQuery
React is a UI library, Bootstrap a CSS framework — the real fork is Tailwind vs. Bootstrap, measured against this site's single 74 KB stylesheet and zero jQuery dependency.
Tutorial10 min read
Next.js Error Monitoring: 41 console.error Calls, Zero APM
No Sentry, no instrumentation.ts — 41 structured console.error calls, an ALERT-marker convention, and the error-hygiene test that keeps server detail out of the browser.
Comparison9 min read
AWS Amplify vs. Firebase: Neither Bundled Backend Is What We Run
8 migrations, 6 RLS policies built on auth.uid(), and a write path that deliberately isn't rule-gated like either platform's default posture.
Tutorial9 min read
Robots.txt and Sitemap.xml in Next.js: One Declared Date, 420 Routes
The STOREFRONT_COPY_REVISED fix for a sitemap that told Google 111 pages changed on a date nothing did, plus the noindex-vs-disallow split this codebase actually uses.
Tutorial12 min read
Next.js Routing: 27 Page Files, 412 URLs, Three Conventions Unused
A census of one production app/ tree: which of the nine reserved filenames actually earn a file, and the 40 links, 13 redirects and 2 routers that move between them.
Tutorial11 min read
Next.js Error Boundaries: One File, and a Digest Nothing Read
One error.tsx covering 27 page files, no global-error.tsx, and a digest the boundary declared but discarded — the audit, and both fixes that shipped with this post.
Tutorial10 min read
Next.js Currency Formatting: Four Renderings, One That Lied
Four ways to print money in one codebase, and the fallback that stamped a dollar sign on any currency Intl could not parse. The audit, the fix, and the locale rule.
Guide9 min read
Next.js License Key: Why This Storefront Doesn't Have One
No key field anywhere in this codebase's entitlement types — ownership is a database row scoped to a session, checked fresh on every download.
Tutorial9 min read
Next.js CSRF Protection: 17 Actions Covered, 4 Routes On Their Own
Server Actions get automatic Origin-header CSRF checks. This codebase's 4 Route Handlers don't — a census of what actually protects each one instead.
Tutorial9 min read
HTML Nav: The Element, Not the Layout
A real production nav, from a 4-item desktop bar to a slide-out drawer — the aria-expanded toggle, the z-index stacking, and what a div-only navbar loses.
Tutorial9 min read
Collapsible HTML: Why This Codebase Skips the Details Element
Zero details elements across 91 components, and the CSS grid-template-rows trick FaqItem uses instead — plus when the native element is the right call.
Tutorial10 min read
A Podcast Landing Page Is a Registry, a Feed, and One CSP Line
Episodes belong in a typed registry, the feed is the actual product, and the player embed renders blank unless your Content-Security-Policy names its host.
Tutorial9 min read
Best SaaS Landing Pages: What 17 Real Templates Actually Ship
Not a gallery — a section-by-section census of 17 SaaS landing templates. Pricing, testimonials and integrations each appear in 10 of 17; the median product is 11 pages.
Guide9 min read
How Much Does a Grocery Website Cost? Price the Operation, Not the Storefront
The storefront half is solved and cheap. The grocery half — delivery slots, substitutions, live stock, weight pricing — ships in zero of the 35 shop templates here.
Comparison9 min read
Vercel vs Cloudflare Pages: Count the Routes That Need a Runtime
414 prerendered pages any CDN serves the same way, 8 dynamic routes, and exactly 2 that pin the Node runtime for node:crypto. Those two lines are the whole decision.
Tutorial7 min read
A Next.js CI Pipeline in 23 Lines, Timed Step by Step
Real per-step timing from a production run — 100 seconds total, cheapest checks first, no separate typecheck step because next build already does one.
Comparison7 min read
Vercel vs. AWS Amplify: The Bundled Backend Is the Real Question
13 runtime dependencies, zero AWS SDK packages, and a build that splits 392 static pages from 8 dynamic routes with no deployment config authored for either.
Comparison7 min read
Sass vs. Tailwind: 133 Lines and One Arbitrary Selector
Sass's four features, checked one at a time against this codebase's real @theme block, group-hover usage, and the single [&_selector] Tailwind still reaches for.
Tutorial10 min read
React Landing Pages: Half the HTML Isn't the Page
This storefront's home page prerenders to 436 KB, and 52.1% of that is a serialized copy of the render, not the page. What actually reaches a crawler before any JavaScript runs.
Guide10 min read
Landing Page Cost: The Page Is the Cheapest Line Item
The build is the smallest number in the project. Priced from a real page: ten components and 1,256 words, then four attachments and the two assets no licence includes.
Tutorial9 min read
Tailwind Design Tokens: 41 Declared, 22 Values That Went Around Them
41 tokens across three of Tailwind v4's 19 namespaces, and 161 utilities that spell a value literally instead. 22 of those literals were already a token in the same stylesheet.
Tutorial10 min read
React Password Reset: The Redirect That Exists Because a Render Can't Set a Cookie
Two routes, two Server Actions, and one redirect that exists because a Server Component render cannot write a cookie. Plus the enumeration answer that must not vary.
Tutorial10 min read
Next.js Server Actions: When You Need revalidatePath (and When You Don't)
Eight Server Actions in this codebase split cleanly on one rule: revalidate what stays, redirect past what doesn't. The one action that breaks the pattern on purpose.
Tutorial10 min read
React Form Validation: The Allowlist Is the Validation
Client-side checks are UX. The server-side function that reads three named fields and ignores everything else — proven by a test that smuggles in a fake user_id — is the actual gate.
Tutorial9 min read
Next.js Route Groups: Why This 24-Route App Uses Zero
Route groups hide a folder from the URL. Every one of this app's 24 top-level folders needs to be in the URL — which is the exact case they're not for.
Comparison10 min read
Vercel vs. Render: Does Anything You Run Need to Stay Running?
Two Route Handlers, both stateless, neither overriding the default timeout — versus a release script that clones, installs, and boots for minutes. That split is the real decision axis.
Tutorial9 min read
React Suspense: 376 Prerendered Pages, Zero Boundaries
Suspense buys streaming, and a page rendered at build time has nothing left to stream. Zero boundaries and zero loading.tsx here, plus the useSearchParams de-opt everyone reports wrong.
Tutorial9 min read
Auth in React: The Session Belongs in a Cookie, Not in Context
Six Server Actions, a 68 KiB auth SDK kept out of every initial bundle, and one line that decides the whole security posture: getClaims(), never getSession().
Comparison9 min read
Supabase vs Prisma: An ORM Cannot See Your Row-Level Security
Point Prisma at a Supabase database and your policies stop working — in one of two directions, neither the one you wrote. Our own six policies, audited against that.
Tutorial8 min read
Next.js Charts: The Bill Isn't the Library, It's the Boundary
Every chart library is a client component. What that actually costs, measured here: 42 KB gzipped across twelve routes, from a five-line constant nobody suspected.
Comparison8 min read
Next.js vs. Vue: The Reactivity Primitive You Don't Need
Vue's Composition API needs ref/computed for every stateful value, server or client. This storefront's 13 dependencies carry zero state library — here's why.
Tutorial8 min read
Next.js Pagination: The Threshold This Blog Blew Past by 3x
This codebase paginates nothing — /blog still renders 106 posts on one page, 3.5x past its own stated 30-post threshold. The searchParams pattern for when it's real.
Tutorial8 min read
Next.js Testing: 305 Tests, Zero Rendered Components
31 test files, zero jsdom, zero @testing-library — every assertion is a data invariant or a security boundary. What that catches, and what it can't.
Comparison8 min read
React vs. Remix: A Mismatched Pairing, and the Real Question
Remix runs on React — they aren't competitors. The real comparison is Next.js vs. React Router v7, and it comes down to which way the static default points.
Tutorial10 min read
React Toast Notifications: Five Live Regions That Announced Nothing
Zero toast libraries and five aria-live regions here — all five mounted with their first message, so none of them ever announced. The audit, and the atom that fixed it.
Tutorial10 min read
Next.js Trailing Slash: The Config Isn't Your Problem, the Env Var Is
344 prerendered routes, zero trailing slashes, and no trailingSlash config at all. The bug that did reach production came from one env var, and the one-line fix it now has.
Guide9 min read
Should I Hire a Web Designer? Six Defects a Comp Cannot Contain
Hire for direction, not for pictures of a decision you already made. Six real defects found on a site scoring accessibility 100 — none of them visible in any comp.
Guide10 min read
Website Maintenance Cost: Four Line Items, Three Decided Before Launch
Published ranges span $5 to $5,000 a month because they average across architectures. The four things that actually meter, itemised from a 551-package, 344-route build.
Comparison9 min read
Supabase vs. Convex: A Lock You Write vs. a Transaction You Get
Convex's transaction model would have prevented a real TOCTOU race this storefront hit in its Postgres download limiter. Why that's true, and why the fix stayed on Supabase anyway.
Tutorial8 min read
A Waitlist Landing Page Is One Server Action and a Honeypot
This storefront's real waitlist form: the Resend Audience API's deprecated field a copy-pasted snippet would miss, and firing one analytics event per successful subscribe, not per render.
Tutorial8 min read
Next.js Intercepting Routes: Why This Codebase Has Zero
Intercepting routes mask navigation to a route in your own app. This storefront's live-preview modal shows a cross-origin iframe instead — a real reason the pattern never fit here.
Comparison8 min read
Vercel vs. GitHub Pages: 344 Static Pages, 8 That Need a Server
GitHub Pages has no compute layer at all — not slower, absent. A fresh build of this storefront counts exactly which routes that categorically rules out, and why it isn't a rendering-mode question.
Tutorial12 min read
Tailwind Max Width: 62 Usages, 57 Arbitrary, and 96 Lost Pixels
max-w-* reads the --container-* scale in v4, and max-w-md is 448px, not 768px. A census of 62 usages here, plus the viewport band where our layout narrows as it widens.
Guide12 min read
Website Development Cost: Price the Artifacts, Not the Pages
332 prerendered routes from 27 page files. Why a per-page quote is unplannable, and the three line items estimates leave out: verification, the post-launch rework pass, content.
Comparison8 min read
Next.js vs. Angular: A Function Call vs. a DI Container
Angular needs a DI container before a component can fetch anything; a Next.js Server Component just calls a function. Measured from this storefront's 334-page static build.
Tutorial7 min read
React Lazy Loading: This Codebase Uses Zero React.lazy() Calls
This codebase has zero React.lazy() calls. What it actually lazy-loads — an explicit per-post import map and a conditional SDK import — and why that distinction matters.
Tutorial7 min read
A Next.js Calendar Grid, and the Timezone Bug It Has to Avoid
No calendar UI here, but this codebase already fixed the timezone bug that breaks most of them, twice. The UTC-safe date pattern, applied to a month grid.
Comparison11 min read
Gumroad Alternative: The Six Jobs You Take Back In-House
A hosted storefront does six jobs. Another one changes the fee; owning your storefront takes them back as code — 1,607 lines here, file by file.
Tutorial10 min read
Next.js Infinite Scroll: We Measured 111 Cards and Shipped One Grid
Our whole catalogue page is 485 KB of HTML that ships as 34.7 KB gzipped, with all 111 links crawlable. The measurement first, then the implementation.
Tutorial10 min read
Styling React Components: An Inline-Style Census of 91 Components
Four ways to style React, and the constraint that ranks them: CSS-in-JS needs a client boundary. Plus every inline style in this codebase, categorised.
Comparison9 min read
Supabase vs Appwrite: The Real Divide Isn't the Database, It's the Permission Model
Appwrite grants roles; Supabase evaluates a SQL predicate per row. An audit of what our own RLS policies would have to become as a Function instead.
Comparison9 min read
Next.js vs SvelteKit: Where a Write Is Allowed to Live
Bundle size is the wrong axis for a meta-framework choice. The real divide is routing defaults and whether a mutation can live anywhere or only on the route that owns it.
Comparison10 min read
Supabase vs Neon: Both Are Postgres, So the Database Isn't the Call
Six RLS policies, all built on auth.uid() — a function Postgres does not have. An audit of exactly which of our own code depends on the platform rather than the database.
Tutorial10 min read
The Next.js Bundle Analyzer Doesn't Run on Turbopack. Here's What Does.
ANALYZE=true writes nothing in Next 16, and the route table no longer prints First Load JS. The replacement, where it hides its output, and the 42 KB one constant was costing twelve routes.
Tutorial9 min read
Next.js Rewrites: Three Phases, and the Four We Turned Down
318 pages and zero rewrites, with the compiled manifest to prove it. What each phase beats, why our seven hub pages stayed files, and the 308 redirect nobody configured.
Tutorial9 min read
React Protected Routes: What a Server-Rendered Guard Does Differently
React Router's client-side wrapper isn't the only pattern. This codebase's redirect guard runs on the server, plus the open-redirect check most tutorials skip on the ?next= param.
Tutorial9 min read
A Tailwind Data Table Audit: One Real Table, Two Real Defects
The only <table> in this codebase, read cell by cell: what it gets right, the missing caption and text-free checkmarks it shipped with, and the fix.
Comparison8 min read
Playwright vs Vitest: Why This Repo Runs Both for Unrelated Jobs
Vitest is a committed dependency gating 305 tests on every push. Playwright is deliberately not a dependency at all — installed ad hoc for a script that runs a few times a year.
Guide11 min read
MIT License and Commercial Use: What 483 Dependencies Actually Oblige You To Do
MIT permits selling software built on it, unconditionally. The obligation is the notice — and this storefront's 551 packages show what that costs in practice.
Tutorial11 min read
Tailwind Breakpoints: 325 Variants, Two Dead Ones, and Three Different Seams
The default scale, how v4 custom breakpoints work in @theme, and what a census of one production codebase says about where the seams actually land.
Tutorial9 min read
Tailwind Container Queries: One @container, Zero Queries
Our own home page had the container context and none of the queries — so a card loses a third of its width at lg while its padding never moves. The arithmetic and the fix.
Tutorial10 min read
A React Sidebar in 60 Lines and Zero JavaScript
Sticky positioning without a scroll listener, aria-current for the active row, and the hard-coded active-state bug that only appears when you add a second page.
Comparison9 min read
React vs. Svelte: The Bundle-Size Argument Server Components Change
React ships a 221 KiB react-dom runtime; Svelte compiles it away instead. Why that gap matters less once Server Components mean most of a page never hydrates.
Tutorial9 min read
React Tooltip: When 38 aria-label Attributes Beat a Library
38 aria-label attributes, zero tooltip libraries. What this codebase actually uses to name icon-only buttons, and the one place a real tooltip earns its keep.
Tutorial8 min read
Next.js Redirects: Three APIs, and Why We Use Two of Them
Thirteen redirects, eight files, zero next.config.ts entries. Why every redirect() call here depends on auth state config-based redirects cannot see.
Tutorial9 min read
React Accordion: Two of Five WAI-ARIA Requirements, on a Page Scoring 100
Our own FAQ accordion had two of five WAI-ARIA requirements, on a page that already scored Lighthouse accessibility 100. The audit and the fix that shipped with it.
Tutorial12 min read
React Tabs: Six Requirements, and the Three Ours Was Missing
Our dashboard tabs had the roles and none of the wiring — no aria-controls, no tabpanel, no roving tabindex. The audit, why no scanner caught it, and the fix that shipped with this post.
Tutorial11 min read
Next.js Dynamic Routes: 251 Pages From Two Segments, and the Seven We Didn't Build
A dynamic segment is easy. Deciding which URLs deserve one is the work. Read from a real build: 288 prerendered pages, the dynamicParams asymmetry we found, and why seven hub pages stayed files.
Tutorial11 min read
Tailwind v4 Dark Mode: We Wrote 480 Variants and Shipped No Toggle
One @custom-variant line replaces darkMode: 'class'. Then you choose: dark: at every call site, or tokens under .dark. We picked the first 480 times — and found nothing can turn it on.
Guide12 min read
Ecommerce Site Cost: Four Decisions, Not a Quote
Agency guides price the build. The recurring bill is set by four architectural choices — and here they are itemised from a live storefront: 111 products, 288 static pages, 13 dependencies.
Comparison8 min read
Supabase vs MongoDB: The Question Isn't the App, It's the Dataset
Our 8,114-line, 111-product catalog is document-shaped — and lives in a typed array, not a database. The commerce layer is relational, on Postgres. Why the split decides, not the app.
Tutorial7 min read
Next.js Docker: The Standalone Output and the Env Var That Bites
output: "standalone" keeps the image small; the trap is that NEXT_PUBLIC_ vars are baked in at build time, not read at container start. This repo's own env-var warning shows exactly why that matters.
Tutorial7 min read
React UI Libraries: When Hand-Rolling 91 Components Actually Wins
This storefront ships zero UI-library dependencies across 91 hand-rolled components. The real tradeoff — bundle cost against accessibility coverage you skip rebuilding — measured against our own code.
Comparison7 min read
One-Time Payment vs Subscription: What the Webhook Handler Has to Know
Our entitlement engine is 75 lines with two status states; our LemonSqueezy webhook recognizes two event names. That's not a shortcut — it's the real cost gap between the two pricing models.
Tutorial9 min read
The Next.js not-found Page: What Actually Renders, and Why the Title Doesn't Change
notFound() throws rather than returns, so a try/catch upstream can silently swallow it. We rebuilt the site and read the generated 404 output to confirm what Next.js actually ships.
Tutorial7 min read
Tailwind Colors: What @theme Actually Overrides, and the Scale We Never Finished
Redeclaring a default Tailwind color name overrides it everywhere; a new name just adds one. This codebase's own token file shows both, plus a scale that was never built for error states.
Tutorial12 min read
React Skeleton Loaders: 91 Components, 3 Loading States, Zero Shimmer
An audit of every loading state in this codebase — the shaped placeholder that replaces a skeleton, and the derived-state trick that stops one flashing.
Tutorial11 min read
A/B Testing in Next.js 16: The Proxy Recipe Costs the CDN, Not SSG
Rewriting in middleware does not make your pages dynamic — both variants stay prerendered. What it really costs is the shared cache and every request's critical path.
Tutorial8 min read
Next.js Deployment: The Env-Var Mistake That Breaks Every Page
Static export can't run middleware, a restart isn't a rebuild, and a missing env var in a proxy file breaks the whole site on first request. Our own go-live checklist.
Tutorial8 min read
Real Estate Landing Pages Need One Section Generic Advice Skips
A filterable listings grid, agent profiles, and a valuation funnel — not a demo request. What a real-estate landing template actually ships, using our own catalog as the reference.
Tutorial8 min read
Skipping React Hook Form: What Four Real Forms Look Like Without One
Login, signup, password reset and contact all run on FormData, a Server Action and useActionState — zero form libraries in package.json. Here's the actual validation code.
Tutorial8 min read
React Modal, Zero Dependencies: The Iframe Focus Bug We Fixed
A real accessible React modal with zero dependencies — focus trap, ARIA dialog role, restore-on-close, and the iframe-focus-escape bug most modal libraries never mention.
Comparison9 min read
The Auth0 Alternative for a Postgres-Backed Next.js Stack
Six RLS policies, all for select, zero write policies anywhere. What authorization looks like when it's a property of the table instead of a service beside it.
Tutorial8 min read
React Carousel: Two Patterns, Zero Dependencies, One Bug We Fixed
A passive CSS marquee and a navigable translated-track gallery, both dependency-free — plus the missing prefers-reduced-motion guard this audit found and fixed.
Tutorial8 min read
We Grepped Our Own Meta Tags. 29% of Titles Ran Long.
187 prerendered pages, checked against the build output rather than the pattern: title and description lengths, what generates them, and where the trade-off is deliberate.
Tutorial9 min read
React Server-Side Rendering, Measured Against a Real App Router Build
A fresh build of this site: 246 prerendered routes, 8 dynamic ones, and the one live chat widget that still has to hydrate on the client.
Comparison10 min read
LemonSqueezy vs Stripe for Digital Products: Who Is the Seller of Record
The fee gap is $0.82 on a $39 order. What it buys is a tax registration you no longer hold — and one silent failure that charges the buyer and grants nothing.
Guide11 min read
A Website Launch Checklist Where Every Item Is a Command
Five commands, three greps, and the defects they caught on a site that already looked finished — including a licence page selling a tier that no longer existed.
Tutorial10 min read
An RSS Feed in the App Router, Without an RSS Library
One route file, force-static, and eight lines of helpers. RFC-822 dates, five escaped characters, and the absolute-URL bug that reached our production markup.
Tutorial11 min read
Which Environment Variables Reach the Browser, and When That Is Decided
We grepped the build: two public values in one client file each, three secrets in none. The trap is not the prefix rule but that the value freezes at build time.
Comparison11 min read
Monorepo vs Multi-Repo: 110 Products Across 113 Repositories
Choose by the boundary the customer receives, not by code sharing. The cost is not merging — it is the generated index, and ours already had four bad rows.
Guide11 min read
A Lighthouse Accessibility Score of 100 Is Not WCAG Conformance
The score is a claim about one URL. Three defects our own audit found only by measuring every page, three more no scanner reports, and a ten-minute test you can run before buying.
Tutorial12 min read
Role-Based Access Control in a React Dashboard: Three Layers, One Authority
Six row-level policies, all of them SELECT, and no write policy for any signed-in role. Where a permission decision belongs, and why the UI check is a comment.
Tutorial12 min read
Automated Product Screenshots with Playwright, 111 Templates Deep
The capture is four lines; deciding what is in frame is the work. Nav-driven page discovery, the is-this-the-product check, and the proxy bug that blanks every Chromium request.
Comparison14 min read
Server Components vs Client Components: Where the Boundary Actually Goes
24 of this site's 91 components are client components, and not one is an atom. The cost is never the component — it is the module graph it drags across the boundary.
Tutorial12 min read
Generative Engine Optimization: Building a Site AI Answers Can Cite
An audit of our own site against the standard, including the two places it falls short and the checklist item we deliberately do not ship. The unit of success is a passage, not a page.
Guide12 min read
Atomic Design in Next.js: The Import Rule That Does the Real Work
Naming five layers changes nothing. Ordering their imports changes everything — including where the client boundary lands, which on this site was never designed at all.
Tutorial11 min read
Next.js 16 Renamed Middleware to Proxy: What Changes and What Breaks
Renaming the file is a third of the migration. The exported function has to change too, keeping both files is a build error, and the proxy runs on Node rather than the Edge.
Comparison12 min read
WordPress vs Next.js for a Marketing Site: The Honest Comparison
Most comparisons pit a WordPress theme against a from-scratch Next.js build. Compare theme to template instead and the real trade turns out to be who edits the copy.
Guide13 min read
How to Customize a Website Template Without Blocking Its Updates
Rebranding a template is an hour. Keeping it mergeable when v1.3.0 ships is the part nobody plans for. Here is the edit order that keeps both possible.
Tutorial13 min read
Programmatic SEO in Next.js: Derive the Pages, Don't List Them
A hand-maintained slug list left 24 of our products on no category page at all, and nothing failed. Here is the derived hub-and-spoke build that fixed it.
Tutorial12 min read
Static Rendering in the Next.js App Router: What Silently Turns a Page Dynamic
Four App Router features opt a page out of static rendering with no error and no warning. The only place it shows is one character in the build output.
Comparison10 min read
Server Actions vs Route Handlers: The Caller Decides, Not the Task
Both are public POST endpoints. The choice is settled by three things only Route Handlers have: the raw body, a real URL, and the status code.
Guide13 min read
A Digital Product Refund Policy You Can Enforce in Code
A 14-day, no-download refund policy and the four-state engine behind it — including the attribution 'fix' that opens a download-then-refund bypass.
Tutorial11 min read
Transactional Email in Next.js That Can't Break the Purchase It Confirms
Two emails, opposite failure policies — and the fire-and-forget bug that sends mail perfectly in dev and silently drops it in production.
Tutorial11 min read
Storefront Search Without a Search Service
111 products, no search index. The predicate, the rule that stops results looking broken, and the bundle trade we took on one page only.
Comparison10 min read
Vercel Analytics vs Google Analytics 4: The Consent Banner Decides It
A banner-gated tool measures the subset of visitors who agreed to be measured. The cookieless trade, the typed event union, and the CSP origin we nearly added for nothing.
Tutorial13 min read
Gated File Downloads in Next.js: The Order the Checks Must Run In
Authenticate, verify, validate, authorize, rate-limit and record — then sign. The atomic limiter that closes the count-then-insert race, and what fails closed versus open.
Tutorial11 min read
Persisting UI State in localStorage Without a Hydration Mismatch
Prerendered HTML cannot know what one browser saved. An empty server snapshot, the getSnapshot cache that stops an infinite render loop, and why theme is the opposite problem.
Guide11 min read
How to Evaluate a Website Template Before You Buy: 10 Checks
Judge it on what you cannot fix after buying. Run Lighthouse on mobile, audit the inner pages, count the routes that actually exist — and read the licence for seats, not domains.
Tutorial10 min read
A Next.js Content Security Policy That Keeps Static Rendering
The documented nonce recipe turns every route it touches dynamic. The static-safe policy we ship instead, what 'unsafe-inline' really costs, and what the header still blocks.
Comparison10 min read
MDX vs a Headless CMS: Choosing by Who Writes the Posts
An editorial-workflow decision wearing an architecture decision's clothes. What MDX buys you in CI, the Turbopack plugin trap, and the four cases where a CMS simply wins.
Tutorial11 min read
A Product Image Gallery in Next.js That Google Can Actually See
Virtualizing a four-slide carousel removes three product images from the HTML. Mount every slide, starve the off-screen ones, and the ARIA that a carousel actually needs.
Guide10 min read
React vs Next.js Template Editions: Which One to Start From
Every other comparison asks which framework to build in. This asks which folder to open after you have bought the design — and why the licence usually covers both.
Comparison12 min read
Supabase vs Firebase for a Template-Based SaaS
Authorization is where they differ most and what you cannot change later. Row-Level Security vs Security Rules, the Server Component fit, and the 68 KiB our own auth SDK cost.
Guide13 min read
Migrating a Marketing Site to Next.js Without Losing Rankings
Change the technology or the URLs, never both. The redirect map, the internal-link diff that put 38 of our own pages in “Discovered — not indexed”, and the 90 days after.
Tutorial11 min read
An Accessible Mega Menu in Next.js Without a Headless UI Library
It is a navigation landmark, not an application menu — and the ARIA menu pattern most tutorials copy removes your nav from every screen reader's link list. Six behaviours, eighty lines.
Tutorial12 min read
Data Tables in Next.js: Virtualizing 10,000 Rows Without Losing the Server
Virtualization forces the table into a Client Component and hands back the sorting, filtering and accessibility the server did for free. The three options, and the hybrid worth using.
Comparison11 min read
Shopify vs a Next.js Storefront: What You Actually Inherit
Shopify's fee buys a checkout, tax handling and an ops backend — not hosting. The four jobs you take on by leaving, the headless hybrid, and when owning the frontend pays.
Comparison10 min read
Astro vs Next.js for a Marketing Site: We Measured the Difference
Both score 100 on desktop. We blocked every image on our own site and LCP moved 46ms — the mobile gap is React hydration, not bytes. What that means for the choice.
Tutorial12 min read
Product Variants in Next.js Without a Commerce Backend
Size and colour variants render fine from a typed file — until stock has to be authoritative. The option matrix, the URL-driven picker, the canonical, and where it breaks.
Tutorial13 min read
Next.js Image Optimization Without next/image: 255 KiB to 33 KiB
A closed image set does not need a request-time optimiser. The sharp build script, the plain-img markup, and the lazy LCP image that cost us 1.67s of load delay.
Comparison10 min read
Webflow vs Next.js for a Landing Page: How to Actually Decide
The launch-speed argument mostly disappears once you compare template to template. What is left is who edits the copy, what each locks in, and three cases where Webflow wins.
Tutorial11 min read
A Next.js Contact Form with Server Actions, Zod and Resend
No API route, no client fetch, and it still submits with JavaScript off. Validation, a honeypot, a rate limit that survives serverless, and the from-address trap that kills deliverability.
Tutorial11 min read
Dynamic Open Graph Images in Next.js with ImageResponse
A metadata route under a dynamic segment needs its own generateStaticParams, or every card renders per request. That trap, the Satori CSS subset, fonts, and how to verify a crawler sees it.
Tutorial11 min read
Scroll-Driven Animations in Tailwind v4 Without a JS Library
animation-timeline replaces the scroll-animation library category — behind two guards. The Tailwind v4 setup, the element you must never fade in, and when IntersectionObserver still wins.
Tutorial11 min read
Shopping Cart in Next.js 16: Where Cart State Should Live
A cookie, a database row, or React Context? The three cart architectures compared, the add-to-cart Server Action, and the badge that quietly breaks static rendering.
Tutorial10 min read
Product Filtering in Next.js: Why Filters Belong in the URL
Filters in useState cannot be shared, bookmarked, or server-rendered. How to read them from searchParams — and which filtered URLs to let Google crawl.
Tutorial9 min read
Product Schema in Next.js: JSON-LD That Earns Rich Results
Product needs only one of offers, review or aggregateRating — so a truthful offer qualifies you without inventing reviews. The shape, the validation, the manual-action trap.
Guide9 min read
Template vs Building From Scratch: An Honest Cost Breakdown
Four to nine weeks of UI work sits between an installed framework and a presentable app. What a template saves, what it does not, and when building wins.
Guide9 min read
Template Licenses Explained: What “Single Site” Actually Means
Commercial template licenses limit developer seats and end-user monetization — not domains. Here is how to read the clauses and pick the right tier.
Comparison12 min read
Next.js App Router vs Pages Router: Which to Use in 2026
The App Router is the default for new projects, but the Pages Router is not deprecated. Here is what actually changed and when migrating is not worth it.
Tutorial11 min read
Multi-Tenant Theming with Tailwind CSS v4 and CSS Variables
Tailwind v4 tokens compile to real CSS custom properties, so one build can serve every tenant's brand. The override pattern, contrast handling, and the pitfalls.
Tutorial12 min read
Building a SaaS Landing Page in Next.js 16 That Loads Fast
Static rendering, LCP on the hero, and a small client bundle — plus the accessibility bugs our own Lighthouse audit caught that code review missed.
Tutorial12 min read
How to Build an Admin Dashboard with Next.js 16 and Tailwind CSS v4
A working admin dashboard in Next.js 16 and Tailwind CSS v4 — App Router layouts, a CSS-first theme, an accessible sidebar, and the server/client split that keeps it fast.
Tutorial10 min read
Tailwind CSS v4 Migration: What Actually Changed, and How to Update
Tailwind v4 moved configuration into CSS and dropped tailwind.config.js. Here is what breaks, what the @theme block replaces, and the order to migrate in.
Tutorial8 min read
Dark Mode in Next.js and Tailwind v4 Without the Flash of Wrong Theme
The theme flash is a rendering-order problem, not a CSS one. Here is the blocking-script pattern that fixes it in a static Next.js app, with the full code.
Tutorial13 min read
Selling a Digital Product from Next.js with LemonSqueezy Checkout
Wire a Next.js app to LemonSqueezy end to end — hosted checkout, a signature-verified webhook, and the entitlement check that gates the download.
Comparison11 min read
Next.js vs React + Vite for Admin Dashboards: How to Choose
Both ship excellent dashboards. The decision comes down to where your data lives, whether you need SEO, and who deploys it — not to raw performance.
Comparison10 min read
Tailwind CSS v4 vs Bootstrap 5 for Dashboard UIs in 2026
A fair comparison of two mature CSS frameworks for admin UIs — component coverage, customization ceiling, bundle size, and the team each one suits.