How an Ex-YouTube Engineer Rebuilds YouTube in 45 Minutes

By LatestLLM Editorial ·

How an Ex-YouTube Engineer Rebuilds YouTube in 45 Minutes

Learn how Mikhail, a former Alphabet engineer, uses Cursor, Supabase, and multimodal embeddings to rebuild a functional YouTube clone with search and auth.

Key takeaways

  • Agentic development with Cursor allows developers to act as architects, shifting focus from syntax to system design.
  • Multimodal embeddings and cosine similarity enable search and 'related video' features that understand both images and text.
  • PGvector allows for the storage of vector embeddings directly within a PostgreSQL database, simplifying the infrastructure.
  • A vision-to-code workflow can translate high-fidelity UI mockups into React and Tailwind CSS almost instantly.
  • AI agents can handle the entire DevOps lifecycle, from initializing Git repositories to debugging Vercel deployment logs.

Building a platform as massive as YouTube used to take thousands of engineers years of coordinated effort. But what if you could replicate its core architecture in less than an hour using nothing but AI agents?

⚡ TL;DR: Former YouTube engineer Mikhail demonstrates how to build a functional 'CatTube' clone in 45 minutes using Cursor, Next.js, Supabase, and Fal.ai. The project features a dynamic home feed, multimodal AI search via PGvector, and deployment on Vercel.

The Simple Version

Imagine you want to build a massive Lego castle, but instead of picking up every single brick yourself, you have a team of incredibly fast, highly skilled robot assistants. You don't need to know how to mold the plastic or design the interlocking mechanisms; you just need to tell the robots, "Build me a tower with a blue roof," and they do it.

In this scenario, the AI agents (like Cursor) are your robot assistants. You act as the Product Manager, describing the features you want, while the AI handles the heavy lifting of writing the actual code. Instead of spending years learning every nuance of web development, you focus on the high-level architecture and the 'what' rather than the 'how.'

How It Actually Works

The Agentic Workflow

The core of this rapid rebuild isn't just one AI, but a coordinated workflow between several specialized tools. Mikhail uses an 'agentic development' approach, which moves beyond simple autocomplete to a system where the AI can plan, execute, and debug entire features.

🎯 Think of it this way: Traditional coding is like writing a book word-by-word. Agentic development is like giving a detailed outline to a ghostwriter and then editing their chapters to perfection.

The Tech Stack Breakdown

To make the site functional, the project relies on a modern, scalable stack that mimics real-world production environments:

  • Frontend: Next.js (a React framework) provides the structure and speed.
  • Database: Supabase (a managed PostgreSQL service) stores user data, video metadata, and comments.
  • Storage & Streaming: Cloudflare handles the heavy lifting of hosting and delivering video files via its Content Delivery Network (CDN).
  • Content Generation: Fal.ai acts as an aggregator to access models like GPT-4o for text and H3 for high-speed video generation.
  • Authentication: Better Auth libraries are used to implement user sign-in and subscription logic.

Technical Deep Dive

Multimodal Search and Embeddings

To implement a "related videos" feature and a functional search bar, Mikhail uses multimodal embeddings. An embedding is essentially a long list of numbers (a vector) that represents the meaning of a piece of content. In a multimodal space, the image of a lion is mathematically close to the text "cat," allowing the system to find similarities across different media types.

To calculate the distance between these vectors, the system uses cosine similarity. This measures the angle between two vectors to determine how similar they are. As Mikhail explains, "If we create embeddings for our texts, if we create embeddings for our thumbnails, we will be able to understand where things are similar to each other."

For context, this replaces the need for keyword-based search. Instead of looking for the exact word "noir," the system finds videos whose visual embeddings are closest to the vector representation of the word "noir." To store these, Mikhail uses PGvector, a PostgreSQL extension. This is a significant architectural win because it allows the project to store both relational data and vector embeddings in a single database, avoiding the need for specialized vector databases like Pinecone or Milvus.

The Generative Pipeline and Deployment

The application bootstraps its own content through a multi-step chain: an LLM generates metadata, which triggers a thumbnail image, which then seeds the H3 Max model via Fal.ai to create a 5-second video clip. This final asset is pushed to Cloudflare, with the URL saved in Supabase.

Deployment is handled via Vercel. However, the process highlights a common AI-coding pitfall: environment mismatches. The initial deployment failed with a 100% error rate because the Onyx runtime (used for CLIP embeddings) was missing in the Vercel environment. Mikhail solved this by copy-pasting the logs back into Cursor, which generated a GitHub Pull Request with the fix. As he puts it, "The agents are not just for coding. They are for doing pretty much everything," including managing Git repositories and fixing deployment errors.

Why This Matters

This demonstration marks a shift in the role of the software engineer. We are moving away from being 'syntax specialists'—people who spend their days fighting with semicolons and brackets—and toward being 'system architects.'

While Mikhail admits that building a true recommendation algorithm like YouTube's requires massive engineering teams, the ability to stand up a functional, data-driven prototype in minutes changes how products are validated. The fact that a dark mode—which Mikhail notes took months to implement at actual YouTube—took only five minutes with an agent is a testament to the speed of modern iteration.

You no longer need a six-month development cycle to see if a core feature works; you can build it over coffee and deploy it by lunch.

Frequently asked questions

What is PGvector and why is it used here?

PGvector is an extension for PostgreSQL that allows it to store and query vectors. It is used here to handle the multimodal embeddings for search without needing a separate vector database.

How does the AI search for 'noir' videos without tags?

It uses multimodal embeddings to convert the text query 'noir' into a vector and then uses cosine similarity to find video thumbnails with the closest matching visual vectors.

Can Cursor actually manage GitHub and deployment?

Yes, Mikhail demonstrates using Cursor to initialize a GitHub repository, push code, and analyze Vercel logs to create a fix via a Pull Request.

Sources

Source: “How an Ex-YouTube Engineer Rebuilds YouTube in 45 Minutes” on YouTube by ByteByteGo

Tags: AI, Software Engineering, Cursor, Web Development, Vector Databases, Next.js

Related articles