Project #001

Building orange-street.com

What if you could build a professional website from scratch in a single day—with AI doing most of the work?

January 11, 2026·15 min read·intermediate

This is the first project from Orange Street—and it's about building the very website you're reading right now. Meta? Absolutely. Useful? We think so.

We wanted to create something that wasn't just another blog. We wanted a platform optimized for AI to both read AND write, with built-in distribution to every platform that matters. And we wanted to do it in a day.

Plan the architecture with AI

Before writing any code, we spent time discussing the architecture with Claude. We defined the post schema, block types, theme tokens, and distribution strategy—all in conversation.

"The best code is the code you think through before you write it."
— Dave Hurley

Create the Next.js project

We used create-next-app with TypeScript, Tailwind, and the App Router. Then added shadcn/ui for accessible components.

npx create-next-app@latest orangestreet --typescript --tailwind --eslint --app

Design the theme system

We created a comprehensive design token system with 150+ CSS variables. This makes the entire look and feel swappable—like changing a battery pack.

:root {
  --color-background: #f8f4ee;
  --color-foreground: #1b1a17;
  --color-primary: #1f3b5b;
  --font-heading: 'Source Serif', serif;
  /* ... 140+ more tokens */
}

Build the block system

Posts are made of blocks—like Notion or Jupyter notebooks. We created 16 different block types: text, code, steps, screenshots, callouts, tables, embedded videos, and more.

Block Type	Purpose
TextBlock	Prose paragraphs
CodeBlock	Syntax-highlighted code with copy button
StepBlock	Numbered instructions
CalloutBlock	Tips, warnings, notes
PullQuoteBlock	Emphasized quotes (great for Twitter)
TableBlock	Data tables like this one

Some of the 16 block types we built

Optimize for AI crawlers

We added llms.txt (like robots.txt but for AI), JSON-LD structured data, semantic HTML, and clean API endpoints that AI agents can consume.

Build distribution endpoints

Every post can be transformed into Twitter threads, TikTok video scripts, or newsletter HTML. The canonical post.json is the single source of truth—everything else is derived.

app/api/posts/[slug]/twitter/route.ts

// Transform post into Twitter thread format
export async function GET(request, { params }) {
  const post = getPostBySlug(params.slug);
  const thread = post.meta.keyPoints.map(
    (point, i) => `${i + 1}. ${point}`
  );
  return NextResponse.json({ thread });
}

And that's it. A complete website with AI-optimized architecture, modular theming, and built-in distribution—all built in a day with Claude.

Next week, we'll build something new. Subscribe to follow along.

Enjoyed this? Get the next one

New project every week. No spam.