My 2026 Tech Stack: The Tools I Use to Build Everything

After years of experimenting with different tools and frameworks, I've finally landed on a tech stack that lets me move fast without sacrificing quality. This is the exact setup I use to build everything from content sites to AI-powered SaaS products.

Every year, I audit my tools. What's working? What's slowing me down? What new tech has matured enough to adopt? This guide is the result of that 2026 audit — a complete breakdown of every tool in my stack and why it earned its place.

The Philosophy Behind My Stack

Before diving into specific tools, let me share the principles that guide my choices. The best tool is the one you actually use. Complexity is the enemy of shipping.

I optimize for three things:

1. Speed of development — How fast can I go from idea to deployed feature?
2. Maintenance burden — Will this cause problems six months from now?
3. Cost efficiency — Can I run this profitably as a solo developer?

These principles have led me to favor integrated platforms over stitching together multiple services, and modern tools that handle complexity for me rather than exposing every knob and dial.

Make it work, make it right, make it fast — in that order.

Frontend: Next.js 16 + React 19

The frontend framework is the foundation of everything I build. After using Next.js since version 9, I'm convinced it's the best choice for production React applications.

Why Next.js?

Next.js handles the hard problems so I don't have to:

• Routing — File-based routing with App Router is intuitive
• Data fetching — Server Components make async data simple
• Performance — Automatic code splitting, image optimization, font optimization
• Deployment — Zero-config deploys to Vercel

The React Compiler Changes Everything

React 19 shipped with the React Compiler, and it's been transformative. No more useMemo, useCallback, or memo wrappers cluttering my code.

1	function ProductList({ products, onSelect }) {
2	// Manual memoization everywhere
3	const sortedProducts = useMemo(
4	() => products.toSorted((a, b) => a.price - b.price),
5	[products]
6	);
7
8	const handleSelect = useCallback(
9	(id) => onSelect(id),
10	[onSelect]
11	);
12
13	return (
14	<ul>
15	{sortedProducts.map((product) => (
16	<MemoizedProductCard
17	key={product.id}
18	product={product}
19	onSelect={handleSelect}
20	/>
21	))}
22	</ul>
23	);
24	}

1	function ProductList({ products, onSelect }) {
2	// Just write the code you mean
3	const sortedProducts = products.toSorted((a, b) => a.price - b.price);
4
5	return (
6	<ul>
7	{sortedProducts.map((product) => (
8	<ProductCard
9	key={product.id}
10	product={product}
11	onSelect={() => onSelect(product.id)}
12	/>
13	))}
14	</ul>
15	);
16	}

Styling: Tailwind CSS v4

I've tried CSS-in-JS, CSS Modules, and plain CSS. Tailwind won because it makes styling decisions fast and keeps everything consistent.

Design Tokens Are Non-Negotiable

The key to using Tailwind well is building a proper token system. I define all my colors, spacing, and typography in globals.css:

1	@theme {
2	/* Colors - semantic tokens only */
3	--color-background: oklch(100% 0 0);
4	--color-foreground: oklch(10% 0 0);
5	--color-primary: oklch(55% 0.25 260);
6	--color-muted: oklch(96% 0.01 260);
7
8	/* Spacing - fluid scale */
9	--spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
10	--spacing-sm: clamp(0.5rem, 1vw, 0.875rem);
11	--spacing-md: clamp(0.75rem, 1.5vw, 1.25rem);
12	--spacing-lg: clamp(1.5rem, 3vw, 2.5rem);
13	--spacing-xl: clamp(2.5rem, 5vw, 4rem);
14	}

Why Semantic Tokens?

• Themes become trivial — change one value, update everywhere
• Consistency is enforced — no more "is it blue-500 or blue-600?"
• Dark mode is automatic — tokens switch based on theme

The Rule I Never Break

TypeScript: Strict Mode Always

TypeScript in strict mode catches bugs before they happen. I enable every strict option:

1	{
2	"compilerOptions": {
3	"strict": true,
4	"noUncheckedIndexedAccess": true,
5	"noImplicitReturns": true,
6	"noFallthroughCasesInSwitch": true,
7	"exactOptionalPropertyTypes": true
8	}
9	}

TypeScript Questions I Get Asked

Isn't strict mode annoying?

What about any types?

Do you type everything?

Backend: Supabase

Supabase gives me a complete backend without managing infrastructure. One platform handles auth, database, storage, and realtime.

What Supabase Provides

Guide

Building a SaaS with Supabase

Step-by-step guide to building a production SaaS application with Supabase, Stripe, and Next.js.

Deployment: Vercel

Vercel is the obvious choice for Next.js. Zero-config deployments, preview URLs for every PR, and excellent analytics.

My Deployment Workflow

From Code to Production

1. 1

   Push to GitHub

   Every push to a feature branch creates a preview deployment. I share these with clients for feedback before merging.

2. 2

   Preview and Test

   Vercel runs builds and checks. I use the preview URL to test on real infrastructure before merging.

3. 3

   Merge to Main

   Merging triggers a production deployment. Vercel's incremental builds mean deploys take seconds, not minutes.

Edge Functions for Speed

For API routes that need to be fast globally, I use Vercel Edge Functions:

1	export const runtime = "edge";
2
3	export async function GET(request: Request) {
4	const country = request.headers.get("x-vercel-ip-country") ?? "US";
5	const city = request.headers.get("x-vercel-ip-city") ?? "Unknown";
6
7	return Response.json({ country, city });
8	}

AI Tools: Claude + Cursor

AI has fundamentally changed how I write code. I use Claude for thinking and Cursor for coding.

Claude for Architecture and Planning

When I'm designing a new feature, I start with Claude. I describe what I'm building, and Claude helps me think through:

• Data models and relationships
• API design and edge cases
• Potential performance issues
• Security considerations

The hottest new programming language is English.

Cursor for Implementation

Cursor is VS Code with AI superpowers. The key features I use daily:

• Tab completion — AI-powered autocomplete that understands context
• Chat — Ask questions about my codebase
• Composer — Multi-file edits from natural language

Package Manager: Bun

Bun replaced npm and Node.js in my workflow. It's faster at everything:

• Package installation — 10x faster than npm
• Running scripts — Native TypeScript execution
• Testing — Built-in test runner
• Bundling — Faster than esbuild

1	# Install dependencies (blazing fast)
2	bun install
3
4	# Run TypeScript directly (no compilation step)
5	bun run scripts/migrate.ts
6
7	# Start dev server
8	bun dev
9
10	# Run tests
11	bun test

bun.sh

Bun Documentation

The all-in-one JavaScript runtime and toolkit.

Content: MDX + Native Next.js

For content-heavy sites, I use MDX with Next.js's native @next/mdx package. No Contentlayer, no Velite — just the basics.

Why Native MDX?

External content tools add complexity and build time. Native MDX:

• Works out of the box with App Router
• Supports React components in markdown
• Builds fast with Turbopack
• No external dependencies to maintain

Design: Figma

Figma is where I design before I code. Even for small features, I sketch in Figma first:

• Speed — Faster to iterate on designs than code
• Clarity — Forces me to think through states and edge cases
• Communication — Easy to share with clients

Project Management: Notion

Notion is my second brain. I use it for:

• Documentation — Technical specs, API docs, onboarding guides
• Planning — Roadmaps, sprint planning, feature specs
• Notes — Meeting notes, research, ideas

The Complete Stack

Here's everything in one view:

What I Don't Use (And Why)

Knowing what to avoid is as important as knowing what to use.

Redux

React 19's built-in state management with use and Server Components handles 90% of cases. For complex client state, I use Zustand — it's simpler.

Docker (for development)

Bun runs everything natively. I only use Docker for specific services that require it (like running Postgres locally).

CSS-in-JS

Tailwind is faster to write, easier to maintain, and has zero runtime cost. CSS-in-JS had its moment, but that moment has passed.

Prisma

Supabase's auto-generated TypeScript types from your database schema are good enough. Prisma adds another layer of abstraction I don't need.

Getting Started

Want to try this stack? Here's how to set up a new project:

Quick Start Guide

1. 1

   Create Next.js App

   Use the official create-next-app with Bun.

   1	bunx create-next-app@latest my-app --typescript --tailwind --app

2. 2

   Set Up Supabase

   Create a Supabase project and add your environment variables.

   1	NEXT_PUBLIC_SUPABASE_URL=your-project-url
   2	NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

3. 3

   Configure TypeScript Strict Mode

   Update your tsconfig.json with strict settings for maximum type safety.

4. 4

   Deploy to Vercel

   Connect your GitHub repo to Vercel. That's it — you're in production.

Final Thoughts

A tech stack is a tool, not a religion. What works for me might not work for you. The best approach is to:

1. Start simple — Add complexity only when you need it
2. Optimize for your workflow — Speed matters more than perfection
3. Re-evaluate regularly — Tools improve, your needs change

The goal isn't to have the best stack. It's to ship great products. The stack is just a means to that end.

Resources

Last updated: February 2026. I'll update this post as my stack evolves.