Building a Real App with Claude Code (Start to Finish)
A software engineer builds a full YouTube clone with Claude Code and spends the first third of the video making sure the model never gets the chance to freelance.
Posted
2 days ago
Duration
Format
Tutorial
educational
Views
69.9K
669 likes
57 · 43
Big Idea
The argument in one line.
A software engineer builds a full YouTube clone with Claude Code by locking in a written plan, agent skills, and backend connections before writing a single feature, treating the model as a tool to direct rather than a vibe-coding shortcut.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You've used Claude Code for small scripts but want a repeatable process for a full multi-page application.
You're frustrated when an AI-generated app drifts into features you never asked for.
You want a concrete checklist for wiring up a backend, a media/CDN layer, and a design system before scaffolding a project.
You're deciding whether to hand a media-heavy feature (video upload, streaming, thumbnails) to a dedicated platform instead of building it yourself.
SKIP IF…
You already run a disciplined plan-mode plus MCP workflow and just want new tool recommendations.
You're looking for a fully autonomous, zero-manual-steps build rather than a directed one.
TL;DR
The full version, fast.
The video builds a private YouTube clone with Claude Code and argues the whole thing hinges on what happens before any code gets written. The process: write a detailed plan in plan mode (objective, MVP scope, and a non-negotiable tech stack), install design-focused agent skills so the UI doesn't default to generic AI output, connect MCP servers for the backend (Supabase) and media platform (ImageKit) so the model can act on live services directly, then scaffold, build a standalone design system, and only then run the full feature build in auto mode. The conclusion: a fully-featured app came together with few real hiccups because every architectural decision was made up front, not because the tool needed less guidance.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Cold open framing the video as a real engineering build, not vibe coding, and stating the goal of teaching a repeatable process.
00:48 – 06:34
02 · Making a Detailed Plan
Writes the objective, MVP scope, and non-negotiable tech stack, then uses plan mode to have Claude turn a rambled voice prompt into a structured build plan.
06:34 – 08:15
03 · Adding Skills
Installs frontend-design and UI/UX Pro Max agent skills from GitHub repos so the app doesn't default to a generic AI look.
08:15 – 09:53
04 · Adding MCP Servers
Connects the Supabase MCP server so Claude can read and modify the backend schema directly, with a one-time browser authentication step.
09:53 – 12:23
05 · ImageKit AI Skills
Adds ImageKit's plugins for media handling and pastes in the new ImageKit video player documentation to lock in that specific feature before scaffolding.
12:23 – 15:35
06 · Scaffolding the App
Runs the initial build, fills in placeholder ImageKit credentials, and fixes a broken sign-up/email-confirmation flow by describing the exact symptom.
15:35 – 17:26
07 · Frontend Design System
Prompts for a dark-theme design system with a single /design mock-up page covering tokens, cards, typography, and buttons, then applies it across the build.
17:26 – 22:58
08 · Full Build
Runs the feature build in auto mode: uploads, thumbnails, comments, the video player, subscriptions, stubbed demo accounts, and a creator studio with analytics.
Atomic Insights
Lines worth screenshotting.
Writing a detailed plan before opening a new Claude Code project prevents the model from drifting into features nobody asked for.
Ending a rambled voice prompt with 'ask me any questions you need to clarify the build' turns a vague idea into a structured requirements interview.
Naming the exact tech stack as non-negotiable constraints up front (framework, backend, CDN) keeps an AI coding session from making silent architecture decisions.
Plan mode, toggled with Shift+Tab, separates thinking through a problem from actually writing code, and the resulting plan gets saved to a markdown file before any build starts.
Installing agent skills for design before scaffolding a UI is what avoids the generic AI-slop look that comes from letting the model default to its own taste.
Connecting an MCP server to a backend like Supabase lets the AI read the schema and apply changes directly, instead of a developer copy-pasting SQL by hand.
Pasting a vendor's own documentation into the session and asking it to update the plan is a fast way to lock in a specific integration or a just-released feature.
A YouTube-style app converges on three unglamorous pillars: authentication, a media pipeline for upload and playback, and a studio dashboard for the creator.
Building a single mock-up page that shows every component (buttons, cards, typography, tokens) lets a builder approve the whole look once instead of fixing it page by page.
Auto mode, toggled the same way as plan mode, lets an agent keep running through a multi-step build without stopping for approval on every file.
Faking demo data, stub accounts and videos, is a normal way to populate an app enough to test features like subscriptions and analytics before real users exist.
The fastest fixes during a build come from describing the exact broken behavior, what happened versus what should have happened, not a vague bug report.
Takeaway
Front-load the plan, not the prompts.
WHAT TO LEARN
The build looks smooth because every decision, the stack, the skills, the backend connections, got locked before a single feature was built, not because the model needed fewer prompts.
02Making a Detailed Plan
Before opening a coding session, write down the objective, the goal, and what 'finished' looks like, because an undirected AI model will invent scope on its own.
Turn a rambling voice description into a requirements doc by ending the prompt with a request for clarifying questions, then answering them before any code gets written.
List the tech stack choices as fixed constraints (framework, backend, CDN or media layer) rather than letting the model pick defaults it won't explain.
03Adding Skills
Installing a design-focused skill before scaffolding a UI is what separates a distinctive interface from the generic look every unguided AI build defaults to.
Skills can be added straight from a GitHub repo by pasting the URL and asking the tool to install the right file, no separate packaging step required.
04Adding MCP Servers
An MCP connection to a backend service means the coding tool can read the live schema and apply changes itself, instead of a person relaying SQL back and forth.
Authenticating an MCP server is a one-time browser sign-in per project, not a credential a developer has to manage by hand in every session.
05ImageKit AI Skills
A media-heavy feature like video upload, streaming, or thumbnails is exactly the kind of undifferentiated work worth handing to a dedicated platform instead of building it from scratch.
Pasting a vendor's own documentation into the session and asking it to update the plan is a reliable way to lock in a specific library version or a just-released feature.
06Scaffolding the App
The first scaffold pass will leave placeholder config values that need real credentials before the app runs at all.
When something breaks after scaffolding, describing the exact expected-versus-actual behavior gets it fixed in one pass instead of several guesses.
Standing up demo or fake accounts and content is normal at this stage, it's how you test flows like subscriptions before any real user exists.
07Frontend Design System
A design system is a small set of reusable primitives, buttons, cards, typography, tokens, defined once so every later page inherits the same look automatically.
Asking for a single mock-up page that shows every component lets you approve or reject the whole visual direction before it gets applied across the real app.
08Full Build
Auto mode lets the build run through multiple features in sequence without stopping for approval on every file, once the plan and design system are locked.
Even a polished-looking build still needs specific follow-up prompts for small things, like view counts not updating or a broken subscribe button, that only show up once you click through it.
The number of prompts needed to reach a fully-featured app stayed low specifically because the planning, skills, and connections were done before the build phase started, not because the tool is magic.
Glossary
Terms worth knowing.
Plan mode
A Claude Code mode, toggled with Shift+Tab, that has the model think through and propose an approach in a saved plan before it writes or edits any code.
Auto mode
A Claude Code mode that lets the agent keep executing a multi-step build without stopping to ask for confirmation on every individual file change.
MCP server
A Model Context Protocol server that gives an AI coding tool direct, authenticated access to an external service, like a database or media platform, so it can read state and make changes itself.
Agent Skill
A packaged set of instructions a coding tool can load, often from a GitHub repo, that teaches it a specific workflow, such as following a design system, before it starts writing code.
Adaptive bitrate streaming (ABR)
Video delivery that automatically switches between multiple pre-encoded quality levels in real time to match the viewer's connection speed.
Design system
A small set of reusable components, colors, typography, and spacing rules defined once and referenced everywhere, so an app stays visually consistent as more pages get added.
“AI typically, especially when you're using models like Claude, can kind of go off in all kinds of circles and build all types of features that you never asked for.”
names the exact failure mode of unplanned AI coding sessions in one sentence→ TikTok hook↗ Tweet quote
01:23
“It's so important before you dive right into a new project that you spend the time upfront to actually think what it is that you want.”
“The plan is now built and we have that kind of inside of the context. What I want to do is start setting up Claude, so it has all of the tools we need to be able to do everything automatically without us intervening.”
clean transition line between the planning phase and the tooling phase→ newsletter pull-quote↗ Tweet quote
15:51
“This is a set of reusable components like buttons, cards, typography, headers, whatever, like input fields that can just be reused consistently throughout the site.”
plain-English definition of a design system→ newsletter pull-quote↗ Tweet quote
22:10
“The reason why I was able to do that with really no real hiccups is because I made the right decisions up front.”
closing thesis that reframes the whole video as a planning lesson→ TikTok hook↗ Tweet quote
The Script
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
17px
Today, I'll walk you through a full, practical build using Cloud Code. I'll show you how to set it up, how to add connectors, and how to use this tool like a professional to build real, legitimate sites that you could deploy and actually sell for thousands, if not tens of thousands of dollars. Now, I'm a software engineer, I've been writing code for well over 10 years, and you're going to see in this video how I use a tool like Cloud Code as opposed to all of the people that purely vibe code.
That said, you don't need to be an engineer to follow along here. The main goal is to kind of follow the overall process and steps that I go through and apply it to your own projects. You can get better results that are more professional and take you less time.
With that said, let's dive in here and let's start the build process. Again, you can build anything you want. Just watch and see how I build this application so you can apply it to your own setup.
All right. So the very first thing we need to do here is come up with a detailed plan of what it is that we actually want to build. And when you use AI, it's extremely important that you know in detail what you actually want.
So what is the objective? What is the goal? Why are you building what you're building?
And when is it actually going to be finished? Now, the reason for that is that AI typically, especially when you're using models like Claude or Claude models from that family, can kind of go off in all kinds of circles and build all types of features that you never asked for. That can confuse you, it can add unnecessary complexity, and you want to be the one who's kind of the captain of the ship here and not let the AI take over.
So it's so important before you dive right into a new project that you spend the time upfront to actually think what it is that you want. Now, if you're not good at doing that, you can always use these AI models to help you. So what I suggest is that you open up cloud, notice that I'm using the terminal based version here.
I'm not using the desktop app because you can get a lot better features and results from the terminal based version. And what I've done here, I'll just quickly get out of this is I've created a new folder. The folder is called YouTube clone.
It's just on my desktop and I'm running cloud inside of here. Now, the first thing I'll do is I'll communicate back and forth with cloud to come up with a plan of what it is that I want to build. And once I have that plan, then I will start the build process.
So what you can do is switch this into plan mode. You can change the mode by hitting shift tab on your keyboard. This will put Claude in a different mode that will allow it to think through the problem in a planning phase rather than a building phase.
And what I always suggest is doing the following using your voice, communicating with Claude, rambling on what you want, and then ending your prompt with the following phrase. Ask me any questions that you need to clarify the build and get all of the requirements. Let me show you what I mean.
Hey Claude, I want to build a YouTube clone. Basically, what I want to do is I just want to fully kind of build my own version of YouTube. I want to have a creator studio.
I want to have viewers being able to sign in and view videos. I want to have a really advanced video player. I'm going to use something called image kit for that.
I want to be able to upload videos, have analytics and build an MVP of YouTube. That's fully functional. Can you ask me any questions that you need to clarify the requirements and come up with a detailed plan?
So notice that last line there, I've kind of rambled what I want, and then I add that. So this is going to prompt Claude to act. actually ask me more in -depth questions.
Now, I'm not going to go through this entire process because I actually have a few prompts prepared that I wrote before this video, just to make it a little bit faster. But basically what you want to do in this phase is you want to understand what is the minimum viable product that you can build that's going to achieve your goal.
So actually serving some user or solving some type of problem. And you also want to decide what technology or tech stack you're going to be using. For example, do you want this to be a web application?
Should it be a desktop app? Should it run on a mobile phone? Should it work in, you know, some old legacy device?
You get the idea. So these are things that Claude will automatically make decisions for you, but you want to be the one who's guiding that. So if you want to use super base on the back end, for example, tell Claude that if you want to have this connected to some type of provider, you want to use Higgs field to generate an AI avatar.
Tell it that if you have some library that you want to integrate in this case, we're going to use something called image kit, which will handle all of the video playing stuff for us. tell Claude that these are the decisions upfront that will really guide how good your project is later on. So make sure you spend some time researching.
And if you're not familiar with the tech stack, ask Claude to explain it to you and give you the trade -offs between different backends, frontends, frameworks, and languages. So you at least kind of know what it is you're building with or the tools you're using before you dive right in. Now, for me, I want to build this with Next .js.
This is a JavaScript framework. I want to use Supabase for handling all of the backend related features, which is a full platform. that can do all of the auth edge function, storage, all of that.
And then I want to use image kit as my CDN and my video player. So it can actually handle all of the streaming, the adaptive bit rate, handling thumbnails, captions, and all of that. And a massive shout out to image kit for sponsoring this video.
You're going to see why we're using them, but they're great for something like YouTube. Anyways, hopefully that makes sense. I'm stressing this a lot because this is the most important part.
What I'm going to do now is paste into Claude kind of a plan that I've already come up with. I'll quickly show you what it looks like. And then we're going to start the build phase.
All right. So I've got a relatively long prompt here. You can see that I say the following.
I want to build my own private YouTube, a video platform with two sides, the viewer site, and then as well as the creator studio, which is right here. I want to have a home feed, a watch page, playlists, a dark theme. I want to have drag and drop video uploads.
I want to be able to manage videos, one click publish a member only flag. And then for the stack, I put non -negotiable. I want to use next JS with tailwind.
I want to use super base for all of the off. I want to use image kit for the entire media layer. And then I kind of explain what I want to do here.
So I say, give me a plan broken into milestones that I can build and verify one at a time, keep the scope to exactly what I listed. Don't add comments like search or subscriptions because I want to keep it simple for now. So we're going to run this in plan mode, let Claude think on this for a second.
And again, we want to have kind of a structured markdown file first, and then we're going to start setting up Claude, adding our integrations, adding our connectors so that we can build this very quickly. All right. So we can see it's been a minute here and Claude has come up with a pretty detailed plan.
Now, of course, I always suggest that you read through the plan before you start building again, because you can go in a really wrong direction if you don't do this correctly. So you can see, generally speaking, it says, okay, we're going to build YouTube clone. We're going to use XYZ.
We're going to use this image kit API. Okay. We have the super base schema that we're going to set up.
Here's kind of the plan for all of the API routes. And then here are the milestones. So scaffolding, super base schema, upload pipeline, studio manage, watch page, play.
playlist polish, you get the idea. So before I actually build this out, I'm just going to press escape for right now. So the plan is now built and we have that kind of inside of the context.
What I want to do is start setting up Claude. So it has all of the tools we need to be able to do everything automatically without us intervening. Now that's going to involve adding a few skills here, as well as adding MCP servers related to what we're building.
And again, I always suggest you do this at the beginning of the project. So if you go in Claude and you type slash skills, you'll be able to see the skills that you have available.
Now notice that I have a lot, I have project skills, I have user skills, I have this front end design skill, all of this kind of stuff. So what I want to do is I want to make sure that first of all, we have the front end design skill. I already have it, but I'm going to show you how to add it as well as a UI UX pro max skill, which is going to allow us to create something that looks a lot better than what is created by AI by default.
So let me quickly show that to you. If we go here, let me just find this here, the two skills. So the first one is this front end design skill.
Now, you can install this pretty easily in cloud by yourself. However, what we can do to install this is just copy the GitHub repo URL, which I'll leave in the description and just paste it to cloud and tell it to add this skill.
Alternatively, we can add this UI UX pro max skill, same thing. We can just paste the GitHub repo and then tell it to install this. So what I'm going to do is I'm just going to say, before we proceed, can you please install the following two skills?
I'm going to give you the GitHub repo URLs, look through them, and then install the correct skill file for this project. okay so i'm just giving it a prompt and then i'm going to paste the first url okay and let's grab the second one as well and paste that right inside of here again i'll link both of them in the description now what these two skills will do again is just allow us to build a lot better looking user interfaces and design systems so that we don't have this kind of generic ai slop looking site All right.
So it looks like those skills were added. We can double check that if we run slash skills, we can see we have the front end design skill and we now have the UI UX pro max scale and we can take a look at it and see what's inside. Perfect.
Now the next thing is we want to add some skills related to the integrations we're using as well as MCP servers. So first we're going to set up the Supabase MCP server. If you want to check the MCP servers you already have, you can type slash MCP.
You'll see I'm actually already connected to Supabase. However, I will still show you how to do the connection. Of course, because you probably don't have it connected.
Now Supabase again is what I typically recommend for a lot of project backends, especially if it's going to be more MVP, not as many people using it, which mostly we're doing with AI. So the way that you can add the Supabase MCP server is by using this command right here. Again, I will link it in the description.
We just run this in another terminal window and it should automatically add that for us. So I'm going to show you how to do it. I'm just going to get out of cloud here and I'm going to paste this command again, link in the description.
What this will do is add the MCP server and then it will allow you to sign into your Supabase account. It's free. You can make a new account and then you'll be able to authenticate a specific project so cloud can automatically make all of the changes and you don't have to do anything manually.
So let's press enter and you can see that it's added the super base MCP server. So now if we type Claude again, it's going to say, do you want to use this MCP server? Uh, I'm going to go.
Yes. I would like to use this MCP server. And then I'm going to type slash MCP.
When I do that, we should see Supabase and it says needs authentication. So what I'm going to do is press on enter and then just simply press on authenticate from here. It's going to open up Supabase in my browser where I'll then need to sign in with my account.
If you don't have one, make a new one and it should be connected. Okay. So we just connected Supabase.
It says that is good to go. If we come back here to Claude, let's open it up. It looks like it is connected.
Okay, perfect. So we're almost done. Just a few last configs that we want to add and that will be finished.
So next I want to go to ImageKit and I want to actually add the ImageKit skills. So if you're going to follow along with me here and you're going to build something like YouTube or anything that deals with images or videos, you'll find that it's very difficult to actually manage these assets yourself. Now, ImageKit is a full platform that handles all of this for you.
So it does adaptive bitrate streaming. It stores all of the assets, allows you to upload them, handles all the authentication and access thumbnails. captions, all of this, it's free to try out.
I'll leave a link to it in the description so you can make a free account there. And then when we want to start using it in our project, AI can build with it itself, as long as we add the different plugins. So what I'll suggest you do is just add the two plugins that are right here that are from this link.
So I'll link it in the description again, if you want to use image kit. So from within Claude, we're just going to run this command slash plugin. It's going to find that repo and then just add image kit tools.
And then we'll run the second command here. which is the following and paste that like this. Okay.
And we're going to go install for you or actually let's install for just the project scope like so. Cool. So we've now added those two features.
So now it should be able to actually find everything related to ImageCAD. Now, generally speaking, a lot of the modern frameworks now are adding AI skills or MCP servers or some kind of connection. So regardless of whatever you're using, I would check those tools, see if they have an agent skill or something, and install them before you start building with them.
Now, also, one of the reasons we're using ImageKit is they just released this new video player feature. It's very cool. It works.
Okay. It's very cool. You'll even notice they have copy for LLM button right here.
And effectively, it just handles all of the video streaming for you. So you can have custom branding, playlists, adaptive rate streaming.
Like I said, subtitles, chapters, you can even shop, you get analytics and you can install it with this. So before we proceed, I'm just going to copy all of this because I want to make sure that we're going to use this. I'm going to paste this into Claude and I'm just going to tell it to make sure to use this feature when we build it up.
Hey, I'm just pasting some reference from the image documentation. I want to make sure we're using their new video player in this build. Just take note of that and then update the plan and we can start the build process.
Perfect. Let's hit enter and just make sure that it's aware of that. all right perfect so it's now going to create a plan .md file with everything that we need so it just stored in persistent context here after what i pasted we're going to wait for that to finish and then we're going to start building i know there's a lot of steps here but i just want to show you that if you spend the time up front to actually create a detailed plan you make the connections you pick the tech stack it's going to be very easy for us to actually proceed now and build everything out now i'm also just going to throw this into auto mode which i can do with shift tab on my keyboard just so that it can start going through this process we'll let it do the initial build here.
And then what I'm going to want to do is start adding things like a design system. I want to make sure it's connected to get, there's a few other features, but I'll at least let it get kind of the scaffold of the application done. And then we'll go into all of the kind of best practices when it comes to using cloud code and doing kind of mass AI code generation.
by the way if you guys are wondering what i'm using to dictate here because you guys always ask me i'm using a tool called whisper flow just quickly bring it up for you here because it's very useful you can see i have 263 000 words and i use this for literally everything as you can see what it does is just lets you speak directly into the computer uses ai to transcribe your voice and then automatically formats the text fixes any typos and generally just lets you give a lot more context to the ai model i have a partnership with them as well so i'll leave a link to it in the description you guys can use it for we're free from that URL.
Anyways, let's wait for this to build. Probably going to be a few minutes. I'll get a coffee and be right back.
Perfect. Okay. So it looks like we're good so far with the scaffolding.
However, we are missing a few things in order for this to work properly. So notice it says the four image kit values are placeholders. So add your image kit ID, URL endpoint, public key and private key, and then run NPM run dev.
So what I'm going to do is just paste those in the chat. I know it's not best practice, but Claude will be able to view them anyways, so that it can just set that up and add them to the project. So I'm going to show you how to get those values.
If you go to your image kit account and you go to developer options, you'll be able to find the image kit ID URL. point, public key and private key. You might need to actually sign in or like give a password in order to view this.
What I'm going to do is just copy these values. I'm going to paste that there. I'm going to copy the public key.
Let's put this below. Okay. And then same thing with the private key.
So let's go. Okay. So I pasted those values.
Obviously you don't want to leak them to you and then it should update this. And then what we can do is just run the initial, um, what do you call it? Like NPM run dev, whatever, just to see what the site looks like.
Then I want to start talking a bit about a design system, which is going to allow us to build this and just have it look a lot better and consistent, especially as we scale it out. Okay. So it looks like we're good here.
I'm just going to say spin up. the server so I can test it and let's see what the app looks like. Okay.
So it looks like it is running. This is what the application looks like. My tube.
Okay. That's a crazy name. We're probably gonna have to change that.
Let's see if we can create an account. So let's go tech with Tim and let me fill these in. Okay, so it looks like there's some problem here with the sign -in.
So let's just go back and give the information to Claude. So this is going to happen if there is issues. Obviously, don't freak out.
Just try to describe them in detail. So I'm going to say the following. When I go and sign up, what happens is it says it's successful and that it's going to send me an email.
However, it never sends me an email. And then when I try to sign in with the same username and password or email and password that I created the account with, it says invalid credentials. Can you help me fix this, please?
Okay, perfect. So I just went through all of this. Looks like it's working now.
We were able to sign in. We can go home, subscriptions, history, whatever. Obviously nothing's here right now because we haven't uploaded anything.
And then if we press on upload. Looks like we can upload a video. So we will test all of these features.
However, for now, what I want to do is move on to the design system before we go too crazy. Okay. So I'm going to paste in a prompt and then I'm going to explain kind of what my idea is with this.
Now, when you build these AI apps, a lot of times it kind of just comes up with designs on the fly. However, typically what you'll do if you're actually going to build this in like a real software engineering manner is we'll create a design system. This is a set of reusable components like buttons, cards, typography, headers, whatever, like input fields that can just be reused consistently throughout the site.
So usually start by designing all of these different individual components, and then you kind of just place them on the different pages. So effectively, the prompt that I'm giving right here says, Hey, set up a design system using the front end design skill, dark theme, only think premium video platform, near black background, one restraint, accent, color, high contrast, high typography, whatever.
design, the design tokens, the thumbnail card, all of this type of stuff, and show me a style title page at slash design. So I can judge it before we build the real pages. And this is a good one.
If you want to see what it actually looks like, ask it to do like a mock -up page. So you can see all the different components and then you can refine them individually. So we're going to press enter here.
And that's why we added those different skills before, like the UI UX skill, the front end design skill, it's going to load that up and then hopefully give us something a lot better than if we just trusted the default kind of AI recommendation. Okay. So I just went to the slash design, right?
It's still working on it, but I believe this part's finished and we can see this is what the design system looks like. So we have the accents foreground canvas typography. So assuming this is good and we don't want any changes, upload, subscribe, that looks cool.
I'm going to just tell it to apply this design system to the current build, and then we're going to start building out the rest of the features. Again. very good idea to do this.
I even really like asking it to make the site. So it's really visual and easy for us to view. And then again, we can scrutinize anything before we actually have these be the components that are going to be used.
Okay. So let's wait for it to finish. And then again, we'll tell it, apply the design system and move on to the next phase.
Okay. So it just finished applying the style guide here or design system. We can see it looks obviously a lot better right now.
Let's click into our profile, for example. Okay. We can see, I have one video uploaded because I did actually attempt to upload one.
We still are missing obviously a lot of features, like I cannot edit my profile or change the name or something. If we go to the homepage, we can see we have the video.
And if I click into it, let's give it a second to load here. Only thing is it's a little bit weird in terms of like how it's being uploaded or how it's being sized. So we need to fix that.
I can like, I can down. like, or dislike. Let's try to add a comment like, hello.
Okay. That seems to work and the views aren't updating. So of course there's some fixes that we're going to need to make.
I'll give it a prompt just to adjust some of that. And then we'll move on to things like video chapters, adding custom thumbnails, making sure the video plays properly. Although I think it's good here.
Nice. Okay. So it's like super smooth.
It's right in the video player here. We can adjust the speed. And one thing I wanted to note is that if you go to image kit, you should now be able to see all the videos that you've uploaded.
So I have this one. These are just older ones from this project. And you'll see that it's all stored in here.
And then you can click into any of the videos. You can see all their information, metadata comments, you get the idea. And then that's automatically being rendered in this video player component for us.
I can all handle by image kit so that we don't have to deal with any of the video or image assets. So now let's move on as I discussed. All right.
So I asked Claude to add a thumbnail feature because that's one of the things I noticed we were missing. So what you can see here is that I can actually kind of scrub through a video. So I'm in the upload process right now and press capture current frame.
And then we'll automatically select that and use that as the thumbnail. Alternatively, we can upload a custom thumbnail just by picking one here. So, for example, let me just pick one of my thumbnails.
We can see that we get it gets added here and then we can upload the video and it will attach the thumbnail and also store the thumbnail and image. So if we go to the homepage now, I have to say it's looking pretty good. To be honest, let me click into my channel.
For example, we can see it shows the videos. Let's click on one of them and just see the video player and make sure this is working. Okay.
So you can see it loads pretty much instantly. We even have the ability to add subtitles. So this is something I asked it to do as well, because this video player can automatically kind of like AI generate the subtitles for you.
So if I press on this, I can go auto generated subtitles. And of course there's no audio in this one. So we're not getting anything, but let me upload at least something that's like talking head and see if.
that works. Okay. So I've got a video with talking head here.
Let me just mute it for one second so we can go through. However, for some reason, the auto generated subtitles isn't loading. I think the first time you do it, it does take a few minutes to generate it and then it will show up.
So we can come back to that after, but for now we can see that at least all the main functionality is working, right? Let me get back out of this. Didn't mean to zoom in that much.
You can see we have the video player comments channels. And what I want to start working on is analytics and also kind of like a YouTube studio feature. and also the thing with subscribing it looks like i can't even subscribe to a channel or maybe that's because it's my own channel so we'd have to make a few other ones, but let's have Claude kind of stub a few new channels or videos or whatever.
And let's make this just look a little bit better. And then let's add the analytics. So to do that, I'm going to do a prompt here.
I'm going to say, okay, all is looking good. Now I now want to implement the analytics from the video players so that whoever posted the video or uploaded it is able to view the analytics for that. So let's build like a really minimal kind of YouTube studio or like creator version of the site where people can see the analytics of their own videos.
Then I also want you to just stub a few random accounts on YouTube so that we can have some kind of like fake data. And I could subscribe to accounts and see what happens when it's not my account.
We'll see what that's going to do here. But generally speaking, I think that will help us build out the analytics side. And the reason why I'm saying that is that I know in this player here, they have video analytics directly built into the image kit player that we're using the new video player.
So as long as it's enabled, then we'll be able to track all of the information and we can view it inside of image kit in their own dashboard, or I believe we can pull it in from the API and also view it in ours. Okay. So Claude is wrapping up this build here.
We can see, I just got it to fake a bunch of data. So it didn't actually upload the videos, but at least just created the entry. So we could kind of see them here.
We have different channel channel stories. So I can click into wander lens, whatever, and see like all the fake info about these videos. And then it added a studio feature as well.
So for studio, if I click that, it shows me my videos, the views, watch time, subscribers, likes, comments, whatever. And I can click into an individual video. and see exactly how this is tracking.
Now we also can search for something. So maybe let's search for tech with or something and see boom tech with Tim comes up short tech with Tim because that's what I titled it. And you guys get the idea.
We even have a fully functioning history. And of course, there's a lot more that we could add. But at this point, I'm actually satisfied with this progress.
so i am going to wrap up the build here and again like so much more i could do here to really build this out but i wanted to show you mostly how you set up the project the important integrations the tool that you pick the skills the design system and generally speaking best practices when it comes to building with these ai tools and you can see that in a relatively short amount of time or at least short amount of prompts i was able to get something fully featured and the reason why i was able to do that with really no real hiccups is because i made the right decisions up front i spent the time to map it out.
And importantly, I use the correct tools. So if you guys enjoyed this video, make sure they like subscribe to the channel and I'll see you in the next one.
The Hook
The bait, then the rug-pull.
A software engineer with ten years of coding experience opens a terminal and builds a full YouTube clone start to finish, and spends the first third of the video making sure Claude Code never gets the chance to freelance.
Frameworks
Named ideas worth stealing.
00:48list
The Plan-First Build Process
Write a detailed plan in plan mode (objective, MVP scope, fixed tech stack)
Install agent skills for design before touching any UI
Connect MCP servers for the backend and media platform
Scaffold the app and fill in real credentials
Build a standalone design system before building real pages
Run the full feature build in auto mode
The six-step sequence the video follows, in order, before treating a Claude Code session as ready to build features.
Steal forany multi-page AI-built app, not just a video platform
CTA Breakdown
How they asked for the click.
VERBAL ASK
22:40subscribe
“If you guys enjoyed this video, make sure they like subscribe to the channel and I'll see you in the next one.”
Soft sign-off placed after the full build wraps, framed as a natural close rather than a hard sell mid-video.
Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.
Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
A screen-recorded tour of nine Claude Code features past basic autocomplete: subagents, skills, hooks, MCP, worktrees, headless mode, checkpoints, and session management.
A sponsored walkthrough of MindsHub Cowork: the same coworker-style AI agent interface as Claude Cowork, but with a model router that swaps in Claude, GPT, Gemini, DeepSeek, or your own local models.
00:29
00:43
01:01
01:17
01:34
01:51
02:10
02:43
03:00
03:18
03:35
03:52
04:06
04:33
04:44
05:01
05:18
05:44
06:10
06:27
06:44
07:08
07:19
07:36
07:53
08:28
08:45
09:02
09:41
09:51
10:12
10:38
10:58
11:20
11:35
11:58
12:12
12:29
12:52
12:55
13:18
13:38
14:12
14:29
14:47
15:04
15:21
15:46
15:55
16:30
16:47
17:04
17:22
17:39
17:49
18:13
18:31
18:48
19:05
19:22
19:57
20:14
20:31
20:48
21:03
21:23
21:40
21:57
22:18
22:32
19:38
19:19
14:33
23:56
37:40
22:07