Vibe Coding for Beginners (Full Course 2026)

0:00 Using AI agents to build any app you want is called vibe coding.

0:04 And vibe coding is one of the most

0:05 exciting and fastest moving areas in AI in 2026.

0:10 And these AI coding models are getting more powerful every single month.

0:13 And beginners are starting to build more and more

0:16 complex apps with AI writing basically all of the code.

0:20 And if you're watching this from the sidelines,

0:22 it might feel like you're falling behind.

0:24 But the truth is vibe coding is a lot easier

0:26 to understand if you just focus for a few hours.

0:30 The best part is if you have a chat GPT subscription,

0:33 you now have access to the best coding tool and best

0:37 coding model in the world for beginners, codecs and GPT 5.5.

0:41 Even if you have zero coding experience,

0:44 this is going to be the most comprehensive video on Vibe Coding.

0:48 We're going to be building three types of apps in this video.

0:50 We're going to build a web app, a mobile app, and a desktop app.

0:54 All while learning the key concepts required for highquality vibe coding.

0:59 So, if you like in-depth guides on using the most

1:01 powerful AI tools in the world for business and building applications,

1:06 make sure to hit that subscribe button and like button.

1:08 Let's not waste any more time.

1:10 Let's dive in.

1:12 So, this right here is Codeex and it is where I do all of my vibe coding.

1:17 Now, in order to download codecs, what you're going to do is you're going to go

1:20 to any browser and you are going to type in openai.com/codex.

1:25 And then once you do this, your web page will look like this.

1:29 In which case, you will download for Mac OS.

1:31 Go through the steps to get it on your computer.

1:33 Once you boot up Codeex, it will look like this.

1:37 And congratulations.

1:38 Once Codeex is on your computer and it's booted up,

1:40 you now have the ability to use the best AI

1:43 coding tool in the world to create applications like web apps,

1:47 like desktop apps, like mobile apps.

1:50 In fact, in this video,

1:51 we are going to create a web app and then we're going to turn

1:54 that web app into a desktop app and then also a mobile app.

1:58 But before we do this, I want to talk a little bit about the basics

2:01 of codecs and the vocabulary that you need

2:04 to understand in order to vibe code on CEX.

2:07 You can basically just type your app idea and it will

2:11 just create your entire app and then you can begin using it.

2:15 So when you come to Codeex, you are going to see a sidebar.

2:19 For simplicity sake, when you create a an application,

2:23 I think you should create a new project.

2:25 And you can do this by pressing start from scratch or you can

2:28 select the location that you want your app to be in on your computer.

2:33 As you know, your computer has files.

2:36 And so on Mac, uh what I'm going to do

2:38 is I'm just going to put it in the documents folder.

2:40 So I'm going to doubleclick documents.

2:42 Then I'm going to hit new folder and I'm going to put simple app and hit enter.

2:47 And now we're going to hit open.

2:49 Now what we see is within the documents folder and if you just hover over

2:53 this you see users/Rileley Brown/documents/simple app that is

2:58 the file path that your project exists.

3:02 Now within this you can press this button right

3:05 here which will create a new chat within simple app.

3:09 And so I can type something like I want you to create an app.

3:13 And a very simplified definition of an app is

3:16 just a folder of code files that runs as software.

3:20 But if we click these three dots and we open up the simple app folder, right?

3:25 If we open this up in Finder, then doubleclick on this, we see that there

3:29 are actually no files at all in this folder.

3:32 How can you create an application without files?

3:36 And that is where GPT 5.5 comes in.

3:39 This is the AI model that we're going to be

3:41 using to generate the files that will become the application.

3:45 Let me show you an example.

3:46 So I'm going to say I want you to create

3:48 a Microsoft Paint app simple web app then run it locally.

3:54 So we're just going to run this and the AI coding model which is

3:58 GPT 5.5 will now begin writing all of the code files for this application.

4:04 And when it's done, if we check on this folder,

4:07 which is simple app, we are going to see some files.

4:10 So, I'm going to pause the video and wait for it to be done.

4:13 We'll see how long it takes and I'll report back to you.

4:16 All right.

4:16 So, after 5 minutes and 44 seconds,

4:19 it responded and it said built it as a simple

4:21 React Vit Paint app and I started it locally.

4:25 And then it has this little component right here that says paint website.

4:29 So, this is the website that we've created.

4:31 And what happens when we hit open?

4:33 And there we go.

4:34 Look at this.

4:35 So here we have this paint app that we just created.

4:37 Let's try and test it.

4:39 You can see that we can actually paint directly on this little application here.

4:44 And let's see if this paint bucket works.

4:47 We can let's see if we can make this blue.

4:50 We click right here.

4:51 And it does work a lot.

4:53 And we have a color picker.

4:55 So we can change the color to this.

4:57 And we have Microsoft Paint that we created in a single prompt.

5:01 And let's say we want to make an edit.

5:02 So please make this look like Apple instead

5:08 of Microsoft in the top and bottom panel.

5:13 Please allow me to use undo.

5:17 If I make a mistake, please make this edit.

5:21 And so we can actually just very easily edit

5:24 the app that we created because again we're just creating files.

5:28 If we go to this simple app folder and we

5:30 hit open in Finder and we click inside this simple app,

5:34 you'll see that we've actually created files.

5:37 And now the agent, since the agent is working on updating the app,

5:42 it's actually going to be changing these files.

5:45 If you've never written a single line of code in your life,

5:47 you don't need to concern yourself with what these files

5:51 do because AI is just that good at coding.

5:54 But just know that your app lives in these files.

5:57 And when it runs, it's running locally on your computer

6:01 and that's what allows you to preview the app.

6:04 And you can toggle the preview just by clicking this button right here.

6:08 So this is the app that we're building.

6:11 And there we go.

6:12 You can see here that it made an edit.

6:14 And now the app has an Apple style top and bottom panels.

6:17 And the local app is running here.

6:20 And so we can click on this to open up the right side panel.

6:23 We can see our app running.

6:24 Now you can see that this looks a lot more like Apple up here.

6:28 And we can test the app.

6:30 We can see that we can draw.

6:32 It looks more like Apple.

6:33 And you can see the undo up here.

6:36 And it also said that I can do command- Z.

6:38 That does indeed work.

6:39 Okay.

6:40 So now what if I wanted to save my work in the cloud so that I can work on it

6:45 from another computer or I could send the link

6:47 to someone else and they could work on this application.

6:51 How would I go about doing that?

6:52 And the answer is GitHub.

6:54 And if you're like me and you've never written a line of code,

6:57 you may think that GitHub is really intimidating and scary.

7:01 Well, it's not because you have AI agents.

7:03 It can handle everything.

7:04 And what you can do with GitHub is once you've created an account on GitHub,

7:08 the way that I recommend you get started is

7:11 I recommend that you can create a new repository.

7:14 And I recommend you can make it private.

7:16 You should make it private just because it's safer.

7:18 And then you can name it whatever you want.

7:20 We can call this Paint by Riley.

7:23 And since I'm a part of an organization,

7:25 I can just choose my personal account here.

7:27 And then I can create a repository.

7:29 And you can think about this like you just created a new folder in Google Drive.

7:34 That's basically how you can think about it because now it

7:38 created a link just like in Google Drive that you can copy.

7:42 And if we go back to codeex and we can actually say, hey, I like this app.

7:47 I want to upload it to GitHub so I can save my work.

7:54 Please do that.

7:56 I created a new repo and you can think of a new repo

8:00 as like a Google Drive folder and you can paste it in here.

8:04 Please upload the code here and we can press enter.

8:07 And if you've never set up GitHub before on your computer, ask Codeex,

8:13 hey, I want to set up GitHub and it will authenticate your account.

8:17 It will link you to GitHub and you'll sign

8:18 in and then you'll go back to Codeex and once it's done,

8:21 it'll give you a uh response that'll look something like this.

8:25 uploaded it to GitHub.

8:26 So, if you look at this link right here,

8:29 right, remember this link just looked like this.

8:31 This is what it'll look like when there's no files uploaded.

8:36 But when we hit refresh now, we see all of these different files.

8:40 And notice here there's a source file,

8:42 there's an index.html, there's a package and a package.json.

8:47 These are the files that you see here.

8:50 If you go back to codeex, we open up the side panel here.

8:53 We click these three dots.

8:55 Open in Finder.

8:56 We open up this app.

8:58 There you go.

8:58 index.html package lock.json package.json.

9:03 Here you go.

9:04 You see all of those different files and those are

9:06 the same files that get uploaded to GitHub.

9:10 And this is basically a saved version of your app.

9:13 So if I make changes to my application right now,

9:16 like please make paint at the top bar bigger

9:21 and the three dots to the left bigger, right?

9:26 We can make a very simple change.

9:28 And there you go.

9:28 It made it a little bit bigger.

9:30 And so what this did is this edited those files in this folder right here.

9:34 Right?

9:35 In this folder right here, open and finder in this simple app.

9:38 It changed these files somewhere in these files.

9:41 It edited a line of code in these files and that created this change.

9:45 But GitHub has not yet changed.

9:49 Right?

9:49 If we go to GitHub, right?

9:51 Where is which is the saved version of our app,

9:53 you can see that 2 minutes ago was our last change and there's only one commit.

9:58 If we go back to codeex, I can say please commit the changes to GitHub.

10:04 That's what you say if you you can picture

10:06 this as like please update our saved application on Google Drive.

10:10 That's basically the equivalent for those of you who are fully untechical.

10:14 This is how you save your work in GitHub.

10:16 You basically just say please commit the changes to GitHub and it will do that.

10:20 Now, if we come back to GitHub and we refresh the page,

10:23 we see now that we have two commits and it was just updated now.

10:29 And you can see here make paint title larger.

10:32 There you go.

10:32 You can see that we just made these changes

10:35 and now all of the code is up to date.

10:38 Okay.

10:38 So very very quick review before we

10:40 dive into building a more complex application.

10:43 But in summary, all we've done so far is we

10:45 used codeex which is a desktop app to build an application.

10:48 In the example that I showed you earlier, we decided to create a web app.

10:52 This is an app that you can open in a browser.

10:54 Once you deploy it to the internet, which we'll get to later,

10:58 this can be opened in any web browser.

11:01 The process to create it is you go to codeex,

11:03 you type in a prompt, and this will send an AI agent, right?

11:07 In this AI agent will be running a coding model and in this case it's GPT 5.5.

11:13 And it is editing, creating and deleting files.

11:17 And these files are located in a project on our computer.

11:21 And when we run it locally, which means running it on our computer,

11:26 that means we can view the app.

11:28 And you saw the front end of our application was that paint app.

11:33 And we made a few edits to this app because again this is a loop, right?

11:36 Once you prompt, your agent can create files.

11:40 Then you can use the app on your computer

11:42 and then you can prompt it again, right?

11:44 You can prompt it again and the agent will make changes

11:46 and you can go around this loop as many times as you want.

11:49 And then once we got it to a point where we wanted to save our work,

11:53 maybe we wanted to share it with a friend

11:54 so that they could also work on the app, we used the Google Drive for nerds,

11:58 also known as GitHub and we created a repository simply by going to GitHub.

12:03 We created a new repository, right?

12:06 When it's on your computer, it's called a directory.

12:08 When it's on GitHub, it's called a repository.

12:10 I have no idea why.

12:11 And we gave the link to Codeex and it was

12:14 able to upload the code to GitHub to save our change.

12:18 And then once we made those little edits,

12:20 it updated the repo and that's why you see two commits instead of one.

12:25 Okay, so now it's time to build a much more complex application.

12:29 And remember, we're starting with a web app.

12:32 My idea for a web app is an app that I'm calling shared brain.

12:36 And so this is the idea.

12:38 I want to build a beautiful internal web app

12:41 that acts as a shared second brain for video ideas.

12:45 The app will be a place where my team

12:46 and I can save anything that might become future content.

12:50 Whether it's Twitter exposts, YouTube videos, Instagram posts,

12:53 articles, screenshots, reactions, references, hooks, or loose ideas.

12:56 Everything should live in a visual library that feels like my mind.

13:00 This is my mind.

13:01 This is another app, but they have no shared features.

13:04 I want the shared features of my mind.

13:06 We want a place where we can save our ideas,

13:09 like a central database hub, and we want it to look really good.

13:13 That's the central idea.

13:14 Every saved item should automatically pull the best available metadata.

13:19 This is very important.

13:20 Part of the reason I love my mind so much is it pulls all of this data.

13:25 Right?

13:25 When I save a link to Twitter, it shows this little card.

13:29 Uh when I save a link to an Instagram post,

13:32 for example, it saves this little card.

13:34 What I want to do is I want to make sure we

13:36 get that same effect so that it is a little bit more visual.

13:39 I want the app to support categories.

13:41 You know, this is similar to notion.

13:43 You can add a select so you can create different categories.

13:46 Every idea should also have a film date.

13:49 So that's just a date field that I can manually change.

13:51 The app should be designed both for people and agents.

13:54 This is where it gets interesting.

13:55 Since this is an internal tool that we're creating,

13:57 I want my AI agent or any AI agent that I'm

14:00 using to be able to update it and read from it.

14:04 So if I want to say, "Hey, we need 10 videos that we can react to.

14:08 Please look through the database." It should be able to scour the database

14:11 and find the best things that we can react to for a video.

14:14 That's the whole point of this application is to give our agents and us a place

14:19 where we can save uh different ideas and so that is where this comes in.

14:23 There should also be an agent skill connected to the app.

14:26 So when a user signs in, so when user signs in inside the user profile,

14:32 there should be a copyable skill or instruction block that can

14:35 be given to any agent like codeex or cloud code.

14:38 And that skill should explain how to access and operate the second brain.

14:43 It should include the required password or access token.

14:46 So only agents with that credential can use the system.

14:50 And then we talk a little bit about how it should feel.

14:52 This is an app should feel like a premium and calm.

14:55 It should not look like a generic admin dashboard.

14:57 It should feel like a private creative operating

14:59 system for visual ideas or for video ideas.

15:02 Visual, searchable and fast and organized enough

15:05 that a team can use it every day.

15:06 And then I gave a little I always like to do

15:09 like in short this is a shared visual second brain.

15:12 I like to kind of summarize the main point so

15:14 that the AI agent knows what's really important to me.

15:18 And so this is looking pretty good.

15:20 What I'm going to do is I'm just going to copy this whole idea.

15:23 And what I'm going to do is I'm going to go ahead and open up codeex.

15:26 And remember earlier we created a new project

15:29 for that simple app which is running the Microsoft Paint.

15:32 We want to create a new one.

15:34 And so we want to create a new project.

15:36 Use existing folder.

15:38 And one thing that you can do is you can just

15:39 hit start from scratch and it will just create a folder automatically.

15:43 And you can see here it created new project 9.

15:46 And so what I like to do is I just like to immediately rename it.

15:49 So, I'm just going to rename the folder, rename project,

15:52 and we can call this my app shared brain.

15:55 The first thing that I'm going to do is I'm going to say here is my app idea.

15:59 Create a markdown file called my idea and have exactly this.

16:06 So, what I want to do is I just want to store my idea in this folder.

16:10 Right?

16:10 If we were to go like this, open this in Finder, click in this project,

16:15 we want to store a markdown file in here that the agent will have access to.

16:19 And the agent's going to create it in a second.

16:21 And there you go.

16:22 Here it shows up.

16:23 And now we can see it in our folder.

16:25 And we have this markdown folder.

16:26 We can also open it inside codeex.

16:28 And here's our idea.

16:29 And I just like to have this open so the agent

16:32 can always go back and take a look at our plan.

16:34 Okay.

16:34 So before we just send off this prompt

16:36 and let the agent try and build this entire thing,

16:40 what we need to do is we need to set up something that's incredibly important,

16:44 authentication, database, and storage.

16:47 So if you remember earlier, we created this Microsoft Paint app.

16:50 Remember this one where you can create uh little drawings you can draw on here.

16:55 The main problem with this is if your browser refreshes,

16:58 poof, your data is gone.

17:01 And the reason this happens and the reason your data is

17:04 gone is because this is just being stored in your browser.

17:07 It's very temporary, right?

17:08 If if you actually wanted to create a good paint app,

17:11 you would want that data to store somewhere.

17:13 And since this is a web app, it can't really be stored on your computer like cuz

17:18 what if you want to use it on your phone?

17:19 What we need to do is we need to create

17:21 a database where all of the data is stored.

17:25 And for that we are going to be using Firebase.

17:29 We are going to be using Firebase for three things specifically.

17:32 So that users can sign in.

17:34 We're going to use it for database.

17:36 So we're going to have these database tables where everything is stored.

17:39 And also storage bucket.

17:41 So we can add assets like images.

17:43 And this is a little example that I've created before for Twitter.

17:46 Right?

17:46 Authentication is simply signing in or signing up.

17:50 When you sign up, it allows you to create a user and verify that user

17:54 and make sure it's like a real person so that you can sign in.

17:57 And then that person will be entered into a users's table.

18:01 Then all of the other data that is text or maybe it

18:04 is like a username or it can be something like true or false.

18:08 This is very very similar to anything that would be in a notion database.

18:12 Right?

18:12 You can create things like a boolean or a checkbox which is like yes or no.

18:18 You can also create multi- select.

18:20 So it's like select you know you can have categories.

18:23 Those are the types of things that you would store in the database.

18:25 And then you need like a a storage bucket

18:28 and that's what we're also going to be using Firebase for.

18:30 And this is to store things like images, videos, or any types of files.

18:34 So that's what we're using in Firebase.

18:36 But before we can just hop into Codeex and say to build the whole thing,

18:39 we actually need to create a new project on Firebase.

18:42 So we're going to go to firebase.google.com

18:45 and then we're going to click get started

18:47 in console and then we're going to click get or create a new Firebase project.

18:53 Then the the the ne the following steps that I'm about to do

18:56 will take two to five minutes depending on if you've done it before.

18:59 And once we're done, all of the rest of the process is done in codeex.

19:03 This is the only time we're going to be going off platform.

19:05 We just need to set up our authentication database and storage.

19:09 It's really easy once you get the hang of it.

19:11 We can call this shared app um shared space.

19:15 I forget what I named the app.

19:16 That's okay.

19:17 Um and I'm going to disable this.

19:20 Use Gemini and Firebase.

19:21 disable the enable Google Analytics.

19:23 We don't need that for now.

19:25 All right, your Firebase project is ready.

19:27 We're going to hit continue.

19:28 Now, the first thing that we are going to do

19:30 is we are going to connect Google Firebase with Codeex.

19:36 And so, we just need to add an app and we're going to click on web app.

19:39 This is the web app button.

19:41 And I'm just going to call this shared web register app.

19:46 It doesn't matter what you name it.

19:47 And this is going to give you a Firebase key.

19:50 Now, I do not let anyone see this information right here.

19:56 This is like a password.

19:57 This is a key that lets people access your database storage and authentication.

20:01 So, do not let anyone see this.

20:04 I'm going to copy this for now.

20:06 And what I'm going to do is I'm going to go back

20:07 to codeex and I'm just going to say this is my Firebase information.

20:14 Store it.

20:15 We will use it in just a second.

20:20 Just going to go ahead and paste it in here.

20:23 Do nothing else markdown.

20:28 So we can enter that in codec.

20:29 So now we're just giving it that context.

20:31 Now there's a few other things that we need to do.

20:33 So we need to continue to console.

20:34 The first thing that we're going to do is we're going to set up a database.

20:38 So we're going to click on fire store.

20:40 Now what we want to do is we want to initiate the database.

20:42 We want to create it so that it exists.

20:45 And we can hit create database.

20:47 Now we're just going to go next.

20:49 Next.

20:50 Start in production mode.

20:52 Create.

20:53 And we are done.

20:54 Once you see this screen, we are done.

20:56 You don't need to do anything else.

20:57 Then what we're going to do is we're going to go

20:59 to uh database and storage and we're going to go down to storage.

21:03 This process is very very similar.

21:06 This will require you to upgrade.

21:08 I think it's like you can do up like $10 and you won't even

21:12 spend any of the money unless you uh upload a ton of files to this.

21:16 This is just in case the project gets too big.

21:19 it'll start charging you, but you can create a maximum amount you want to spend.

21:22 So, we're going to upgrade this project.

21:24 I'm going to just choose one of the payments I've already set up.

21:27 You may need to connect your credit card by doing create billing account.

21:31 So, we're going to click on this one right here.

21:32 We're going to set a maximum budget.

21:34 We can do 20 bucks.

21:36 And we're going to hit continue.

21:37 Link cloud billing.

21:39 So, everything is all linked up.

21:40 And we can hit done.

21:42 And we can hit continue.

21:44 And now we can start this in production mode.

21:48 So what I'm going to do is I'm going

21:48 to hit create and this will create our storage bucket.

21:52 So remember we're setting up storage bucket database

21:55 and then we need to set up authentication.

21:58 Authentication is signing into your application.

22:01 And so we just need to set this up.

22:03 Now what we need to do is we're going to go to Google.

22:05 I want people to be able to sign in with Google.

22:07 I'm sure when you show up to a website and it has sign in with Google,

22:10 you feel a sense of relief because it's relatively easy to sign in with Google.

22:13 You just press a few buttons compared to having to do like email and password.

22:16 So, I'm going to enable this.

22:18 Uh, when you uh select this part right here,

22:20 it's like it wants you to select a support email.

22:23 Just choose whatever one is recommended and then hit save.

22:26 And now we've set up authentication.

22:28 So, that first step we did where we copied that code,

22:31 that code will tell Codeex which Firebase project we're using,

22:35 which is this shared space one.

22:37 And then we basically enabled authentication, storage, and database.

22:40 So, Codeex can now communicate with this whole project.

22:43 And it will see that we've enabled these three things.

22:46 And so now we need to just tell Codeex to build our app.

22:49 And if we open this up, we can see that the project is right here.

22:51 And don't worry, I'll rotate all these keys if one gets leaked.

22:54 But I'm just going to say you have everything that you need

22:58 to build this app entirely using

23:03 Firebase for your DB storage and authentication.

23:09 I want Google Signin.

23:11 I've already enabled everything.

23:15 Please, can you build the entire app?

23:19 And it should look good.

23:22 It should do all of the things that we've listed in the plan.

23:29 Spend time thinking and create the full app that we've outlined.

23:36 Now, I want to see if it can build this app in full.

23:39 This will probably take about 20 to 25 minutes if I had to guess.

23:44 So, I'm going to go get a glass of water after I enter this prompt,

23:47 but we will see if it gets it done.

23:49 Let's see.

23:50 All right, look at that.

23:51 It worked for 25 minutes and 51 seconds.

23:55 We have a local preview.

23:57 What we can do is we can click on local host.

23:59 And here we go.

24:00 We see a sign-in page and it has a continue with Google button.

24:03 And so, what I can do is I can hit continue with Google.

24:06 So, this Firebase error or off popup blocked

24:09 might be a limitation of this inapp browser.

24:13 What I'm going to do is I'm going to go ahead and test this.

24:15 I'm going to open this in external browser and let's see,

24:18 okay, what's going on here?

24:20 So, we can continue with Google if we were to sign

24:23 in with Riley at or kirkwardbrgmail.com and we hit continue.

24:27 Okay, here we have missing or insufficient permission.

24:30 That's very interesting.

24:31 What happens if we add I'm going to paste a x.com link.

24:37 Let's see.

24:37 Ooh, I pasted this x.com link and it automatically switched to X.

24:41 So, if I hit save item, oh,

24:44 it loaded the data, but it's not like letting me save.

24:48 Okay, I'm going to hit cancel.

24:49 I want to figure out why this is.

24:50 Here is a really good tip here.

24:52 You can use inspect element or inspect.

24:55 So, if you rightclick on your browser and hit inspect,

24:58 this is going to open up this side panel here.

25:01 What you can do, you can go to console.

25:04 We can just copy all this information here.

25:06 And we're going to go back to codeex.

25:08 And I'm going to just describe everything

25:09 that's going on on the external browser.

25:11 I can sign in with my account.

25:13 I tried to add x.com link and the it

25:15 pulled the correct metadata at least for the the content.

25:19 However, when I hit save, it didn't actually add it to the database.

25:23 I also saw I didn't have sufficient permissions

25:26 and then I inspected element and I got this.

25:28 So, I'm going to go ahead and paste the stuff that was in the console logs.

25:33 All this is is basically these are just

25:35 the logs that explain what's going wrong in the console.

25:39 And oftent times like here it says failed to load resource.

25:42 The server responded with a status 403.

25:45 That's really useful to give to the agent.

25:47 And so we'll see what it does here.

25:50 Okay.

25:50 After 1 minute and 10 seconds, it is now done.

25:54 And here it's running on localhost,

25:57 but it's also running on this web app server.

26:00 We can open this in an external browser.

26:02 Let's go ahead and test this.

26:03 So, we can add an item.

26:06 Let's go ahead and we can do let's go ahead and paste this link here.

26:11 And we can hit save item.

26:13 And boom.

26:14 There you go.

26:15 This card doesn't look that amazing, but we do indeed have a card saved.

26:21 And so, if we go to Firebase, right?

26:24 Remember, we added a database.

26:26 So, we could go to Firebase and let's go to the Firebase console.

26:29 And so, here's our Firebase project.

26:31 If we go into authentication, we can see that we have two users signed up.

26:35 Those are both me because I tested the app.

26:37 And so in authentication, you can see all of the users who've signed up.

26:41 And we can go directly in the database.

26:43 We can click on fire store database.

26:45 And here we see users.

26:46 We see that there's one workspace and this workspace

26:50 has like a unique ID that's right here.

26:53 And we can click on items.

26:55 And then we can click on this one right here.

26:58 And so this is the codeex is good for non-coding task.

27:03 Here is all of the info about the thing that we've saved.

27:06 So if we go back to our app here,

27:08 we can see it says codeex is good for non-coding.

27:11 And here we see codeex is good for non-coding.

27:13 So it's being stored in the database.

27:16 And Google Firebase has a different way of viewing the database.

27:19 It's not so much like a table like Superbase is for example.

27:24 But in my opinion, it's much easier to use and it's much easier

27:27 to edit if you want to add more fields and stuff in the future.

27:31 It's a lot more dynamic.

27:32 What I would also like to test is YouTube.

27:34 So, let's go ahead and add.

27:36 How do we add?

27:37 Okay, add an item.

27:38 Let's go ahead and add a YouTube link.

27:41 Go ahead and add this YouTube link.

27:43 Let's see how this saves.

27:45 Oh, okay.

27:47 It looks like it doesn't have the exact thumbnail that it needs.

27:51 So these are I want to give some feedback to codeex.

27:55 So I'm going to take a screenshot and I'm going to go back to codeex and I'm

28:00 going to say so on the app when I upload an x post it looks like this.

28:06 I don't like the blue circle that's in the xost

28:08 and then the YouTube video doesn't load the proper thumbnail.

28:11 So, I want you to figure out exactly how My mind and other similar

28:17 apps pull the relevant data so it shows up and shows the thumbnail on YouTube.

28:21 And then on X, it should show the first frame if it's a video.

28:25 If it's a picture, the picture should show up.

28:27 And so, please figure out how to do that.

28:28 It's mostly going to be YouTube videos and X links on here.

28:31 So, I want to make sure that these are good.

28:33 And then also, these aren't showing up in masonry grid format.

28:36 These should be next to each other.

28:37 This is two consecutive that I posted and they're kind of on top of each other.

28:41 So, please can you figure that out?

28:42 Okay.

28:42 So, it looks like that it's done.

28:44 So, I'm just going to copy this localhost link right here.

28:47 And I'm just going to go ahead and open up my browser.

28:49 And we are just going to paste this in right here.

28:52 And let's go ahead and test it.

28:53 So, what I want to do is I want to add a new item.

28:55 And we can add the tweet here.

28:59 Um, let's go ahead and add this tweet.

29:01 Let's see what happens if we save the item.

29:03 There we go.

29:04 This is right.

29:06 And if we actually go to this link right here, we see that it is this podcast.

29:10 So it is this link.

29:11 So there's this copy right here.

29:14 Then there's a video that starts out on this frame.

29:17 This is really cool.

29:18 And it has this frame right here.

29:20 It shows up.

29:20 It looks pretty cool.

29:21 We can click on it.

29:23 And here are some notes.

29:25 Okay.

29:26 Saved post from X.

29:28 Okay.

29:28 Save post from X.

29:30 So I could say interesting podcast for comms.

29:35 And do I need a save or is it just automatically saved?

29:38 Okay, cool.

29:39 It automatically saves.

29:40 So, it saves in the database.

29:42 What happens if we add a YouTube video?

29:43 So, I'm going to go ahead and add a YouTube video here.

29:47 Um, this is one of my videos.

29:48 So, let's see how it does.

29:49 There we go.

29:51 And it even pulled in the title.

29:52 So, the codeex full 2026.

29:55 This is really cool.

29:56 And so, can I add them to a category?

30:00 Status categories.

30:01 How do I do this?

30:02 Save for future review.

30:04 Add a category.

30:05 Okay, I see.

30:06 So I can put long form or I can put reaction.

30:10 Actually, let's So it doesn't show up here, but we do see long form.

30:14 Can I Oh, so the category shows up here.

30:16 So it is showing up in the database.

30:19 So if we add reaction to the categories here, we should see reaction here.

30:24 So I can now filter it by reaction or long form or all categories.

30:30 Very cool.

30:31 Mind you, this is two prompts.

30:33 I believe two or three prompts we've created this.

30:36 Now let's go ahead and test Instagram.

30:37 So if we add a new item and I

30:39 will snag this Instagram video from Timothy Shalamé.

30:44 And if we paste this here, what happens if we hit save item?

30:47 Wow, it pulls all of the data.

30:50 It has a weird format.

30:52 Basketball.

30:53 This is pretty cool.

30:55 Okay.

30:55 And these are different sizes, which is fine.

30:57 That's part of a masonry grid, which is similar to my mind.

31:00 And so this app is starting to look a lot better, right?

31:03 We can have we do Instagram.

31:05 Let's see what happens if we upload a screenshot.

31:07 So I'm just going to take a screenshot of myself right here.

31:10 This is what it looks like if we were to add an item.

31:15 We could Can we drag this?

31:16 No, I don't think we can do that.

31:18 I'm going to copy this image here.

31:20 I'm going to choose a file.

31:22 Let's go ahead and upload this.

31:24 Save this item.

31:25 Let's see if the screenshot works.

31:27 Ooh, I think we might have run into an error.

31:30 This is good.

31:31 Okay.

31:32 Storage is unauthorized.

31:34 So, what we need to do is we need to go to codecs.

31:36 Great job with Twitter, YouTube, and Instagram.

31:39 Those work, but screenshots do not work.

31:41 I got this error.

31:43 And I'm going to go ahead and paste in that error message.

31:46 And we can run it.

31:47 Let's see what the issue is.

31:49 All right.

31:49 So, it said fixed and deployed the storage rule.

31:53 So, the issue was that the screenshot hits the Firebase

31:55 storage before there was an item in the document.

31:57 Okay.

31:57 Let's go ahead and go ahead and test this.

31:59 So, if we refresh this right here, we should be able to go like this.

32:03 Add item.

32:04 Choose a file.

32:06 Let's go ahead and upload that same image here.

32:08 Let's go ahead and save it.

32:10 Okay.

32:10 So, there's the screenshot.

32:12 It shows up in the grid.

32:14 Now, what we want to do is I want

32:16 to come up with a better format for the title, right?

32:18 This title is pretty crazy.

32:20 So, we want to use a lightweight AI model to title these automatically.

32:26 And so, I'm going to just screenshot this.

32:28 And I use a an app called CleanShot X.

32:32 And this app allows me to very easily just draw on the image.

32:37 And I find it to be much easier,

32:38 especially when you're taking screenshots of a lot of images.

32:41 Now, we can go back to codecs.

32:42 Okay, the naming of these is getting a little bit weird.

32:45 What I want to do is I want to add a lightweight AI model using the OpenAI API,

32:49 which analyzes any type of data really quickly

32:53 and then comes up with a better title for it.

32:55 If there's a clean title anywhere in the description or of the screenshot,

32:59 like it should default to the most conservative,

33:01 simple, like literal title for it and it

33:04 should be short and less than six words.

33:08 Yeah, it should communicate things concisely and and we're

33:11 going to use a lightweight AI model for this.

33:14 Okay, so uh I want to explain something really quickly.

33:17 So, we want to use AI within our app.

33:20 And this means we want to use the chat GPT technology

33:24 to analyze all of the items that get inserted into our app.

33:28 And so, chat GPT will very quickly use AI to analyze it and create a good title.

33:34 And so, in order to add the chat GBT technology into our app, we need an API.

33:41 And so, we are going to use the chat GPT API.

33:45 And what this will do is this API will allow

33:49 us to insert the chatgbt technology into our app very

33:52 similar to like a tool like Perplexity which uses all

33:55 of the other companies APIs and puts it into their app.

33:59 And that's where you hear the term chat GPT wrapper.

34:01 The thing about the API is in order

34:03 to use the API it actually costs money, right?

34:06 Every time someone uses your app and creates a title,

34:10 it costs money and it will probably be

34:12 less than a cent every time someone adds something.

34:14 probably much less than a cent because it's very little amount

34:18 of words or tokens but nonetheless you are going to need a key.

34:24 So in order to use the chatbt API you need a key.

34:28 The same thing if you were using the Anthropic API, right?

34:30 If you were using Enthropic, if you're using Nano Banana from Google,

34:35 you would need an API key.

34:37 In order to use the chat GPT API, you can simply look up Open AI platform.

34:43 And you can click on this right here.

34:46 And then you're going to sign in.

34:47 And once you're signed in, you're going to click on API keys.

34:50 And then what you're going to do is you're going to create a new secret key.

34:54 And you're going to come up with a name.

34:55 And I'm going to type in my name.

34:57 We can call this shared brain which is the name of our app.

35:00 I'm going to pause the video right now because

35:02 I do not want this key to be shown.

35:04 Okay, so I copied the key to my clipboard and I'm going to go

35:08 back to codeex and within codeex I'm going to say here is my API key.

35:14 Okay, so I pasted my key below and now I'm

35:16 going to press enter and so now my prompt is running.

35:19 My API key is included.

35:21 I'm going to add is it should analyze screenshots as well.

35:26 Okay, so it's done.

35:27 So it used 4.1 nano, which is a very fast model, which is actually what we want.

35:33 So if we go back to our app here, we can actually refresh it.

35:37 So let's go ahead and refresh.

35:39 And what we can do is let's do x.com.

35:43 Let's do this one of me.

35:45 We can hit save.

35:46 And it just does save post from X.

35:48 Oh, codeex for non-coding tasks.

35:50 It renamed it.

35:52 Okay, so that's pretty good.

35:53 It renamed it codeex for non-coding tasks.

35:56 and it used AI to generate this.

35:58 Let's try it one more time.

35:59 Let's do a uh let's do a YouTube video.

36:03 Let's do this video and we will save this item.

36:07 Competition is for losers by Peter Teal.

36:09 Competition is for losers.

36:11 Okay, so AI is now renaming it depending on what it is.

36:15 For whatever reason,

36:16 the YouTube videos are showing this like weird uh thing right here.

36:20 So, if we go back to codeex and we paste in this screenshot,

36:24 please make the YouTube videos like it has like this weird like overlay.

36:27 Make it like a red play button instead and make it like better.

36:31 And while that's loading, I'm just going to take a screenshot of this.

36:34 I want to reorganize this part right here.

36:37 So, I'm just take a screenshot.

36:38 And now I'm going to square this in.

36:40 And I just want to like hone the agents attention to this part right here.

36:44 And we're going to go back to codeex.

36:46 And I'm going to say I'm going to now double tap for uh whisper flow.

36:49 flow.

36:50 And by the way, I'm using whisper flow to speak into codec.

36:52 So, I'm going to double tap.

36:53 Okay.

36:53 What I want to do is I want to change

36:55 it so that where it shows your second brain,

36:58 like where I type into the search bar,

37:00 what I want to have happen is I want all of the filters to be drop down.

37:06 So, like they should be um to the right of the search bar.

37:11 And so, I want there to be a category dropdown.

37:13 And so, I want it to be default like all cate all categories.

37:17 And then I want there to be a platform dropdown where I can select the platform.

37:21 And by default it's all platforms.

37:23 And so that way we have different filters.

37:25 And then since this is an internal tool, I want all users to show up as well.

37:30 So I want to be able to filter by user.

37:32 And that means right now I'm signed in as someone and I

37:34 want to be able to by default it is my posts, right?

37:39 It should not show the other users posts because it's autofiltered,

37:43 but I do want to be able to see all of the posts.

37:46 And that's you might need to change

37:47 the permissions because remember this is an internal tool.

37:50 I want to be able to see everyone else's.

37:52 If I select all users or select the other

37:55 users and this will be an internal tool.

37:57 So if I have someone else sign in from my team I should

38:00 see their name as an option but by default I should only see mine.

38:03 So there's going to be user,

38:05 there's going to be platform and there's going to be categories.

38:08 Then we press stop recording.

38:09 I like to just record my voice.

38:11 Go look directly at the app.

38:13 Speak speak.

38:14 Once I'm done, I come back to codeex.

38:16 And now we can fire off this prompt as well.

38:18 While that is working, we can check on the previous one that we made.

38:22 Look, there we go.

38:23 Our YouTube videos are fixed.

38:25 So, we can filter by YouTube.

38:26 And you can see now we have the red plus sign.

38:29 I think this is starting to look pretty good.

38:31 Additionally, I want you to use a different font.

38:33 And then I want you to please make

38:36 the background more gray and make it like a very

38:39 slight gradient from gray to like a slightly darker

38:43 gray just to give it a little bit more energy.

38:46 And somehow make the cards a little bit better.

38:48 Maybe add a slight border around them.

38:50 Don't go too crazy.

38:52 This app is starting to look a little bland to me.

38:54 I want it to just like spice up the edges a little bit.

38:56 And since these are completely unrelated, I'm just going to let this one finish.

39:00 And then as soon as this one's done, it'll enter it in the prompt.

39:02 And this is called queuing.

39:04 So by default it cues.

39:06 So your prompt will just sit here and wait

39:08 for the agent to be done and then it'll be entered.

39:10 Or you can steer it by pressing steer.

39:12 Or you can press command enter.

39:14 It'll enter your prompt into this.

39:17 All right.

39:17 So I think it was a matter of six or seven prompts.

39:20 We created this app right here.

39:22 It looks a lot like my mind and we can very easily upload links.

39:26 AI analyzes it, titles it.

39:28 It pulls the graphics to make it kind of this like graphical interface.

39:32 So I can very easily see what the post is about.

39:35 So this is really cool.

39:36 I can filter by post.

39:38 So what I'm going to do here,

39:39 I actually want to check the multiplayer nature of this.

39:41 So if I sign out right now and I hit continue with Google,

39:46 and we sign in as my other account, I can switch to my other account, Riley 1,

39:52 and then I can switch back to my posts.

39:53 Let's go ahead and add a new item.

39:55 I'm going to go ahead and add a x.com link.

39:59 We'll choose a random one.

40:01 This one looks good.

40:03 Now, what I'm going to do is I'm going to hit save item.

40:05 Open AI agent builder at dev day.

40:07 That's exactly what this is.

40:09 This is really cool.

40:09 So, it it uses AI to name it.

40:11 And now I can click all users.

40:14 So, now it shows mine and my whole team.

40:16 So, we have a second brain that is multiplayer in nature.

40:20 And I think this is looking pretty damn good.

40:24 All right.

40:25 So now it's time to take our app that right now it is running on localhost 5175.

40:32 This means it's running locally on our machine.

40:34 If you were to send someone this link right here, localhost 5175,

40:38 and they entered it in their browser, they would get nothing.

40:41 And what we want to do is we want to put it on the actual internet.

40:44 And the way that we do this is we are going to deploy it.

40:48 And personally, I'm going to be using Versell.

40:50 And you can very easily set up Verscell by going

40:53 to plugins and we're going to search for Versell.

40:56 And you're going to download this plugin.

40:58 And then watch how easy this is.

40:59 Deploy to Versel.

41:02 Then give me public link.

41:05 One other thing that you're going to need to do,

41:06 I need to put into Firebase approved authentication links.

41:12 I'll explain this in just a second.

41:13 So now it has been deployed to the internet.

41:16 And so all I have to do is click

41:17 on this link and this will take me to a real website.

41:21 So this is a real deployed website on the internet.

41:24 But check this out.

41:25 When I hit continue with Google, I get an error.

41:27 This is an unauthorized domain.

41:30 So what we need to do is the reason I asked it to give us a domain to put

41:34 in the authorized domain in Firebase is we actually need

41:37 to give this new domain permission to use the authentication.

41:41 And so we are going to just copy this link right here.

41:45 Now, we're going to go to the same Firebrace project that we created earlier.

41:48 And now, what we're going to do is we're going to go to authentication,

41:52 and we are going to go to settings.

41:54 We're going to go to authorized domains.

41:56 And notice here there's localhost.

41:57 And so, this is why localhost works by default.

42:00 It's automatically a uh authorized domain.

42:03 And that's why anytime you're using localhost, it just works.

42:06 You can use authentication.

42:08 But we actually need to add the domain for the Verscell app.

42:12 And if we were to add a custom domain, we would need to add that one as well.

42:16 So we need to hit add.

42:17 Now check this out.

42:19 If we go back to shared brain, let's give it a refresh.

42:21 Continue with Google.

42:22 And now it works.

42:23 And so now I can sign in with the same account that I signed in with before.

42:27 And I should see all of my data.

42:29 I do indeed.

42:29 We can zoom in here.

42:30 Here's all of my data.

42:32 It's on the sharedbrainer riley.cell.app.

42:35 And that's it.

42:36 We have a web app that has been deployed to Verscell.

42:40 It is on the internet.

42:41 It is a real website on the internet and all

42:44 we did to get there is we prompted codecs.

42:46 The agent which is GPT 5.5 created some files.

42:50 We iterated and the agent made changes to those files.

42:53 We took a look.

42:54 We added authentication database so our data is stored.

42:58 We added a storage bucket so we can

42:59 add those screenshots and even videos as well.

43:02 And we deployed it to Verscell.

43:04 We used GitHub to save our work.

43:07 Now it's on the internet.

43:09 Now what I want to talk about is how do we

43:12 go from a web app to a desktop app and mobile app.

43:16 And instead of me answering this question, let's just go to Codeex.

43:20 So on Codex, I'm going to use this prompt right here.

43:22 All right.

43:22 So I want to turn this application into a desktop app and an iOS app.

43:27 We're going to use Electron and Swift.

43:29 Electron is just a stack.

43:31 It's kind of like a wrapper of a web app but turned into a desktop app.

43:35 And I have found it to be the easiest to use.

43:37 And we're going to use Swift.

43:38 And this is for the mobile.

43:39 And I want to get a plan.

43:41 I want a plan to do this.

43:42 And it will communicate with the same backend.

43:45 And all the database storage and au

43:47 authentication will remain let's say connected.

43:51 And I want all these apps to work together.

43:56 So my team can use any version.

44:01 And then we're saying make a markdown file plan.

44:04 So we're going to have Codeex come up with a plan

44:06 to convert this app into a desktop app and a Swift application.

44:10 Okay.

44:10 So it created this entire plan here.

44:13 And rather than creating a new project and creating completely

44:17 new context for a new agent to implement this plan,

44:20 I actually don't even know the answer to this.

44:22 I said, should we do this in this project here at this file

44:25 path or should we make new projects for each of these?

44:28 And it said do it in this project.

44:29 And so what the way that it's the agent is planning on doing this is

44:33 it's actually going to create an apps folder and then it will have the web app,

44:36 it'll have a desktop app and an iOS app all

44:39 in one project which is this my apps shared brain project.

44:44 So what we're going to do here is since it already knows all of the information

44:48 about our web app and it's kind of already thought a lot about the plan,

44:52 I'm going to go ahead and let it cook.

44:54 All right, so I think it's ready.

44:55 So I'm just going to say, okay,

44:56 please take a deep look at the plan that you created.

44:58 Here's the plan.

44:59 By the time you are done,

45:00 I want to be able to use all three of these applications together.

45:02 Make them perfect and ready to use for my team on any of these three platforms.

45:06 Don't stop until you're done.

45:08 Let's go ahead.

45:10 We are going to see if the AI agent, this will probably take 40 minutes.

45:14 I'm going to go get lunch while this is working.

45:16 We will see how far it gets and see if it's able to take our web app and turn it

45:20 into a desktop app that we can download and an iOS

45:23 app that we could send to the app store.

45:25 All right, take a look at this.

45:27 It just worked for 29 minutes and 52 seconds.

45:30 And so what we just asked it to do is we

45:32 asked it to create a desktop app and an iOS app.

45:35 And so now what we are going to ask it to do is

45:37 we are going to say can you please run the desktop app application.

45:43 This should be able to just do everything that you need to run the application.

45:47 So it should be able to run it and we should open it like a desktop app.

45:51 Oh wow.

45:52 Here we go.

45:52 So this just opened on my computer.

45:55 I see a desktop app.

45:56 It's not on the right screen here.

45:58 Maybe I can move it over here.

46:01 I don't know if you can see this.

46:02 I actually can't move it.

46:03 Let's see if I can full screen it.

46:05 So, I can indeed full screen it, but I actually can't move it around.

46:09 I'm going to make sure that we tell Codeex this.

46:12 Right.

46:12 By the way, I cannot move the window around.

46:15 Please allow me to like grab the top of the window and move it around.

46:19 But let's see if we can sign in.

46:21 So, we can full screen it.

46:22 Continue with Google.

46:24 Okay, let's sign in with Riley at not a number.

46:27 Okay, error off popup blocked.

46:30 Additionally, I got this error.

46:31 It did let me sign in, but when I I it took me to the web

46:34 app to sign in and then back to the app and I still see this.

46:37 So, we're just putting this error in here.

46:39 Okay, so it just reloaded up.

46:41 And let me just really quickly break this app down.

46:44 So, this is an Electron app.

46:46 This is running on our computer and it even created

46:48 this little icon for it and called it shared brain.

46:51 Yeah, it doesn't have rounded edges like the other icons,

46:54 just this kind of square, but it has an icon on our computer.

46:58 So, if we just hit continue with Google.

47:01 Okay, it opened this up.

47:02 And now we can hit open shared brain.

47:05 Let's see if we log in.

47:06 Yes, look at that.

47:08 In a couple of prompts,

47:10 we have logged into a desktop app that looks exactly like our web app.

47:15 And so we can actually just if we go like this, we should be logged in.

47:21 All right.

47:21 So here we have an identical application and maybe

47:24 there's going to be some slight differences here.

47:26 We have a desktop app here on the left and our web app here on the right.

47:31 We have created a desktop version.

47:33 This is running Electron.

47:35 And let's see what happens if we were to add something on the desktop.

47:39 So if we add something on the desktop, we can go x.com.

47:42 Let's go ahead and add this post here.

47:45 We can click this.

47:47 Okay, this got added.

47:49 So, this is a tweet of an SVG generator.

47:52 We can click on this app icon creation using AI workflow.

47:57 That's accurate.

47:58 And it's synced to our desktop app which we can view just like this.

48:02 Wow, it is almost identical.

48:05 This is very cool.

48:06 So, we have this desktop app.

48:07 Let's do let's try let's add one more.

48:09 So, we should do some testing.

48:11 add this.

48:13 It's a company, a link of a tweet that I

48:15 saved about a new company releasing a product called HQ.

48:18 If we hit save, it should use AI to generate everything.

48:22 And now we can enter it.

48:24 Wow, this looks good.

48:25 This kind of looks better.

48:27 Yeah, I think this looks better than this.

48:29 But there we go.

48:30 We have this notes app.

48:32 Very similar to my mind.

48:34 This is a desktop app.

48:35 This is a web app.

48:36 Now that brings me to the iOS app that remember it already built.

48:41 We just haven't run the app yet.

48:42 So what we want to do is we want to go back to codeex.

48:46 And so I want to say remember earlier we made a mobile app.

48:50 I want to run this.

48:52 Please run the Xcode project.

48:55 I'll explain this in just a second.

48:57 So while this gets set up,

48:58 in order for you to run iOS apps on your computer, you need an app called Xcode.

49:03 So, Apple created Xcode, which is their own developer platform,

49:07 which allows you to run iOS apps

49:09 on your computer using something called Simulator.

49:12 So, you're going to need Xcode and Simulator.

49:14 And in the link in the description below,

49:16 I will put a full guide on how to get started using Xcode and Simulator.

49:22 And it's relatively easy to set up.

49:24 You do need a Mac for this.

49:26 It's going to run it in an iPhone simulator directly on my computer.

49:30 And look at this.

49:30 It says the simulator build is underway.

49:33 Firebase and Google Signin packages resolved.

49:36 Xcode is compiling the native app.

49:38 Now the iOS app is built successfully for the simulator.

49:42 I'm booting an iPhone simulator.

49:43 Now look, there we go.

49:45 Here's the simulator.

49:48 It should open up the app.

49:49 Let's give it a second.

49:51 There we go.

49:52 Look at this.

49:53 Shared brain.

49:54 This is an app that's on our computer.

49:56 Let's go ahead and sign in with Google.

49:57 Let's see if this works.

49:58 Continue.

50:00 Okay.

50:01 I'm going to enter my information.

50:03 Okay.

50:03 Now, we'll hit continue.

50:05 Keychain error.

50:06 Interesting.

50:07 So, what I'm going to do is I'm just going to screenshot this, right?

50:10 And we're just going to toss this bad boy in here.

50:12 And I'm going to say I got this error on sign in.

50:17 Okay.

50:17 So, it is done.

50:18 Let's go ahead and open this back up.

50:19 If we go simulator, sign in with Google.

50:23 Continue.

50:24 All right.

50:24 Let's see what happens if we hit continue this time.

50:27 Boom.

50:28 on codeex.

50:29 We created, look at this.

50:31 This is actually crazy.

50:34 Oh my god.

50:35 We created a web app that has a backend database and storage.

50:40 And then in less than seven prompts,

50:43 we converted this web app into an Electron app that works perfectly.

50:47 This is a desktop app.

50:48 Downloaded to my computer.

50:50 Here it is in shared brain.

50:51 And then we created the iOS app version of this app.

50:56 I I it's just it's it's literally it's mind-blowing.

50:58 I can't sometimes I just can't even fathom that you can do this now.

51:02 And we basically got 98% of the work done in a single prompt.

51:07 That's pretty awesome to me.

51:09 Anyway, let's get back to the to the video.

51:11 And so now, if we wanted to iterate on this iOS app, we can very easily do so.

51:16 We can just start asking for some changes on the search bar.

51:19 Please ch make the placeholder text just say search instead

51:22 of search your second whatever because it's being cut off.

51:28 Oo.

51:31 Oh, okay.

51:33 So, in the details for each one, like if I click on an item in the list,

51:40 uh it shows title, notes, status, plan,

51:43 film date, add film date, clear film date.

51:47 Everything here is just a little too like clunky and not very good.

51:51 There's too many components.

51:53 I want everything simplified.

51:54 So think deep and just fix the formatting

51:58 like for all of the info about each one.

52:00 There's a lot of simplification you can do here.

52:02 And then the plus sign to add a new one.

52:05 I want this to actually be like a button on the bottom

52:08 right of the phone that hovers over everything that I can press.

52:11 It should be a big plus button.

52:13 So move that to the bottom right of the phone overlay.

52:15 This is a common design I've seen.

52:17 All right.

52:17 So we're making like six different changes here.

52:20 And it is really this easy.

52:21 And we can run this.

52:22 And so now this is just going to change the iOS app.

52:25 And we can actually specify that iOS app changes only.

52:30 And it looks like that it's done.

52:31 We can come over here and let's see what it looks like.

52:34 It is much more simplified.

52:36 So if you look at this, it does look a lot better.

52:39 Let's see if the placeholder text is just search.

52:42 It is.

52:43 Now there's this overlay button right here that is

52:45 plus that allows us to add an item, which I think is better.

52:49 And this app is looking pretty good.

52:51 And I actually was just reminded of a feature that we asked to add earlier,

52:56 which is I wanted agents to be able to add things to our second brain.

53:00 So if we copy these instructions right here,

53:03 and if we actually let's just go to a new chat and say use this skill,

53:08 add these tweets to my shared brain.

53:12 Okay, let's see if this works.

53:14 Okay, so it's done.

53:16 It said added all three tweets to shared

53:18 brain using the Google authenticated Firebase session.

53:21 The feature that I wanted I wanted to allow for agents

53:24 to add things to my second brain on my behalf.

53:28 Let's see.

53:29 Wait.

53:29 Oh, this just is my post.

53:31 Let's see all users.

53:32 Oh, it did it.

53:34 So, there you go.

53:35 It added this codeex for everyday work cla review and Claude Opus 4.7.

53:42 So, the agents were able to add it.

53:44 However, I'm not sure what account it's from, but this is really cool.

53:50 The agent feature does work.

53:52 The agent can add things to the database as we originally designed.

53:55 So, in summary, in this video, we created three apps using codecs.

54:01 We created this full web app and in a couple of prompts,

54:04 we converted it into a desktop app and an iOS

54:07 app that shares that same backend and storage and everything.

54:11 And now this is usable by everyone on my team at this exact domain.

54:17 They can sign in, they can add to the second brain,

54:19 and they are able to see all of our posts.

54:22 And so this is more than enough for you

54:24 to get started and start experimenting with building a web app,

54:27 a desktop app, or an iOS app.

54:29 I could push this all the way to the end and get this app on TestFlight

54:33 and then onto the app store and even put

54:35 a payw wall on it and start making money.

54:38 Uh, I could also put the desktop download link on the internet,

54:42 but that's not in the scope of this video.

54:43 I'm going to make dedicated videos on how to create

54:46 a desktop app and how to create an iOS app.

54:49 These are very deep videos that are this video would be 6 hours

54:53 if I went into all of the details of iOS apps and desktop apps.

54:58 So, I think this is a good stopping point for you to get your feet wet.

55:01 If you have a chatbt subscription, you can literally use codecs.

55:04 Try to build an app.

55:05 You can use Firebase.

55:06 If you don't want to use Firebase,

55:07 you can use Superbase or Neon for the backend database and storage.

55:11 I really want to know what you guys are building,

55:13 so let me know in the comments.

55:14 But this is a really fun video.

55:16 We are actually going to use this internally,

55:19 and I'm really excited to see what you build.

55:21 Anyway, let me know what you guys build in the comments.

55:23 I'll see you here for the next