Trying to Build a New Product with Claude

All right, all right, all right. Okay, we're streaming, we're live and direct. Let's get the audio popping. Can you hear me? Can you hear me? Can you hear me? Okay, so I've got Cursor open, super cool, you know what I'm saying?

Make sure I'm live, everybody.

Yes, yes, I'm live. Um, Maybe I should, I should tell somebody I'm live.

Let's tell everybody I'm live.

Let's tell everybody I'm live, get them all in here.

I put a cooler background. Okay, where do I see my live? Where do I see my stream?

Right here.

Share, copy link. Let me send it to everybody. Okay, um. Who's calling me? Scam likely, so that's not happening. Hmm, okay, okay, okay, okay, okay. Just want to let everybody know.

You guys see my cool new thumbnail too for my stream? That's sick, right? Okay, so let's start off with this. First off, there's a couple ways to use Cursor— I mean, uh, Claude.

I'm gonna get this popping right here, right?

I downloaded Claude onto my desktop.

Hold on.

All right, but then you go to code, that's where they hit you with, you gotta pay. Now let's look at the, uh, how to use it. So terminal, VS Code cursor. Starting to get hot. Hold on, everybody, I'll be right back.

Let me turn this in.

Okay, they have the desktop app, right, or just doing terminal. Um, but you still, you still have to pay for it, right? So It is what it is.

So then you can open it, connect your tools with MCP, customize, yeah.

Okay, so what's the, uh, you know what, I got someone to answer this. Ask another AI to tell you about another AI. That's the move right there.

Mm-hmm. Yep. AI assistant. Yeah. Yeah.

Vibe coding.

Editing and upgrading existing. Yes. Debugging, automating.

It's VS Code, right? I used to use VS Code very heavily, um, but why, why do people use cursor?

I'll ask that.

Do that normally. So most people use it in Cursor or VS Code. Terminal, power users, sure. Web platform, light use, yep.

Big tasks Setup automation, so UI work, cursor.

Hmm.

Okay, okay, that makes sense.

Okay, so let's set it up with, um, cursor.

Okay, so now we have it. Let's look at the quick— okay, a terminal. Okay, before you begin, make sure you have a terminal command prompt open. A code project to work with. I have no idea what I'm doing. I need a video here. Oh, I can't hear anything. Looks like you guys can't hear anything either.

Oh yeah, show you how to utilize the tool, the best practices, multiple features, and by the end of the video you'll be comfortable using this tool to generate some pretty insane— oh, Claude code working. You are going to need a Claude subscription, which is paid, so you're going to need a Pro, Max, Teams, or Enterprise subscription.

Let me buy this real quick. Quad. Okay, let me double check I'm using the right stuff. Yep, cool, good.

All right. I bought Claude, everybody. It's official. I bought it. At least one month of it.

We'll see. Or an API key with some tokens or credits from the Claude console. Now, I would suggest that if you're just looking to mess around with this, get the cheapest plan from Claude. You will run out of credits pretty quickly if you are using this for very heavy work. But of course, test it first before you start going and buying a bunch of different credits. It also matters what model you're using, which we'll talk about later, which will determine what the overall price for all of the prompts that you send is going to be. Now, generally, you're not going to be overbilled. You'll just run out of credits, then you would have to buy more. So don't worry about that. Okay. Now, to install this is going to require that we work directly inside of the terminal. So what we're going to do is we're going to open up a terminal or a command prompt or a power—

one step at a time, one step at a time.

Partial instance depending on the operating system that you're working on. Now, if you are on Windows, then I'm going to suggest that you open up PowerShell. So you can go to the Windows search bar, search for PowerShell, and then open up a terminal like this. And I'll just put it on the right-hand side of my screen. Now, if you're on Mac or Linux, then open up a normal terminal. So just type terminal in the Spotlight search, and then you'll be in an environment where you can start using Cloud Code. Now, in order to install this, I'm going to leave this documentation in the description, which gives you the commands that you can simply copy depending on your operating system. So if you are on Mac or Linux, then you can copy this curl command right here, just paste it into your terminal and run it. If you are on Windows and you're using PowerShell, as I suggested, then you can copy this IRM command. You can paste it, hit enter, and it should install Claude Code for you. If you're using the command—

let's see what's going on. Okay, Terminal Guide for New Users. Um, okay, so let's see. Get Started, Quick Start, PowerShell. Yep, copy. That, that didn't do anything. Okay, it did work.

It installed.

And prompt, maybe you're on an older version of Windows, then you can copy this version right here, paste it in the command prompt. Again, it will install the tool. Claude Code is not a desktop application. It actually runs directly inside of your shell or your terminal. So in order to use this in the future, you will need to open up PowerShell again or Terminal again, or use this from some kind of tool in order to actually interact with Claude and generate code. Now, once it says it's installed, the way that you can test this is by simply typing Claude in your terminal. So if you type Claude, you should get some kind of output here. Now, when you first run this, it will act—

Okay, I thought it worked. So his works. Setting up Cloud Codeflow.

Oh, I see, I see.

So see, I'm missing something here. So let's go back to here because it does say— get started terminal, so Windows, yes, configuration. This is it, right? No? Okay, let's see. Huh, so it says Claude code Windows requires Git Bash. If installed but not in PATH, set environment variable pointing to your bash similar to Yes, I need to download Git.

Okay.

Look, this is stuff they don't tell you about. This is why it's hard. Like, it's the setup, all this.

Okay, sure. Uh-huh.

Jeez, okay, whatever that meant. So that's installing.

In the meantime, let's create a project on our desktop.

Top.

We're going to call it list—

oops—

list app test. K, as you can see, that's done installing.

What?

Do I need to reinstall it? Okay, yes, yes. Okay, um, look, look, here's another setup note. So let's see, I need to do that here.

C:\Users\Ritzy\Local\bin Oh yeah, yeah, system properties, environmental, where, where are you?

Do this? Edit path.

Where do you do this?

Open by— add it by opening System Properties.

Oops. Thank you. I am streaming live.

Is it on volume? Yeah, yeah, there's volume.

Thank you.

Okay, I'm going to go on a walk.

Okay.

Okay, okay, here we go. Right, edit user path. Yes, I see this. Edit user path.

New.

Um, no, has the death of a child since your daughter got to you? No, you're 16 when she moved over to—

Oh, shit. Oh, shit. No.

Oh, yeah.

The one thing to do at time like this, Command+C.

Good dinners.

Performance. Where's the variables? User variables, user variables, find path. Let me delete this path, edit.

Bash. Okay, yeah. Not recognized.

Always something, man.

Yes, that worked. Okay, make sure you—

okay.

Oh my boy CMO's calling, but I'm in the middle of streaming. Clear path, edit, make sure you choose What happened? Oh, we got it. Whatever this did. Okay, so now if we write, uh, oh. Okay, voice mode is available. Voice. Okay, so let's see, back to this.

Ask you to authenticate with your Anthropic or Claude account. So just do that, go into your browser, sign into your account, and then you'll be good to go. Now also, whenever you run this for the first time and you type that command, it's going to ask you to trust the current folder that you're inside of. So we're going to go ahead and press on. Yes, I trust the folder. And then it's going to bring up the Claude code UI. Now, at this point, you should have got Claude code installed. And just remember, if you were to close the terminal or the PowerShell, you would have to reopen this, right? I'm just going to zoom in and then again type Claude and then you can press enter and again you'll get back into that user interface. So don't worry if you lose it. Now, for some of you that are complete beginners and already this is a little bit intimidating, Anthropic actually did create an easier way to write code using Claude. It is not the same thing as Claude Code, but it is very similar. And you can access that by downloading the desktop app. Details, information. You can get started with Dink today for free by clicking the link in the description. And a massive thanks to them for sponsoring today's video. Let's get back into it. Now, with that in mind, before you just go crazy here with Claude, what I'm going to suggest that you do is install Git on your computer. Now, Git is a tool that's going to allow you to essentially kind of checkpoint what Claude is doing and revert back to a previous version of your codebase in case it makes any mistakes. You won't have it by default on your machine, so you do need to install it. Now you can do that by going to the link that I'll put in the description where you can download this for Windows, Mac, or Linux. However, because we have Claude Code, we actually can just ask Claude Code, can you install Git for me? Now, if you do that, it should actually think about the commands that it's going to need to run to install this for you. It should likely ask you for permission. So you can see here it's asking for permission to run a command. I'm going to go yes and don't ask for this command again. And then it's going to actually run the command to install that tool for you. Now, for some reason that doesn't work, then what you can do is just install it directly from the website right here. Okay, so in my case, it actually gave me an error that said that I need to be running PowerShell as an administrator in order to actually run this command. So if you get an error like that, no worries. What you can do is you can just open PowerShell by pressing right-click and then Run as Administrator. Now, if you're running this in Mac, it should be good to go by default. But here what I'm going to do is just type Claude Okay, I'm going to go, yes, I trust this folder. And then same thing, install Git for me. And let's see if it's able to do it now that I gave it the permissions. All right. So I just got Git installed. I'm not going to go through the whole process. And the next thing that I do recommend that you do is create a GitHub account. The reason why we'll want to make a GitHub account is we're going to connect Claude to GitHub so that it's able to actually create new repositories for us and save all of the code that we're writing from the very beginning so that we don't lose anything. Now, GitHub is essentially a website or kind of a remote location where we can store different code. So rather than just having it on our own computer, we can store it with GitHub where we can access it from another machine. We can share it with another developer. And more importantly, if we lose access to maybe our own computer or maybe we delete the folder or Claude messes up or something, we can always get the repository or the code again by going to this website. So go to GitHub, make an account. It is completely free. And I'm going to just quickly show you how to connect your GitHub account to your terminal here locally so that you're able to use it kind of with Claude. All right. So in order to connect Git, which is running on our local computer, to GitHub, which is running in the web, what we need to do is run the following command, which is gh auth login. Now notice that I didn't know how to do this, so I just asked Claude Code and it told me exactly what to run. So what I'm going to do is type gh auth login like so, and then it should run this command for me and allow me to connect to GitHub. Okay, so you can see that it's gonna ask to run the command.

And so let's go ahead How do I log into GitHub? Okay, well, that's not working.

all this setup.

Oh. Think that's going to work.

Mhm. I'm on Cloudward.

Local bin.

There we go. Damn, that's good. Okay, so I need to do it on a terminal.

Gh, and type on yes. And in this case, gh was not found, so it should go ahead and install that for me. So I'm just going to type Option+C so it can install that tool for me. Okay, so it looks like it was able to install that, and then I'm going to go yes so that it can run that command. All right, so notice it's giving me some output here where it says it wants me to go to this URL and then type in our one-time code. So what we are going to do here is go, we're going to select the account. So I'm going to go with Tech with Tim, and then I'm going to copy this code that it's given me here. So just copy that and paste it and press continue. And that should then authorize GitHub here in our terminal. Now, in order to do that, I need to just auth with mobile. So let me do that.

All right.

So it looks like we are all authenticated. Now you can see that I was logged in as Tech with Tim, and now we have GitHub set up. I know it is a little bit of a pain to do this at the beginning, but trust me, it is absolutely worth it because now anytime we use Claude, it can automatically save the code for us. A lot of other tutorials don't cover this. That's why you're watching mine, because I want to go through it step by step and I want you to get set up in one single video. Now I promise we can move on to some more features. Okay, so let me close my browser. Let's open up Cloud Code a little bit larger and I want to show you how most developers actually work with Cloud Code. Now, rather than just using the terminal here, a lot of times you're going to use this with a development environment. What I mean by that is you're likely going to use an editor like VS Code or Cursor or JetBrains IDEs or something along those lines. So you can actually see what Claude Code is doing and not just have this terminal view. So for example, a very popular editor is Visual Studio Code. A recent version of that, which is kind of AI-enabled, is Cursor. So for example, you could open up Cursor. I'm just gonna open up an editor right here. And if you want a recommendation, I would suggest just download Cursor because this is the best one to use for right now that, also has its own AI features, but we can augment that by just using Claude Code. So you can see that I have, what is it, kind of like a repository set up. Now when you open up one of these applications, so let's say you download Cursor or you download VS Code or you get any code editor on your computer, what you can do is you can go to File, you can go to Open Folder, you can go to your desktop or any location that you're going to be able to find in the future. And we can do something like Claude Code test. And I'm just going to make a new folder. How do I already have a folder called test? It would load— very popular editor, Cursor. Recommendation, I would— example, you could open up Cursor. I'm just going to open up an editor right here. And if you want a recommendation, I would suggest just download Cursor because this is the best one to use for right now that also has its own AI features, but we can augment that by just using Claude Code. So you can see that I have, what is it, kind of like a repository set up. Now, when you open up one of these applications, so let's say you download Cursor or you download VS Code or you get any code editor on your computer, what you can do is you can go to File, you can go to Open Folder, you can go to your desktop or any location that you're going to be able to find in the future. And we can do something like Claude Code Test, and I'm just going to make a new folder. How do I already have a folder called Claude Code Test? Okay, well, That was not what I wanted. So let's go Claude Code Test 2. All right. So I'm gonna make a new folder. The reason I'm making a new folder is this is where I want my coding project to live. I'm gonna select that and then I'm gonna open it. So again, I've just opened my code editor. Doesn't matter which one you're using. You can ignore all of the crazy features from Cursor here and we can close some of these windows and kind of just hide them. And what we can do is we can open up the terminal.

How the heck do you close this?

No, directly. I'm going to select that and then I'm going to open it. So again, I've just opened my code editor. Doesn't matter which one you're using.

Oh, okay, I see, because he's got this, but I'm missing—

what am I missing?

Mine's—

these are flipped for me somehow.

Using—

you can ignore all of the crazy features from Cursor here, and we can close some of these windows and kind of just hide them. And what we can do is we can open up the terminal directly inside of here. So if you're working inside of Cursor or VS Code or WinSurf, so something that is like a VS Code Fork, because a lot of these editors are based on Visual Studio Code. What you can do to open the terminal is you can try to find kind of like a drag bar at the bottom of the screen, but you can see I'm having trouble finding it here. Instead, you can hit Ctrl and then backtick on your keyboard or Command and then backtick on your keyboard, and it should open up a terminal directly inside of this folder that you opened for you. Now, if that's difficult for you, you can hit Ctrl+Shift+P, or Command Shift P if you're on Mac, and you can type Terminal and then Create New Terminal, and then just choose one of the instances. So Command Prompt or PowerShell if you're on Mac or Linux. Again, you just choose probably the first one that pops up. So let's say I do that and you can see it makes a new terminal for me and I'll be able to see it on my screen. Now, if you wanna see the left-hand sidebar, which is the file viewer, you can press this button right here. Again, this is in cursor, but You can do this in other editor as well, and you'll be able to now see all of the files that Claude Code will generate for us in 1 minute. Now, again, if you can't find this button, you can hit Ctrl+B or Cmd+B on your keyboard, and that will toggle the file view on the left-hand side. Now, I know it seems complicated, but most of the time you're going to want to work like this because you want to see the files and actually know what Claude Code is doing, especially if you're unfamiliar with the terminal. I would highly suggest opening this in some kind of user interface like we've done here. So you actually know what's going on. Okay. So now we're inside of a terminal. This is the exact same environment I was just showing you before, except it's now in this code editor, right? And again, this code editor is called Cursor in case anyone is confused. If you just go, you can type Cursor download on the internet and you can download it super easily. Just open it up and literally all you have to do is just go File, Open folder, open a new location, and you can start writing code. So from this terminal, we're going to type Claude. Now when we type Claude, it's going to open up Claude Code just like it did before, but now in this location. So same thing, I'm going to trust the folder and now I have Claude Code in my terminal and I can start getting it to actually generate some stuff. So now we're going to actually start using it. We're going to start building a project and I'm going to start walking through a lot of the features that it has. Now, you'll actually notice that because I'm using it in this editor now, it's detected that. And it's telling me that I can actually have some special features here in Claude Code because I'm working in Cursor. So what I'm going to do is just go ahead and press enter and now we can just start working. But again, it's going to be able to reference the files that we actually looking at in Cursor. It's going to show us the changes that it's making. It's very powerful. All right. So without further ado, let's get this to do something. And let's say that we just want to create a simple web-based game. Let's go with something really, really simple for right now, like maybe tic-tac-toe and just ask it to make that game. So I'm going to say make tic-tac-toe that I can play on the web. Okay. And I'm going to start going through all of the other configurations and settings, but for now, let's just run this so we can see some kind of output and know that we're actually getting some result. Okay. So you can see that it's going to start doing this and generating some output. Now, something worth noting here is that if you wanted to, you actually could run Claude code multiple times in parallel. So while I was creating tic-tac-toe, for example, I could create another game. I could audit the codebase. I could, you know, change something, whatever. And that's one of the things that makes this quite powerful. I'm not going to do that right now because, again, we're still at the beginner level, but you get the idea. Okay, so you can see that it's generated some code for me here. It's kind of giving it right in the terminal and it's asking me to allow it to create tic-tac-toe. Now what I'm gonna do is just go here and I'm gonna go, yes, allow all edits during the session. And notice I'm using my arrow keys here to navigate. So I'm gonna press Enter so that I can just go ahead and start writing this without asking me for permission. Okay, so you can see that it says it has created this for me and it's telling me that the way that I can run this is to start the tic-tac-toe.html or double-click the file in the File Explorer. So I'm just gonna say start tic-tac-toe. Tactoe.html. I'm not sure if that's actually the correct command, but let's just run that and see if that's going to do anything for me. It says open it in the default browser.

Yes.

And don't ask again for this.

Okay. So let's create a responsive To create—

Let's start with that. Let's see what we get. Like, is this it? Is this— now I just got like a little AI thing that does this, you know? So this is basic HTML. Had a whole pepperoni fly off.

Okay.

So I created the whole thing on one page. There's no way, right?

Right, because that's, that's the styles. Okay, here, here's—

okay, yep.

By the way.

And let's see if it can open this up for me and I can run it. Okay. And you can see this is my browser and we have tic-tac-toe, which has now been created, which looks pretty good. We can generate a new game. You get the idea. Now, the one thing that I want to bring your attention to here is that as soon as we started running this, a.clawed folder was automatically created for us in the directory where we're working, as well as the code that was generated, right? So you can see tic-tac-toe now has been written. So this is pretty cool. And this is the reason why you would do this inside of a code editor. So you're able to actually see the change.

Wow. What was this called? We made it. Vibe coding over here, Hey, still streaming.

I'm building a, uh, oh, hello.

You're building something?

One second.

Live coding on livestream.

Vibe coding?

What is that? I'm using AI to code, um, with other people.

It's a vibe.

Well, me and the AI, it's about— we're vibing. It's just doing all the work while I'm just telling it to do the work.

So what are you coding it to do? What is the result?

Look, look. So I'm having it make a— I'm having it make an activity tracking application. So say you wanted to track how many times you, um, did the dishes.

He's trying to track me. He's creating a— he's creating an app to track me. How many times you did the dishes. It says Dish Tracker. Why is that?

No, I'm kidding, right?

I'm totally kidding. I'm kidding. That's really cool.

Yeah, so say like, what was this, something, um, yeah, so you want to just do it but you don't want to have to like enter a journal or something weird, right? Like you wanted to track the date so you can just see, oh, I did the dishes this many times this week, right?

Oh, I see. Oh, you love breaking things. Down and see.

I love that.

He's catching the patterns, coding. I mean, I have no idea what he's doing. Usually it's like a detective show and I see the coding and I'm like, what? That's so funny that he knows how to do that.

Do you code?

It's not working.

So now we're just vibing, we're just vibing now.

Okay, so let's see if this works now.

There we go. Okay, okay, cool. So it just says custom completed.

Marge, um, make the timestamp countdown from the current time. For example, Let's say, what is— Let's see, test list.

Yeah, okay, I should have been pressing that so it keeps doing it because now we're vibing, right? Now we're vibing, we're vibe coding. I don't want to keep saying yes.

Okay, so now let's see.

Just now, just now, cool, that's good. Okay, so now what we do need to fix on this is, um, the List name is good, but the activity type is bad.

Actually, when the user clicks custom, and input should Show so they can type what kind of list.

Yeah, I don't know how many times people are going to be like, oh, habit, habit. I want to, you know, check my habit, habit, habit. Or fitness fitness, like you would do something more specific. For example, like dishes, or I want to track how many sodas I had today. Next, I'm going to try some styling changes too to see if I can just do that. Now let's see if these have updated.

Refresh. Refresh, go here.

No, yeah, 2 minutes ago.

Nice.

Oh cool, and I can remove it.

That's sick.

Can delete the list here. Where— I guess it's because it's local, it's just stay saving here, I guess. Like, I don't even know how this is, how this is working.

Okay, let's see. So now let's create a list. We're gonna go to custom.

Oh yeah, perfect. So let's say, um, what else? What do we want to say? Let's say we're going to do dish tracking.

Um, dish is complete. I also want to, um, create soda This— actually, let's do water.

Nice. And you know what, I did dishes today. So then you can just track it and stuff like that. Now let's try some styling. Um, to toggle between light mode and Yeah, so this is definitely building in a just HTML, CSS, JavaScript. It's not in React, so it's not like building a component library. You know, maybe we can look into that next, into how Who's texting me? Oh, I'm vibing, I'm vibing. Me and the AI are vibing. There's a, uh, chat for a reason, Sean. Get my, uh, get my, uh, my engagement going. I need people talking in the chat. Oh, you show a folder that Claude is connected to on your local machine. Oh, I— yeah, I, I had to fix the path. All right, that's kind of what it was. You're right, that's what the path was. It's supposed to connect it to the part of my local machine and it wasn't doing it. Thank you, thank you, Ramnaze.

Okay, let's see.

Oh nice, oh very nice. Okay, now let's, let's give it a cool like brand, like a different, like something, something different. You know what, maybe let's make it more themed like Nike. Oh, is that Sean? That's you. My bad, I missed your message. It was like lower. Let me actually raise my OBS setup. He's all along. Let's, let's see if this will change the theme. Zesting. It's zesting right now. Yeah, I'm just vibing, you know. I'm just over here creating, creating, and it's cool. But like, I definitely, I mean, I don't know how much control I really have. What is cool is like, say, say I, um, you know, like I do want to change this. I do, we do know we can go to Figma, right? We can connect the MCP and go to Figma, change things, go back to Claude. That's kind of cool. Um, we could also custom fix something like say we want to make the button the border radius differently, like we can always go here, find the button style and change it, right? Because it's just CSS. We have that ability, which is cool. I just, you know, I'm trying to get the consistency, you know, it's all about the control to me. Like if I have a design system, which, you know, say there's a, there's a design system, you know, designer, right? That's why this would be good, right? You're just gonna— because now you can go from drawing Vibe Code mixed with the design system, and boom, done deal. Look, this is confusing. Completed. Oh, it's trying to say completed. I have to fix that because technically when you add it, it is completed. It's not like a— what's it called? It's not like a to-do list. So, you know, now thinking from the UX perspective, right? How does everyone see these activity trackers, right? Where is the— how did someone log in? So that's what I'll do next. Let's see. Okay, this could use— oof.

Yeah, um, that's not good. That's not good right there.

Let's see if we can make a logo.

Company— what's, uh, what's the name? What's, uh, what's a name we should call this? Tracker, track, track, tracker, the track, the, uh, active.

No, let's call it Tracker.

Yeah, definitely need some padding here. What's going on? What is this? Some margin between the two, some space between. It definitely did update the styles, but you know what? I can even do more, right? Like I can say I don't want any border radius. Obviously I can tell it. Let's see if it'll make a logo. You know, I wish— I, I wonder how much I have in terms of generations remaining. Like, am I using this a lot or am I not? I have no idea how much computing I'm really doing here.

See, Shift+Tab, plan mode, Escape to interrupt. Hungry Tracker.

I could use this to design my meal plan. Let's see how responsive this really is too. Not bad, that's good.

Oh, it made one.

Let's see. Okay, I'm not mad at it. Uh, let's do this.

Uh, make the border radius of the buttons 0 so they are squared or rectangular.

And then on the—

oh, that's okay, there we go.

We'll do one thing at a time. That should be Easy.

And then on the next thing, we're gonna say, on the lists themselves, they should not have an entry and completed section. Every time they click add.

Nice.

Okay, so that was cool.

Um.

On here. Okay, yep, so that took that off here. So let's also say on the list detail page, you know, let's add, uh, okay, let's add a soft drop shadow on the top navbar is also the—

Fingers are hurting here, all this typing. I'm going to have to use that like voice thing.

What's going on here?

Okay, that's what it changed Nice. Okay, I want to— I'm gonna try to like really edit something here, like where I'm gonna say put the title in this activity, like in this here, instead of being in the top nav. And then we need to change the nav so that you're either seeing lists or your profile, or really just the You know, the header should be like your logo and then the profile. And then I guess if you are on a list, it could just show the X and the list up top. But here, how would you see your profile? We need to add like authentication. Yeah, that's clean. That's clean.

Stitch does voice.

Uh, it said there was a way to do voice on here too. Now Claude does voice for sure, I think.

Um, if not, like, you can obviously use the device's voice, but let me see. Allows the user to—

okay, okay.

Yeah, we got, we got a clean little app. I don't— I'm not a big fan of these, these, uh, list items, but it is pretty cool. I can just tell it what to do.

Um, this is clean.

This is cool.

It's fun.

I'm having a good time vibe coding. I don't— I feel like I'm not— like, I don't have to, uh, you know, normally I guess I would make these decisions earlier and these would be componentized, so it would take about the same length of time, to be honest, to fix it. But, you know, it's coded, it's cool. I'm gonna try and like expand it. Yeah, I figured you're talking about shadow. I agree. I think this is a nice clean light shadow. It's not like bulky or weird. I want to try and expand this because in truth this is super small. This is unrealistic, right? We would need a login page, we're going to need a landing page, we're going to need a lot more on this to really make sense. As of right now, this is not really a test, right? This is not even a full CRUD app. It's just— I mean, I guess it is kind of, but it doesn't— how would like— would anyone— everyone see the list, you know? So that's why we have to make the profile. We're through the UX now. Normally you start off with that, you know, but I think even going in with the drawings and being able to translate this is pretty classy. What I do think is a problem, like, this is just basic HTML and CSS. We could have done this on, on, uh, Figma Make, right? Like, I guess maybe the quality of the code is good But yeah, oof. Okay, I'm personally hating this. I want to keep the Let's assume it's not a start anymore. This is the real deal, you know. This is, uh, this is my, my dream idea that I'm gonna make millions on.

You should always have the logo profile. New list button profile. Make the light Dark mode toggle be fixed on the bottom right of the page.

That's kind of a big update, you know. I'm asking it to move this here, you know, move this here, keep this like this, switch places. And I wonder if it's going to figure out like on these smaller pages, you know, like on these detail pages, right? Like here, I want this down here. I want this to be the same. So you either click the logo to navigate home or you click the profile. And I need to fix these. These are, these are ugly.

And look at this, the spacing is off too. See, I want to refine that, and I probably can. Mm-hmm.

So this is cool. This is pretty cool. Um, yeah, so there's— I don't know, man, it's like all the same. Uh, Google's AI, uh, AI Studio, Lovable, Figma Make, they're all the same. I just tell it what to do. So I can't say which one I think is best at this moment. This is nice. It's giving me, you know, code. You know what, I guess, you know what, but the thing is there's no database connection, right? With Google's AI Studio, it connected to Firebase like this, and then I had database. So like I could launch that. Oh, this is nice. Oh, that's cool.

Okay.

And then yep, yep, okay, now we're talking. Wow, it even figured out to do the— yeah, now we're talking here. So this would be a way to log out. Okay, cool.

Um, clean up the styling and spacing of the list items on the Home page. They're too close together.

So these are both custom. Yeah, so the activity types, it almost should default to custom and then selecting an icon for it.

Yeah, you can see this just really easy CSS too.

Now to me, this is really easy to go into. Uh, yeah, that's nice. Yeah, that's, that's clean.

That's cool.

Let's move that.

Button a breadcrumb above the title of the—

This is pretty classy. I'm gonna add a report section too that's Says number of lists. Okay, this is kind of cool.

Day streak, your name.

Yes, a lot to do here, you know. I'll tell you, building this thing out in, uh, in Figma though would have been a mess. There, I saw a video, there's something other people use, it's like called super something to add a database to this. See, this is a CRUD app. Actually, more recently I started going through the types of types of apps there are.

Hold on, I'm gonna show you guys, one second.

Because I was thinking like, so what, what do people build, you know?

Where'd I put it?

It's under business stuff, business strategy, product.

Okay, so how do I close this? All here. So check this out.

So here's the type of applications you have, like a CRUD app, social media, e-commerce, project management, note-taking, documents. Most things are this, right? The CRUD app, CRMs. So this is what CRUD is, is create, read, update, delete. So that's kind of anything that the user messes with data, right? So when you follow somebody, what you're doing is adding data to a list list, and maybe you unfollow them, that deletes the data, you know, so stuff like that. But then you also have utility tools like calculators and converters, static content, documentation and blogs, portfolio and landing pages information. So that's anything like people see and they don't, um, they can't like do any information on, like they can't adjust anything. There's no liking it, there's no saving it, they just see the static content. Then you have real-time and event-driven, so gaming, streaming, So you don't— like, you're not updating the data, you're just consuming it, right? You can watch something in real time, it's actively updating. Then there's computationally heavy graphics and editors, AI and ML interfaces, Figma, um, you know, more of the complex, uh, browser-based or application-based, uh, you know, systems. These are another type. Games, you know. And then specialized infrastructure, proxies and gateways, system infrastructure. I don't even know what that is, to be honest. But generally, these are just some ideas that you can use to create something, right? If you want to put something on your portfolio, or you want to create something, here's some ideas of things you create. And a lot of things are just tailored or different versions of that, right? Like technically, this is a project management or note-taking tool or reminders tool that we had, you know, I've updated Let's see. Perfect. Love this.

Cool.

Let's add activity. Yep, nice. Just now. Let's go back to our list.

Beautiful.

Okay, there's a lot more we can do because Um, like this, this right here is lame. Let's do this though.

On the profile page, we need to give the user the ability to log out after confirming. We want to log out, they should be redirected to a landing page that promotes tracker.

Okay, that's kind of complex. I said sign out and then go to confirm it and then go to a page that that has the, um, that has promotional material. So essentially it needs to create a landing page, it needs to add a log— a logout button, and confirm it. So let's see if it's smart enough to figure that out.

Let me invite somebody in this thing too.

Oh, I did. Invite some more people in here because this is pretty cool, I think.

Where's my Instagram design?

Nope, still figuring it out. Okay, so good, it was complex. It's going to take him a second. Gonna take them a second. Good, I want them to figure it out. Let's see, so we have—

let's see. Okay, yeah, yeah, cool.

Let's see what happened, right?

So refresh.

Oh, it already made it. Starts us here. Custom list. Yeah, this is clean. Probably can do more here. Let's get started. It definitely did have a nice, um, like Nike up Logout.

Yeah, let's log out.

It's got kind of a cool Nike feel, to be honest. It's got a cool Nike feel, to be honest. Get Started should take you to a, you know, actual login page or modal or something. But let's say we log in.

Let's keep the fixed light mode. Dark mode button on the page as well.

Yeah, so that's cool. So now this is a solid prototype, I will say, like in terms of if I wanted to give somebody the ability to test something, we have a hell of a prototype. Like you can really do everything.

3 minutes ago. Let's see, cups of water consumed. Yep, 27 minutes ago.

So I've got some issues with like, because this was just this creating a list and it's the activity type, this is bothering me. A minor update there, this custom thing, this probably shouldn't be here. Um, I can close that, that's cool.

Or cancel.

Um, this should have the data filled. I, I don't like that this is like open text. Can change that, you know, whatever.

Let's see if this will save my data. Oh, that's cool, it did. Let's see if it's going to add 3. Nope, it did just 2. That's cool.

Do stuff all the time. Yeah, so it's just— it's actually just updating the text. So it's not like, um, there's no database, it just updates the the text and keeps it like that. I don't know how it keeps it after I refresh, but that's pretty impressive. Let's see now.

Says we can log out.

It's not on here.

Maybe I need to refresh it.

Yep, there it is.

Clean, clean. That's clean. That's clean.

This is pretty clean. Um, okay, so let's say this because I want to do this. I want to add the full, full flow here.

After clicking the Get Started button on my Page show a modal.

Let's add authentication. Let's do it. It's pretty exciting. This is a sick little app I've got going on here. I'm gonna put this up on GitHub. I'm gonna like actually publish it, you know, for people to test out. I don't know how it's gonna work because I'm sure technically everyone would override write it because I want to try the, the Vercel situation too. And, um, yeah, I want to try that. So I'm trying to publish something from GitHub.

Let me see, what is it called? Vercel.

Yep.

I want to even tell it to update the favicon, low-key, to the icon. Yeah, definitely need something to do in between here though, I'll tell you that.

So let's see.

Oh, it's perfect. Oh, authentication, sick.

Yep, I'm looking here, switching between panels. Accounts are stored in local storage so returning user can actually log back in. Clicking inside the modal X closes it.

So I need to actually create an account.

Let's see, Williams.

Should— I can tell it to have show and hide.

What's it called? To—

okay, I created it and I have everything already on here, so there's, there's no actual storing here.

Let's see.

Okay, and authentication worked.

That's cool.

Okay, now let's fix this new list. Oh man, I'm not going to lie, this is pretty cool. If this is my everyday work, my daily work, this would be pretty solid. What are you doing? What do you do at work? I just kind of tell the— I just design by telling it to do stuff. But I mean, I mean, I guess this is why you have one person, right? Just get one designer, you know, the whole team. Because if someone else is doing the same thing at the same time, obviously gonna be updating things that'll be breaking it. So maybe if you like, I don't know, had different people working on different features. I, I don't even know, to be honest, because I guess— or really you just have your designers just be be artists. They just draw the UI, and then you have one person that, that prompts it. I mean, that's what essentially what we do now, right? Like, that's what a developer does instead of coding. You just get rid of developers, have one developer that can do all this and then publish it, and then, um, just have designers that actually design, you know, do good UX and draw things out. They're focusing more on flows and giving it information to help streamline this process. Instead of, I don't know, getting rid of the designers. I don't know, you know, obviously I've got a little bit of bias there.

So let's take a look here. Yep, Tracker. Uh-oh, uh-oh, what's happening?

Probably because it's building and the updates haven't fully updated. Yeah, I don't like the way these lists look. Yeah, it's got a lot to do here. Oh, Frank Sharper, what's up? Yeah, I do wonder, like the way things are moving, right? You're seeing a lot more design systems systems, UX designers, people more focusing on the design system, which I can see being a thing, right? Because you need that. And that's something that trickles over time. But like, what do they do? They create the design system. I mean, I have a pretty robust design system. After that, you're doing more contextual components. Yeah, you're moving more contextual components, I guess, necessary.

All right, let's see this updated. Okay, so now a new list.

Yeah, yeah, now we're— yeah, beautiful, beautiful. Okay, so let's, let's delete these lists here.

Clean, clean.

Yeah, yeah, let's say Want something to keep track of apps built.

Built. Let's look at something like this. Like that.

Cool.

Let's create a list. Add activity. Built an app completed. Just now. Perfect.

Built an app. Little tag.

Do we need a tag?

We really don't need the tag. Really?

Yeah, okay, that's cool, that's cool.

Yeah, that's nice. Yeah, I don't know, there's a little like something— it's just how I've created this, but I probably wouldn't do this.

Let's go Go back here, Tracker. Let's make some reports.

Let's see.

Let's see what it does. I don't even know. I don't even know, to be honest. Let's just see what it comes up with. Let's just see what happens. And we got to get some music or something over here. This is tough to do with no music. Um, now I know I'm on YouTube, so copyright gets crazy, so I'm just gonna play some, some of the old AI Suno stuff I got.

Flicker, flicker.

Let me know if that's too loud or that's weird, because I have, uh, I have to come into my desktop.

Is it done? Nope, still working on it.

Yeah, all this is on one page, which is crazy. Home view, list detail view. Okay, even though it's on here though, it's getting its info from the app database. So this is all icons. Yeah, so all this is populating it into that.

Okay. Oh, put it on the middle. Okay. Okay.

I'm curious about the response. Sponsors of this.

Let's see if we can fix the mobile, right? Because this is bad. I be working out, I be working out while I'm doing this.

Um, let's see. Mort païka, naina ha, chandri ka phlein.

I hated that.

So what I'm thinking from a layout perspective is moving delete into an overflow menu or something. Oh, look who it is! Tiana Williams, love of my life!

Thanks for, thanks for joining, thanks for jumping in. Oh, number 3, he's number 1 to me. Okay, here we go.

Oh, what is that weird X? I kind of dig it because the movement, but like, it's kind of weird. I'm not mad at it.

Uh, let's center the logo though. I wouldn't mind, like, make the plus bigger too.

Geez.

It's kind of cool because it moves, but the X is definitely not balanced.

Perfect.

Okay. What else, what else?

Uh, I forgot this is like legit now.

That's nice. Baseline screaming hard.

You know I know how to code in general, but now I'm just doing it in Vite. Vite code.

Um, I really like this. Okay, so let's look at how to publish this on, on Vercel, um, and upload it to GitHub. So let's just say You know, I gotta, I gotta keep one.

Flicker neon light in the city, okay, burning bright, burning bright. Shadows dance, they come alive. The thrill, the thrill, it thrives.

Frank Yeah, dark mode looks sick, huh?

Drop it, feel the beat.

Oh, this is fire.

Yeah, we'll figure out authentication, uh, authentication and saving data later, but I am curious to one, pushing this on GitHub.

You can't handle the truth.

Pushing this on GitHub and then pulling it and publishing it on Vercel. Oh, this—

I have to find it from here.

Okay, let's go from the top. Maybe it goes downward. There we go.

Classy. I don't know what the thing just said. Okay, here it is.

Yeah, let's see. Repo settings.

So it says 1 minute. We'll see how—

was it 5 o'clock?

Time flies.

Did I save it or did I not?

Um, and then alternatively we can do Vercel too, which I've seen a lot of people do.

Okay, so let's see. So let's add new project. Coming back, live streaming.

Okay, cool, Tracker.

Okay, um, oh, it's live with GitHub, that's cool. So I didn't even have to use GitHub. Sean, thanks for joining. Thanks for coming through, man. I appreciate it. Um, talk to you later.

Okay, so now I'm also deploying it on Vercel as well, possibly. Okay, let's see, did this work? It did! Oh, track it, great!

So I have it, I deployed it through GitHub and through Vercel.

Now I don't know why people would use Vercel over GitHub.

Instant previews, publishing branch, you can even add a name, like anything. So this is cool.

I got something live.

You guys can actually go to this and try it out.

You can create an account. I think we'll see if this works.

Nope, we're gonna create one.

Cool, so let's say we wanted to grab Dish beauty. Your dishes, your dishes, our dishes.

So now if you ever want to track something, you know, you don't want to go through a long list. But I do wonder what—

here, let me try this.

Let's say, let's create a new one. Let's see, let's say James Williams, and it's, let's see, at let's contact at ritzydesigns.com.

Oh, so there's no lists. Okay, so these are— they're literally like not connected.

Um, let's say feature, feature list. So if I want to do Features Designed, I can do this, add an activity, right?

So boom, so now there's a feature list.

Let's sign out and then do my other one. What happened?

Okay, so it doesn't—

it doesn't save. Oh, okay.

Feature list.

Okay, something's weird about that, but that's fine. Who cares?

I didn't expect it to have a full-on backend system and stuff like that going on. Oh, this song is sick. This song is sick right here. Okay, cool guys, we went from installing to, um, building something in Claude, Claude code using a cursor, and all the way up to publishing it using Vercel. Hell of a day, hell of a day, I must say. Um, but I'm gonna call it here. Thanks for hanging out, thanks for coming by, appreciate you guys for talking.

Tiana, I love you.