Mastering Claude Code: Building Fully Functional Web Apps in Minutes (Vibe Coding)

One of the most powerful vibe coding tools out there at the moment is Clo.

Clode can seem daunting, can seem scary because it runs in your terminal. It's a

CLI, a command line interface, meaning it runs in your terminal on your computer and it doesn't have a typical app kind of looking front end that we're

used to. So, it's a bit scary and I'm

used to. So, it's a bit scary and I'm sure it's more than vibe coding. It's

also for real engineers. I'm a vibe coder. I don't know if that's cool or

coder. I don't know if that's cool or not, but I'm having a lot of fun and I want to show you the next few minutes how I get the best out of clo code. You

can install clo by copying this command into your terminal. I paste it in my terminal and I'm ready with clo code. It

can be daunting because the only thing you see is this black screen with a bit of text. But it's not very hard to learn

of text. But it's not very hard to learn these things. Luckily, we have AI. So

these things. Luckily, we have AI. So

with chatbt, with code, with anything, you can ask about how to navigate inside your terminal. And I discovered that if

your terminal. And I discovered that if you do ls, you get a list of every folder on the top level. And what I'm going to do is you do cd to open a folder. And you could do documents. You

folder. And you could do documents. You

could do actually you can write a little bit and then tab cd documents. I you

enter. I'm inside cd documents. I have a build folder. I'm in my build folder

build folder. I'm in my build folder now. I can do ls. This is where I have

now. I can do ls. This is where I have all my vibe coding projects. I created

an empty folder just for this use case.

It's supposed to be called post session pages. I can see that cd post and then

pages. I can see that cd post and then here we go pages. So I'm inside I can do ls. It's empty as you can see. And if

ls. It's empty as you can see. And if

you do pwd you know where you are. I'm

inside my documents. I'm inside the build folder inside the position pages.

So now I want to launch cloud. You can

just write code. Enter. And here we go.

Welcome to code. Awesome. Asks code to create a new app or cloner repository.

Use code to help with file analysis, editing, bash comments, and git. Be as

specific as you would like with another engineer with the best results. I love

cloud code cuz I've already integrated to my zapmc, which I have another video I just did about that. Please do watch that cuz that's very interesting for business automation. But right now I

business automation. But right now I want to use code to build something quite simple very very quickly. So let's

start. If you do shift tab twice you get to plan mode. If you did it once you get to auto accept edits on or if you do it again so twice plan mode on. I want to

first plan my app. I want to build a landing page type of mini web app that helps me do my post training sessions follow-up. Meaning after I have finished

follow-up. Meaning after I have finished a corporate AI training with my clients, I want to be able to send them a link where they can access all their resources like their session recordings, like the notes about the training and

any other files that I suggest for them to read. I wanted to be able to have

to read. I wanted to be able to have different weeks. I want to be able to

different weeks. I want to be able to launch separate weeks according to the sessions I had. And I want to be able to do this right after my session being able to say, "Week 3's material is here.

Check it out." and that I wanted to be like a mini website, but I wanted to be specific for X or Y client, so the links should be unique. This was one of the worst ways of explaining an app, but I'm

sure it'll it'll work. We're on plan mode. I enter that and it's waving. I'll

mode. I enter that and it's waving. I'll

help you build a landing page for post training session follow-ups. Let me

first understand the project structure and then create a plan for this web application. It's inside my folder.

application. It's inside my folder.

There's nothing in the folder, so it's not going to find anything it wants to list. Let's accept that. Well, the

list. Let's accept that. Well, the

folder is empty. Clothe code wants to keep listing. All right, here we go.

keep listing. All right, here we go.

Based on the analysis, the post session director is completely empty and ready for a new project. Given the context of other projects in the build directory, here's what I would recommend. Nice.

It's looked at some of my other builds.

Recommend project setup plan. Since this

is a blank directory, I suggest setting up a modern web application with front-end framework React with TypeScript consistent with other projects cuz that's what I've been doing. I've been vibe coding React with

doing. I've been vibe coding React with TypeScript. Build tool is VIP for fast

TypeScript. Build tool is VIP for fast development. Styling is Tailwind CSS for

development. Styling is Tailwind CSS for utility for styling. Component library

back end. Nice. Database. That's really

cool. All right, let's just accept that.

Yes. So, it's removed us from the plan mode. Now, auto accept edits on, meaning

mode. Now, auto accept edits on, meaning that now it should start taking some actions. Here we go. It's created some

actions. Here we go. It's created some to-dos for itself. It's initializing the React TypeScript project with Vite. Then

it's going to do all the other steps like set up the tailwind and create landing page component structure and so on. And this is quite fast by the way.

on. And this is quite fast by the way.

So here we go. It's asking me permissions again. It's asking me npm

permissions again. It's asking me npm create comments. Yes. Or I can just say

create comments. Yes. Or I can just say don't ask me again for those comments.

I'll say again don't ask me for rm comments. Gave a little error. I don't

comments. Gave a little error. I don't

even know what that error is. It'll fix

it. Make sure that you do this in a certain folder and don't mess up your computer cuz it could be problematic quite quickly. All right. What does it

quite quickly. All right. What does it say? npm create v last client template

say? npm create v last client template react blah blah blah some more mv comments vibe coding is all about the blah blah blah please be careful when you're trying this at home vibe coding

can be dangerous make sure to do this in a controlled environment I feel like when the jackass videos used to say please be careful doing this at home vibe coding is a little bit like that you're taking quite big risks sometimes

doesn't work out sometimes painful but sometimes you land that trick and then it's very interesting here we go we've initialized the reaction and TypeScript project with Vite. We're setting up the

Tailwind CSS and Shad CN UI. All right,

let's keep giving it permissions some errors. NPM error could not determine

errors. NPM error could not determine executable to run npm error. Complete

log of this run can be found in no 50 packages are looking for funding and npm fun for details. All right, let's see.

It's writing some code now. Wrote 11

lines to tailwind config.js. It wrote

six lines to post CSS config.js. It

started to write the project and here we are a bunch of lines of code being written. It's updated the indexed file.

written. It's updated the indexed file.

Well, I don't know about development march, but what I've done is I've been every night learning it by practicing it

using replet code, codeex, wind surf, lovable, anything I can really. And then

if I'm unsure about something, I ask chatbt or I ask clo. And another little trick that I do that is really good is when you have your project, push it to GitHub. GitHub is where developers keep

GitHub. GitHub is where developers keep their code repository. If you don't know what that means, please check it out.

Just search it on chat GPT or code and I push my code, my folder into GitHub so that I can access it from different applications. And what I do is I access

applications. And what I do is I access it through chat GBT deep research and I select that repo and then I ask it to explain me everything that is in that repo and explain it to me like I'm a

non-developer and then it gives me pages and pages of explanation. Then I read those explanations and then the next day I know a little bit more about development. I don't need a computer

development. I don't need a computer science degree and sorry for the computer scientists out there. I have a lot of friends. I know you're gonna hate me for it. Please don't. But I'm having fun. So, let's give a bit more

fun. So, let's give a bit more permissions. It's set up the tailwind

permissions. It's set up the tailwind CSS and shad CN UI. It's creating the landing page component structure. That's

cool. Now, let me create the landing page component structure first. Let me

clean up the default vite files and create our new structure. Okay. Huh. Let

me create the types for our training portal. That's cool. It's created the

portal. That's cool. It's created the src types index.ts. Now it's creating a basic landing page component. Here we

go. It's wrote 172 lines to src pages client portal.tsx.

client portal.tsx.

Now let me create the admin page for managing clients and sessions. That's

cool. Now let me create the admin page.

Update the app.tsx to include routing.

Oh, let me fix the import order. So it

decides on what to fix, which is really cool. Create session week management

cool. Create session week management components. Okay, it's implemented

components. Okay, it's implemented already the unique client link generation system. Wow. And now it's

generation system. Wow. And now it's creating the session/week management components.

Perfect. The development server is running. Let me create a simple toast

running. Let me create a simple toast notification component for better user feedback. Let me update the admin

feedback. Let me update the admin dashboard to include toast notifications. I think toast

notifications. I think toast notification is not actual toast bread.

I think it's a type of notification.

Now, let me create a simple file upload component. Add file upload and resource

component. Add file upload and resource management. Oh, here we are. It doesn't

management. Oh, here we are. It doesn't

seem like it's done the other to-dos, but let's check this out. Your training

portal web app is now set up with the following features. Okay, the app is

following features. Okay, the app is running at Okay, let's get that link.

All right, we did get a training admin dashboard. How does this work? Let's

dashboard. How does this work? Let's

check it out. We have a big blue button, new client. Great. Let's give a name.

new client. Great. Let's give a name.

upload code. Let's call this antropic just for the sake of it. And let's do cloud at test.com.

Let's create the client. Amazing. We got

a portal link already. That's cool.

Let's just open that up. All right, we have Okay, there's nothing inside it, but welcome clothes code from Entropic.

Okay, so we got a URL that is working.

So, let's see. How do we add a session?

Okay, I see this little button. Open

this up. Add session. Week number one.

Intro to AI. This is the intro. All

right, this is cool. Create session. All

right, we got a session. Let's see if that happened. Let's refresh this. Wow,

that happened. Let's refresh this. Wow,

we one intro to AI in this URL that is special for this client. Amazing. Let's

add a material. So, resource type recording uh session one recording.

Let's put a URL. I'm just putting a YouTube video. And I'm going to say here

YouTube video. And I'm going to say here we go. I'm going to add this. Great. I

we go. I'm going to add this. Great. I

can see it here. Let's go back. Refresh

it. Wow. It is here. We have it's like a download button, but it opens it in it.

Wow. This is really cool. Well, we got our link working. So, as you can see, week one session one recording. It's on

a unique link. So, each client we create has a unique link. This is what we wanted. And has their own sessions and

wanted. And has their own sessions and their own resources. This is quite cool.

A very simple app built in minutes, not hours. And this is ready to be deployed.

hours. And this is ready to be deployed.

This is Clo. Clo is on the terminal.

Looks scary, but as you can see, it's very, very powerful. You could go back to Clo. Now, explain what you like, what

to Clo. Now, explain what you like, what you don't like, the things that you want to see, the next features. Remember, use

the plan feature. It's shift tab twice.

You get into plan mode. In plan mode, you can just plan the features. You can

plan your product road map. Then you can accept that to start letting Cloud Code build your application. Wow, this is incredible. Clothe code is super

incredible. Clothe code is super powerful when it's run with Cloud for Oppus which can get expensive. So be

careful on the plans. You can get the max plan $100 a month. If you have the max plan, you can make sure that you're running with your max plan and not with your API keys. This way you are limited

to that subscription and you can get the powers of Claude for Opus or Claude for Sonet helping you build whatever product you could ever imagine. I'll do more

technical videos about these. These are

a little bit more intro videos these days about me vibe coding. I'm still

learning it. If you want to continue learning these with me, please give it a like, subscribe to my channel, hit the notifications, come and comment below what would you like to see next as I

love to read your comments. Thank you so much and see you in the next video. This

was Tim Chucker, the AI operator, signing off.