How We Built This Website with Claude Code

A year ago, I was afraid of the terminal. Today I'm deploying a production website to Google Cloud, building animated videos with React code, running a headless CMS with automated content workflows, and pushing code to GitHub at 1am.

This article is the behind-the-scenes walkthrough. Not a tutorial, not a product pitch - just how we actually built this thing, what we learned, and why the architecture matters more than any single tool.

Why Lovable Hit a Ceiling

Our first website was built with Lovable. It was good. Genuinely good. You describe what you want, the AI builds it, and within minutes you have something that looks professional.

But after a few months, three problems became impossible to ignore.

First, Google couldn't read our pages. For a marketing team, that's not a limitation - it's a deal breaker. We had a beautiful site that was invisible to search engines.

Second, there was no CMS. Every content change meant going back into the builder. No structured data, no content types, no workflows. Our blog was a static page. Our SEO metadata was an afterthought.

Third, we didn't own the stack. We couldn't connect it to GCP. We couldn't run scheduled automations. We couldn't build a content pipeline or hook it into our internal tools without a developer. The platform controlled what was possible, and what was possible had a hard ceiling.

Lovable is great for fast iterations while we were figuring out our positioning, and marketing angles, but it only went that far, and we needed architecture that compounds over time.

The Stack We Chose

We rebuilt from scratch on a stack we control end to end:

• Next.js + React 19 — Server-side rendering, so Google reads every word
• Strapi 5 — Headless CMS with structured content types, an API, and full editorial control
• GCP Cloud Run — Containerized deployment with Cloud Scheduler for automations

The workflow is simple. Our senior dev set up the initial git repo and Strapi schema. I build with Claude Code locally — components, pages, animations, content workflows. I commit and push to GitHub. The senior dev reviews and merges. Two people and an AI replaced what would have been a five-person web agency engagement.

The architecture is meant to be simple. Every choice was made because it unlocks something: Strapi gives us content automation. Cloud Run gives us scheduled jobs. Next.js gives us SEO. Together they compound.

Claude Code as the Development Team

Let me be direct about what working with Claude Code actually looks like, because the conversation I often see is very skewed by the person commenting.

I open a terminal. I describe what I want in natural language. Claude Code reads my session logs, understands the existing codebase and architecture, writes the code, and explains what it did. I review it locally, test it, commit and push. That's the loop.

What makes it feel like magic isn't just the AI, it's the context system and the ability to bring in new reusable "Skills" at will.

I won't go into the technical aspect of how Claude works: CLAUDE.md files, project conventions, file structure, and design systems — it's really not my strong suit. It also doesn't need to be.

What it needs is clear guidelines to the vision and proper planning, which it can help you with, provided you know what you want.

You can either create your own skills, use Anthropic "house" skills, or search online and find skills others created for things like frontend design, SEO optimization, video rendering and more. It all crosses over across conversations so you always have these skills ready to go and available to call on.

This is why I dove in despite dreading the terminal. Flowpad is a product built on skills and structured context. I had to use Claude Code to understand what we were building and how it can help other builders. The fear lasted about a week. Then it became the most productive tool I've ever used.

I don't write code line by line. I direct. I review. I make architectural decisions and let Claude handle implementation. When it gets something wrong — and it does — I catch it in review, and our senior dev catches Claude's mistakes in his review.

What We Built

Scroll-Driven Animations and Design Craft

The website you're browsing has a blueprint aesthetic — monospaced type, technical dividers, accent lines that feel like engineering drawings. None of this came from a template.

Every animation on this page was custom built through Claude Code with my guidance. The TraceLine components that draw as you scroll. The staggered reveal sequences. The intersection-observer-driven fade-ins. I described what I wanted — "a line that draws itself as the user scrolls down, like a blueprint being drafted in real time", and Claude Code built it.

We went through dozens of iterations. Some were pretty bad. Some were smart ideas that didn't work in practice. But the feedback loop was fast, and with the ability to add more skills like "frontend aesthetics" and "frontend design" — describe, review, adjust, commit — that iteration was practically free. High-quality reviewed skills are abundant. I could try ten approaches to an animation, create preview pages for each one, and deploy what I like the most.

Remotion for Video Creation

This one was a genuine feeling of unlocking a new superpower. Create animations and videos at will, iterated in real time with the Remotion Studio alongside Claude Code. Remotion lets you create videos using React components. Your code renders to video, and as Claude Code is really good with code, it basically means you can create and edit any video component you want and seamlessly integrate it into the website with your design completely matching. I was in utter disbelief until I saw it work.

It does work. We're building demo videos, product walkthroughs, and animated explainers entirely in code. Claude Code writes the Remotion compositions - the scenes, the timing, the motion sequences - and we render them locally. No After Effects. No video editor. No freelance motion designer.

The real power is that these videos live in our codebase. They're version-controlled. When we update the product UI, we can re-render every demo video with one command instead of re-shooting everything. For a small team, this is a huge money and time saver.

SEO, AEO, and Intent-Based Content

This is where the CMS architecture + Claude Code really pays off.

We built a new content schema around intent, not keywords. Every blog post in Strapi has a primary_intent field — the real question the reader is trying to answer. It has target_queries — the actual phrases people search. It has voice — which team member is writing, because a builder's perspective is different from an architect's.

It's structured data that helps Claude Code write content that matches what people actually search for, and it helps search engines understand what our content is about. We built pillar pages with MUM-optimized architecture — structured so that both Google's algorithms and AI answer engines can parse our content as authoritative source material, removing a lot of the manual editing.

Google can now read every page. Our structured data generates rich snippets. Our content shows up in AI-generated answers because it's built to be machine-readable from the ground up — the exact opposite of what we had before.

None of this would have been possible with Lovable. Not the structured CMS. Not the intent-based schema. Not the programmatic SEO. The architecture made it possible, and Claude Code made it practical for a non-engineer to build.

Scheduled Automation and Workflows

The website is the visible layer. Under the hood, we run automated workflows on GCP.

A daily social news brief fires every morning via Cloud Scheduler. It triggers a Cloud Run Job that searches for relevant hot topics across social media related to our content pillars. Once a week it processes articles through a multi-agent pipeline and assembles a formatted brief that lands in my inbox every Sunday morning. I know what happened in our space daily and weekly with zero manual work. I used to pay a content curation service for exactly this.

We built this pipeline with Claude Code. The skills system means each step is a documented, versioned procedure. When the date extraction was wrong, we didn't debug a black box, we fixed the specific skill and it stayed fixed. When we needed to add a new content pillar, we updated the configuration and the whole pipeline adapted.

This is what I mean by the stack compounding. Each layer — the CMS, the deployment platform, the automation tooling, the skills system — amplifies every other layer. A content schema change in Strapi cascades into better automated briefs, which inform better blog posts, which generate better SEO results. The architecture does the compounding. We just keep building on it.

The Real Lesson

The tool is not the point. Claude Code is remarkable, but if we'd used it to build on a platform we didn't control, we'd have hit the same ceiling we hit with Lovable. The stack is the point. A headless CMS. A real deployment pipeline. Structured content. Scheduled automation. Infrastructure you own.

Our team for this website is two people. A GTM lead who directs Claude Code and a senior dev who reviews the commits. That's it. We have a production website with server-side rendering, a headless CMS, animated video generation, automated content workflows, scheduled jobs on GCP, and an SEO architecture that's purpose-built for the AI search era.

A year ago, this would have required a web agency, a design team, a content team, and six months. We built it in weeks.

Pick the architecture that grows with you. The tools will keep getting better. The stack is what compounds.