[KongchangAI]
· 3 min read· 1,826 words

Ex-YouTube Engineer Rebuilds YouTube in 45 Minutes with AI: A Zero-Code Walkthrough

Ex-YouTube Engineer Rebuilds YouTube in 45 Minutes with AI: A Zero-Code Walkthrough

Ex-YouTube engineer rebuilds YouTube in 45 minutes using AI Agents without writing a single line of code.

Veteran engineer Mike, who helped build YouTube at Alphabet, used Cursor and Codex AI Agent tools to reconstruct a working YouTube prototype called "CatTube" in under 45 minutes with zero handwritten code. The stack spans Next.js, Supabase/Postgres, Cloudflare CDN, Fal.ai video generation, and Vercel deployment. Multimodal embeddings with pgvector power search and recommendations inside Postgres itself. The key insight: with managed services, clear product decomposition, and a human serving as tech lead, individual developers can achieve order-of-magnitude efficiency gains — while the judgment of what to build vs. outsource remains irreplaceably human.

Three Years of Engineering vs. 45 Minutes of AI Replication

Mike, a veteran engineer who worked at Alphabet and helped build YouTube.com, did something provocative in a recent demo: he rebuilt a functional YouTube prototype in under 45 minutes without writing a single line of code, using AI coding tools. He noted that building the modern version of YouTube as a Staff Software Engineer at Alphabet took over three years — yet today, with Agent tools, anyone can recreate the core experience in a fraction of the time.

The value of this demo isn't in "rebuilding YouTube" per se — the real heavy lifting, like video transcoding and large-scale recommendation systems, was cleverly sidestepped. Rather, it clearly illustrates the current capability boundaries and collaboration patterns of AI-assisted development. Mike positioned himself as a "product manager + tech lead," responsible for giving clear instructions while leaving the actual implementation to the Agent. This is the most realistic way to use AI coding tools today.

He was also candid about the limits: fully autonomous agents that can "build a product, populate data, deploy, acquire users, and run ads" end-to-end are still one to two years away. What's possible now is breaking a complex product into smaller pieces and handing each piece to an Agent.

Tool Stack: A Pragmatic Combination from Cursor to Postgres

The tools used throughout the demo are worth examining on their own, as they reflect the technical choices a senior engineer would make today:

  • Agent coding tools: Cursor and OpenAI Codex used interchangeably — Cursor in an IDE form, Codex for generating interfaces
  • Frontend framework: Next.js (TypeScript + React), rather than the Polymer and Web Components YouTube originally used — Mike bluntly said those technologies "didn't stand the test of time"
  • Database: Postgres (hosted via Supabase), with Drizzle as the ORM
  • Image and video hosting: Cloudflare's CDN and video player
  • Content generation: Fal.ai aggregating multiple models — GPT image 2.5 for thumbnail generation, H3 Max Turbo for short video generation
  • Authentication: Better Auth
  • Deployment: Vercel (built by the company behind Next.js)

The core philosophy of this stack is: "use managed services wherever possible, don't build your own." The "giant machinery" of YouTube's backend — video transcoding, streaming distribution — was outsourced entirely to Cloudflare, keeping the project's complexity within what one person can manage.

Screenshot to Code: Three Strategies for UI Reconstruction

Mike's approach to rebuilding the homepage and watch page is quite representative. He first used GPT image 2.5 to generate a UI mockup of "CatTube" (a cat-themed YouTube), then handed the image to an Agent for implementation. When it comes to "image-to-code," he compared three approaches:

  • Figma: The mainstream tool for designer-engineer collaboration in real-world companies
  • Penpot (pen.dev): A self-hostable Figma alternative that can connect to your own LLM
  • Feeding the image directly to an Agent: Bypasses all external services, and works exceptionally well for well-known products like YouTube

Next, we're going to pretty much replicate what we did with the homepage.

He ultimately chose the third option — because every major model already "knows what YouTube looks like," and even a text description alone is sufficient. In practice, Codex produced a well-structured homepage with colors close to real YouTube in about a minute; Cursor implemented the code and not only completed the desktop layout but also automatically adapted it for mobile. The watch page, being able to reuse many components from the homepage, came together noticeably faster — the sidebar defaulted to hidden, the video player and other elements all landed correctly on the first pass.

Bringing a Static Site to Life: Database and Content Generation Pipeline

A static page alone isn't enough. Mike then migrated the static data into Postgres and had the Agent auto-generate an editable admin dashboard. He specifically demonstrated the Agent's "Plan Mode": for complex tasks involving schema design, data migration, and admin panel construction, you first have the Agent output a full plan for human review before execution.

having a third party with a very good content delivery network

The truly interesting part was the content generation pipeline. He created convincing cat videos in three steps: an LLM generates video titles, creative concepts, and metadata → an image model generates thumbnails based on that → the thumbnails then drive the H3 Max video model to generate 5–15 second short videos, all uploaded to Cloudflare. The reason for doing thumbnails first: "you need them anyway, and they give you more control over the final video."


Drizzle ORM is a database query tool that has risen rapidly in the TypeScript ecosystem in recent years. ORM (Object-Relational Mapping) lets developers describe database structures using programming language objects and types, without writing raw SQL. Drizzle's distinguishing feature is being "type-first" — schema definitions are TypeScript types, and query results have automatically inferred types, making it a natural fit for TypeScript projects like those built with Next.js. Compared to the established Prisma, Drizzle generates SQL closer to native, with lower runtime overhead, making it a popular choice for performance-conscious full-stack projects. Supabase is an open-source Backend-as-a-Service (BaaS) platform built on top of Postgres. Beyond hosting the database, it provides authentication, real-time subscriptions, file storage, and more — making it a popular choice for indie developers and early-stage startups looking to launch quickly. Together, these two tools mean the data layer in this demo requires virtually no self-managed servers.


Search and Recommendations: "Cheating" with Embeddings

Facing YouTube's two most critical and most difficult features — search and related video recommendations — Mike was candid: "we cheat to implement this," because the real service is backed by enormous teams. His approach is based on multimodal embeddings:

Each video is represented with both a text component and a thumbnail. A multimodal model maps both text and images into the same vector space, so the word "cat" ends up spatially close to images of lions and tigers. By computing the angle between vectors using cosine similarity, you can determine how similar content is and rank accordingly.

if we create embeddings for our thumbnails

A key consideration is storage. Mike noted that in the past, because traditional databases struggled to perform similarity queries efficiently, developers had to bring in specialized vector databases like Pinecone or Weaviate. Now, Postgres with the pgvector extension has filled that gap, allowing a return to the clean architecture of "one Postgres for everything." In testing, opening a superhero cat video showed the most relevant recommendation was indeed another superhero video; searching for "noir" returned a batch of black-and-white style content — quite usable results.


The core idea behind multimodal embeddings is to map different data types (text, images, audio) into the same high-dimensional numeric vector space, so that semantically similar content is also close together spatially. The canonical example of such a model is OpenAI's CLIP (Contrastive Language-Image Pre-training): it trains by simultaneously "seeing" images and their corresponding text descriptions, using contrastive learning to pull the vector for "a photo of a cat" close to the vector for the word "cat," while keeping both far from the vector for "car." Cosine similarity is a mathematical metric that measures the angle between two vectors, ranging from -1 to 1: 1 means perfectly aligned (extremely similar content), 0 means orthogonal (unrelated), and -1 means opposite. Compared to Euclidean distance, cosine similarity is insensitive to vector magnitude, making it better suited for comparing text and image features — which is why it's the standard metric for vector retrieval tasks. pgvector is an open-source Postgres extension that natively adds vector data types and ANN (Approximate Nearest Neighbor) indexing to the database, allowing developers to perform similarity queries without introducing a separate vector database, significantly reducing architectural complexity.


Authentication, Dark Mode, and Going Live: Agents Don't Just Write Code

In the final stretch, Mike added simple login authentication using Better Auth, requiring identity verification to access the admin panel. Then a single prompt had the Agent implement a complete dark mode — he reflected that getting YouTube to look good in dark mode took months back in the day, and now "it's done in five minutes."

because I just want our website to look really cool.

The deployment phase most clearly illustrates the point that "Agents aren't just for writing code." Since the local project had never been initialized with Git, and Mike admits he's "not great with Git," he simply had the Agent handle pushing code to GitHub, connecting multi-account environments, and all the tedious configuration — work that might have required hours of documentation reading, done by the Agent in five to seven minutes.

Deployment via Vercel hit a real snag: because onnxruntime was used to generate CLIP embeddings, Vercel's runtime environment couldn't find the module, causing 100% failure. Mike simply pasted the error logs to the Agent with the context that "this is a Vercel deployment," and the Agent submitted a PR with a fix. After review and merge, the redeployment succeeded. This debugging loop — "copy error → hand to Agent → review PR → merge" — is the most everyday workflow in AI-assisted development today.


onnxruntime mentioned in the demo is Microsoft's open-source machine learning model inference engine, capable of running models exported in ONNX (Open Neural Network Exchange) format. Embedding models like CLIP are often distributed in ONNX format so they can run inference without requiring a full Python/PyTorch environment. However, Vercel's Serverless Functions runtime environment has strict limitations on native binary dependencies — onnxruntime contains platform-specific C++ dynamic libraries that cannot be properly loaded in Vercel's sandbox environment, triggering the deployment error. This type of "works locally, fails in the cloud" problem is quite common with Serverless deployments; the root cause is that Serverless platforms impose numerous constraints on the filesystem and native modules to optimize cold start performance and security. The Agent's ability to quickly locate the issue via keywords in the error logs (such as module not found, platform architecture mismatch) and submit a fix demonstrates its practical value for debugging tasks with clear, actionable error messages.


What This Case Study Really Tells Us

The 45-minute "CatTube" is obviously not YouTube — there's no real video upload, no large-scale recommendation engine, no real users. But it precisely demonstrates what AI coding is capable of today: given mature managed services as a foundation, clear product decomposition, and a human acting as tech lead to review decisions, individual developers can complete the entire journey from zero to launch at an order-of-magnitude higher efficiency.

Even more worth reflecting on is Mike's wisdom in managing complexity: what to build yourself (frontend, data model, search logic), and what to outsource (video transcoding, CDN, deployment). These trade-off judgments are exactly what Agents can't yet replace — and where the value of experienced engineers still lies. The tools are changing, but "knowing clearly what you want to build" still requires a human.

#AI coding#Cursor#OpenAI Codex#Next.js#pgvector#Supabase#no-code development#AI Agent#multimodal embeddings#Vercel deployment
Share:

Related articles