Under the Hood

The Tech Stack Behind This Website

Q: What framework does glenbradford.com use?

glenbradford.com is built on Next.js 16 with TypeScript and the App Router. It uses server components by default, with client islands for interactive elements like animations, search, and email capture.

Q: Why Next.js 16 instead of other frameworks?

Next.js 16 provides the App Router with server components, ISR for on-demand page generation, built-in API routes, and seamless Vercel deployment. The file-based routing system makes managing 250+ page.tsx files straightforward, and ISR keeps build times under 10 minutes despite 3,000+ pages.

Q: How does Tailwind CSS 4 work on this site?

Tailwind CSS 4 handles all styling through utility classes and CSS variables. The site uses a custom theme with CSS variables (text-foreground, bg-card, border-border) and amber accents. There are zero custom CSS files in the entire project.

Q: How does the site deploy?

Every git push to the master branch triggers an automatic production build on Vercel. The working directory has 34,000+ files (1.5GB), so git push only uploading the diff is critical. The vercel deploy CLI command is never used because it uploads the entire directory.

Q: What is Upstash Redis used for?

Upstash Redis provides serverless key-value storage for page view tracking, search query analytics, reaction counts, comment voting, and rate limiting. It uses an HTTP-based API that integrates perfectly with Vercel serverless functions.

Q: What role does Claude Code play in the tech stack?

Claude Code is Anthropic's CLI-based AI coding assistant that wrote virtually every file on glenbradford.com. Running up to 9 agents in parallel, it handles TypeScript, Tailwind, Next.js, and deployment. The CLAUDE.md file provides project-specific rules to ensure consistent output.

Q: How does ISR keep build times under 10 minutes?

Incremental Static Regeneration (ISR) means only 50 blog posts are pre-rendered at build time. Billionaire subpages, OG images, and ranking pages use generateStaticParams returning empty arrays, so they are generated on-demand when first requested. This reduces build time from 45+ minutes to under 10.

Q: What are server components and client islands?

Server components render on the server and send HTML to the browser with zero JavaScript. Client islands (marked 'use client') are interactive components like animations, search palettes, and forms. This pattern minimizes client-side JavaScript while preserving interactivity where needed.

Every Layer, Every Decision, Every Trade-off

How Next.js 16, TypeScript, Tailwind CSS 4, Vercel, Upstash Redis, and Claude Code work together to power 3,000+ pages with build times under 10 minutes.

3,000+

Pages

250+

page.tsx Files

<10 min

Build Time

Pre-rendered

The Stack

Six technologies chosen for speed, scale, and developer experience

Framework

Next.js 16

App Router with server components by default. React Server Components mean less JavaScript shipped to the browser. The file-based routing system makes managing 250+ page.tsx files intuitive. Dynamic routes with generateStaticParams allow hybrid static/dynamic rendering at scale.

•App Router with nested layouts
•Server Components reduce client-side JS
•ISR with dynamicParams for on-demand rendering
•API routes for serverless functions
•Built-in image optimization and prefetching

Language

TypeScript

Type safety across 250+ files prevents entire classes of bugs. When Claude Code generates a page, TypeScript catches mismatched props, missing fields, and structural errors before they ship. The investment in types pays for itself at scale.

•Strict mode enabled across the codebase
•Interface-driven component design
•Compile-time error catching saves hours
•IDE autocomplete accelerates development
•Type-safe JSON-LD schema generation

Styling

Tailwind CSS 4

CSS variables for theming (text-foreground, bg-card, border-border) create a consistent design system. Utility-first means no CSS files to manage. Every page looks cohesive without a single line of custom CSS. Amber accents tie everything together.

•CSS variable-based theming system
•Dark mode by default with amber accents
•Zero custom CSS files in the entire project
•Consistent spacing, typography, and colors
•Responsive by default with mobile-first utilities

Deployment

Vercel

Git-based deployment is the only way to ship at this scale. Every git push to master triggers a production build automatically. No CLI deploys, no manual uploads. The working directory has 34,000+ files and 1.5GB of node_modules, so git push only uploading the diff is non-negotiable.

•Git push triggers automatic production builds
•Serverless API routes for search and analytics
•Edge network for global CDN delivery
•Preview deployments on every branch
•Built-in analytics and web vitals monitoring

Database

Upstash Redis

Serverless Redis with zero configuration. Tracks page views, search queries, reaction counts, and comment voting. HTTP-based API works perfectly with Vercel serverless functions. Pay-per-request pricing means zero cost at low traffic, scales automatically at high traffic.

•Page view tracking on every route
•Search query analytics and autocomplete
•Reaction and voting systems
•Rate limiting on API endpoints
•HTTP-based API for Vercel compatibility

AI Development

Claude Code

Anthropic's CLI-based AI coding agent wrote virtually every file on this site. Running up to 9 agents in parallel means 9 developers worth of output. The CLAUDE.md file at the project root gives the AI all the rules it needs to ship consistent, production-ready code.

•CLI-based AI assistant for code generation
•Multiple agents running in parallel
•CLAUDE.md provides project-specific rules
•Handles TypeScript, Tailwind, and Next.js natively
•Code review, refactoring, and deployment

Architecture Decisions

The trade-offs that make 3,000+ pages viable

ISR Over Full Static Generation

Pre-rendering 3,000+ pages would take 45+ minutes on Vercel. Instead, only 50 blog posts are pre-rendered. Billionaire subpages, OG images, and ranking pages use generateStaticParams returning empty arrays. Everything else is generated on-demand via ISR with dynamicParams = true. Build time: under 10 minutes.

Build time reduced from 45+ min to under 10 min

Server Components by Default

Every page is a server component unless it needs interactivity. Client islands (marked with 'use client') are used only for animations (MotionWrappers), search (SearchPalette), email capture, and interactive widgets. This minimizes JavaScript shipped to browsers.

Minimal client-side JS, faster page loads

Client Islands Pattern

Interactive components like SiteNavBar, EmailCapture, and MotionWrappers are 'use client' components embedded in server-rendered pages. The page content is server-rendered HTML with small client islands for interactivity. Best of both worlds.

SEO-friendly HTML with targeted interactivity

Git Push Only Deployment

The working directory contains 34,000+ files (1.5GB with node_modules). Running vercel deploy uploads everything and consumes all bandwidth. Git push only uploads the diff (kilobytes, not gigabytes). This is enforced via CLAUDE.md and is a hard rule with zero exceptions.

Deploys in seconds instead of killing internet

CSS Variables for Theming

Tailwind 4 CSS variables (text-foreground, bg-card, border-border, accent) create a consistent design language. Changing the theme means changing variables, not hunting through files. Amber accents provide brand consistency across 3,000+ pages.

Consistent design across every page

Reusable Component Library

SiteNavBar, SiteFooter, EmailCapture, ExploreMore, MotionWrappers, ShareOnX. Every page assembles from shared components. When a component changes, every page updates. Consistency at scale requires composability.

One change updates hundreds of pages

By the Numbers

3,000+

Pages

Total indexed pages

250+

page.tsx Files

Unique page components

<10 min

Build Time

Vercel production build

Pre-rendered

Blog posts at build time

2,950+

On-demand

Pages via ISR

Minimal

Client JS

Server components first

git push

Deploy Method

Automatic via Vercel

130+

Commits

And growing daily

How It All Connects

The flow from code to production

Code with Claude Code

AI writes TypeScript + Tailwind in page.tsx files. CLAUDE.md provides project rules. Multiple agents run in parallel for maximum throughput.

Stage & Commit via Git

Specific files are staged (never git add -A). Each commit describes what changed. The git history is the changelog.

Push to Master

git push origin master uploads only the diff (kilobytes). Vercel detects the push and starts a production build automatically.

Vercel Builds & Deploys

Next.js 16 builds pre-renders 50 blog posts. Everything else uses ISR. Serverless functions deploy. Build completes in under 10 minutes.

Users Hit the Edge

Vercel's edge network serves pages globally. ISR pages are generated on first request and cached. Upstash Redis tracks views and analytics.

Frequently Asked Questions

What framework does glenbradford.com use?

glenbradford.com is built on Next.js 16 with TypeScript and the App Router. It uses server components by default, with client islands for interactive elements like animations, search, and email capture.

Why Next.js 16 instead of other frameworks?

Next.js 16 provides the App Router with server components, ISR for on-demand page generation, built-in API routes, and seamless Vercel deployment. The file-based routing system makes managing 250+ page.tsx files straightforward, and ISR keeps build times under 10 minutes despite 3,000+ pages.

How does Tailwind CSS 4 work on this site?