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 ChatGPT subscription,

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

0:36 coding model in the world for beginners, Codex 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:47 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:53 All while learning the key concepts required for high-quality 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 Codex.

1:14 And it is where I do all of my vibe coding now.

1:17 In order to download Codex, 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:28 In which case, you will download for macOS,

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

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

1:37 And congratulations.

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

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

1:42 AI coding tool in the world to create applications,

1:46 like web apps, like desktop apps, like mobile apps.

1:50 In fact, in this video, we are going to create a web app,

1:53 and then we're going to turn that web app into a desktop app,

1:56 and then also a mobile app.

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

2:01 of Codex and the vocabulary that you need to understand in order to vibe code.

2:06 On Codex, you can basically just type your app idea and it

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

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

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

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

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

2:29 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 double click 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.

2:52 And if you just hover over

2:53 this, you see users/ Riley Brown/documents/simple app.

2:58 That is 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:12 And a very simplified definition of an app is

3:15 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 double click 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 a Microsoft Paint app,

3:50 simple web app, then run it locally.

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

3:57 which is GPT-5.5, will now begin writing

4:01 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, so after 5 minutes and 44 seconds, it responded and said,

4:20 "Built it as a simple React Vite paint app and I started it

4:25 locally." And then it has this little

4:26 component right here that says paint website.

4:29 So, this is the website that we've created and what happens when we hit open.

4:33 And there we go.

4:34 Look at this.

4:34 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 and it does work a lot.

4:53 And we have a color picker, so we can change the color to this.

4:57 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:12 Please allow me to use undo if I make a mistake.

5:19 Please make this edit.

5:21 And so, we can actually just very easily edit the app that we created.

5:25 Because again, we're just creating files.

5:27 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:44 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, and there we go.

6:11 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, 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, so now, what if I wanted to save my work

6:43 in the cloud so that I can work on it from another computer,

6:46 or I could send the link to someone else,

6:48 and they could work on this application?

6:50 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, 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:13 and I recommend you can make it private.

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

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

7:19 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, 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.

7:36 Because now, it created a link just like in Google Drive that you can copy.

7:41 And if we go back to Codex 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." I created a new repo and you can think of a new

8:00 repo is 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 Codex,

8:13 "Hey, I want to set up GitHub." And it will authenticate your account,

8:16 it will link you to GitHub and you'll sign in and then you'll go back to Codex.

8:20 And once it's done, it'll give you a response that'll look something like this.

8:25 Uploaded it to GitHub.

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

8:29 Remember this link just looked like this.

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

8:35 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:49 If you go back to Codex, we open up the side panel here,

8:53 we click these three dots, open in finder, we open up this app.

8:58 There you go, index.html, package-lock.json, package.json.

9:03 Here you go.

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

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

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

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

9:17 "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 and there you go.

9:28 It made it a little bit bigger.

9:30 And so, what this did is this edited

9:32 those files in this folder right here, right?

9:35 In this folder right here, open in finder,

9:37 in this simple app, it changed these files.

9:40 Somewhere in these files, it edited a line of code in these files,

9:43 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 Whereas 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 Codex, I can say,

10:00 "Please commit the changes to GitHub." That's what you

10:04 say if you you can picture this as like,

10:06 "Please update our saved application on Google Drive." That's basically

10:11 the equivalent for those of you who are fully on technical.

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

10:16 You basically just say,

10:17 "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." 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:37 Okay, so very, very quick review before

10:40 we dive into building a more complex application.

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

10:45 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 Codex,

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

11:07 And this AI agent will be running a coding model,

11:10 and in this case it's GPT 5.5, 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:27 And you saw the front end of our application that was that paint app.

11:32 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,

11:56 we used the Google Drive for nerds, also known as GitHub,

12:00 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:07 When it's on GitHub, it's called a repository.

12:09 I have no idea why.

12:11 And we gave the link to Codex 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, it updated the repo,

12:22 and that's why you see two commits instead of one.

12:24 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:31 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 X posts, 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, 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:53 This is where it gets interesting.

13:55 Since this is an internal tool that we're creating, I want my AI agent,

13:59 or any AI agent that I'm 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

14:08 to, please look through the database." It should be

14:10 able to scour the database and find the best

14:12 things that we can react to for a video.

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

14:17 and us a place where we can save uh different ideas.

14:21 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

14:34 block that can be given to any agent, like Codex 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 tokens,

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

14:49 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,

15:04 and organized enough that a team can use it every day.

15:06 And then, I gave a little I always like to do like, "In short,

15:10 this is a shared visual Second Brain." I like to kind of summarize

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

15:19 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 Codex.

15:26 And remember, earlier we created a new project for that simple app,

15:30 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, use existing folder.

15:37 And one thing that you can do is you can just hit start from scratch,

15:41 and it will just create a folder automatically.

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

15:45 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:51 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." So,

16:06 what I want to do is I just want to store my idea in this folder, 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, 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 Codex, and here is 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, 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:43 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 in 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 gone,

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

17:06 It's very temporary, right?

17:08 If if you uh 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're going to be using Firebase for three things specifically.

17:32 So that users can sign in, 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, so we can add assets like images.

17:43 And this is a little example that I've created before for Twitter, 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 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

18:10 that would be in a Notion database, right?

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

18:17 You can also create a 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 file.

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

18:36 But before we can just hop into Codex 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 in console,

18:48 and then we are going to click get or create a new Firebase project.

18:53 So then the the the following steps that I'm about to do

18:55 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 Codex.

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 once 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 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 Codex.

19:35 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 Codex and I'm just going to say this is my Firebase information.

20:13 Store it.

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

20:20 I'm just going to go ahead and paste it in here.

20:23 Do nothing else.

20:26 Mark down.

20:28 So we can enter that in Codex.

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 Firestore.

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 and we can hit create database.

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

20:50 start in production mode, create, 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:05 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 upload a ton of files to this.

21:16 This is just in case the project gets too big, it'll start charging you,

21:20 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 and we're going to hit continue link cloud billing.

21:39 So, everything is all linked up and we can hit done and we

21:42 can hit continue and now we can start this in production mode.

21:47 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 and so

22:01 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 When you select this part right here,

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

22:22 Just choose whatever one is recommended and then

22:25 hit save 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 Codex which Firebase project we're using which is

22:36 the shared space one and then

22:37 we basically enabled authentication storage and database.

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

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

22:45 And so, now we need to just tell Codex to build our app.

22:48 And if we open this up, we can see that the project is right here and don't

22:52 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

22:58 need to build this app entirely using Firebase for your DB,

23:06 storage, and authentication.

23:09 I want Google sign-in.

23:11 I've already enabled everything.

23:15 Please, can you build the entire app, and it should look good?

23:21 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:54 We have a local preview.

23:56 What we can do is we can click on localhost, 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:05 So, this Firebase error or off pop-up blocked

24:09 might be a limitation of this in-app browser.

24:12 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

24:22 were to sign in with riley@ uh kirkwoodbrown@gmail.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.

24:52 Here you can use inspect element or inspect.

24:55 So, if you right-click on your browser and hit inspect,

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

25:01 Here, what you can do, you can go to console.

25:04 We can just copy all this information here, and we're going to go back to Codex.

25:08 I'm going to just describe everything that's going on.

25:10 On the external browser, I can sign in with my account.

25:13 I tried to add x.com link,

25:15 and the it 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 often 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, and so we'll see what it does here.

25:50 Okay, 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:05 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:23 Remember we added the 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 Firestore database, and here we see users.

26:46 We see that there's one workspace,

26:49 and this workspace has like a unique ID that's right here and we

26:54 can click on items and then we can click on this one right here.

26:58 And so this is the Codex 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 Codex is good for non-coding

27:11 and here we see Codex is good for non-coding.

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

27:16 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:23 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 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 Codex.

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

27:58 to go back to Codex and I'm going to say,

28:00 "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 X

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

28:11 So I want you to figure out exactly how my mind

28:15 and other similar apps pull the relevant data so it

28:18 shows up and shows the thumbnail on YouTube and then

28:22 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

28:31 on here 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, 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 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:19 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, saved post from X.

29:30 So, I could say interest interesting podcast for coms.

29:35 And do I need to 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:41 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 Codex full 2026.

29:55 This is really cool.

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

29:59 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:13 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:29 Very cool.

30:31 Mind you, this is two prompts, I believe.

30:33 Two or three prompts we've created this.

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

30:37 So, if we add a new item,

30:39 and I will snag this Instagram video from Timothy Chalamet.

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:54 Okay, and these images are of 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.

31:12 If we were to add an item, we could Could 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:29 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 Codex.

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

31:39 Those work.

31:40 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, and we can run it.

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

31:49 All right, so it said fixed and deployed the storage rule.

31:52 So, the issue was that the screenshot hits

31:54 the Firebase storage before there's an item in the document.

31:56 Okay.

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

31:58 So, if we refresh this right here,

32:01 we should be able to go like this, add item, 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, so there's the screenshot.

32:11 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

32:27 this, 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 Codex.

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:58 like it should default to the most conservative,

33:01 simple, like literal title for it,

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

33:08 Yeah, it should communicate things concisely.

33:11 And then And we're going to use a lightweight AI model for this.

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

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

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

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

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

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

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

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

33:48 allow us to insert the ChatGPT technology into our app,

33:52 very similar to like a tool like Perplexity,

33:54 which uses all of the other companies' APIs and puts it into their app.

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

34:01 The thing about the API is in order to use the API,

34:05 it actually costs money, right?

34:06 Every time someone uses your app and creates a title, it costs money.

34:11 And it will probably be less than a cent every time someone adds something,

34:14 probably much less than a cent,

34:16 because it's very little amount of words or tokens.

34:20 But, nonetheless, you are going to need a key.

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

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

34:30 If you were using Anthropic, 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, 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, and I'm going to type my name.

34:56 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 back to Codex.

35:09 And within Codex, I'm going to say, "Here is my API key." Okay,

35:14 so I pasted my key below, and now I'm going to press enter.

35:17 And so now my prompt is running, my API key is included.

35:20 I'm going to add as 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, and it just does save post from X.

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

35:50 It renamed it.

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

35:52 It renamed it Codex for non-coding tasks.

35:55 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:06 Competition is for losers by Peter Thiel.

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:15 the YouTube videos are showing this like weird uh thing right here.

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

36:24 please make the YouTube videos like they have like this weird like overlay.

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

36:30 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, and now I'm going to square this in, and I just

36:40 want to like hone the agent's attention to this part right here.

36:44 And we're going to go back to Codex,

36:46 and I'm going to say, I'm going to now double-tap for Whisper flow.

36:49 And by the way, I'm using Whisper flow to speak into Codex.

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

36:53 Okay, what I want to do is I want

36:54 to change 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 drop-down,

37:13 and so I want it to be default like all category all categories.

37:17 And then, I want there to be

37:18 a platform drop-down 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,

37:34 and I 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 auto filtered,

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 the permissions because remember,

37:49 this is an internal tool.

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

37:51 if I select all users or select the other users.

37:55 And this will be an internal tool.

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

37:59 I should 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, speak, speak, speak.

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

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, 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 the background more gray,

38:38 and make it like a very slight gradient from gray to like

38:42 a slightly darker gray just to give it a little bit more energy,

38:45 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:51 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:03 So, by default, it queues,

39:06 so your prompt will just sit here and wait for the agent to be done,

39:08 and then it'll be entered, or you can steer it by pressing steer,

39:12 or you can press command enter.

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

39:17 All right, so I think it was a matter

39:19 of six or seven prompts 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, 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:02 Now, what I'm going to do is I'm going to hit save item.

40:05 OpenAI Agent Builder at DevDay.

40:07 That's exactly what this is.

40:08 This is really cool.

40:09 So, it it uses AI to name it, 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:24 So, now it's time to take our app

40:27 that's right now it is running on localhost:5175.

40:31 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 Vercel.

40:50 And you can very easily set up Vercel by going to plugins,

40:54 and we're going to search for Vercel, and you're going to download this plugin.

40:58 And then watch how easy this is.

40:59 Deploy to Vercel, 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 uh 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 on this link,

41:18 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:44 Now, we're going to go to the same Firebase 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:07 But we actually need to add the domain for the Vercel 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,

42:20 let's give it a refresh, continue with Google, 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:31 Here's all of my data.

42:32 It's on the Shared Brain riley.vercel.app, and that's it.

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

42:40 It is on the internet.

42:41 It is a real website on the internet.

42:43 And all we did to get there is we prompted Codex, the agent, which is GPT 5.5,

42:48 created some files, we iterated,

42:50 and the agent made changes to those files, we took a look,

42:53 we added authentication, database, so our data is stored,

42:58 we added a storage bucket,

42:59 so we can add those screenshots and even videos as well,

43:02 and we deployed it to Vercel.

43:04 We used GitHub to save our work.

43:07 Now, it's on the internet.

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

43:11 go from a web app to a desktop app and mobile app?

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

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

43:22 All right, so I want to turn this application into a desktop app and an iOS app.

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

43:28 Electron is just a stack.

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

43:34 and I have found it to be the easiest to use.

43:36 And we're going to use Swift, and this is for the mobile.

43:39 And I want to get a plan.

43:41 I want a plan to do this, and it will communicate with the same back end,

43:45 and all the database storage and authentication will remain,

43:49 let's say, connected, and I want all these apps to work together,

43:55 so my team can use any version.

44:00 And then we're saying, "Make a markdown file plan." So,

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

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

44:10 Okay, so it created this entire plan here and rather than creating a new

44:14 project and creating completely new context

44:18 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?" And it said,

44:28 "Do it in this project." And so what

44:30 the way that it's the agent is planning on doing

44:32 this is it's actually going to create an apps

44:34 folder and then it will have the web app,

44:36 it'll have a desktop app, and an iOS app all in one project,

44:40 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." 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:26 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 we are going to say,

45:38 "Can you please run the desktop app application?" This should be

45:43 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:54 I see a desktop app.

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

45:58 Here, 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 Codex this, 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:26 Okay, error off pop-up blocked.

46:30 Additionally, I got this error.

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

46:34 to the web 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 this little icon for it.

46:50 And called it Shared Brain.

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

46:53 Just this kind of square.

46:55 But, it has an icon on our computer.

46:58 So, if we just hit continue with Google, okay, it opened this up.

47:02 And now we can hit open Shared Brain.

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

47:06 Yes.

47:07 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.

47:23 Maybe 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.

47:53 App icon creation using AI workflow.

47:56 That's accurate.

47:57 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 it 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 and now we can enter it.

48:23 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 very similar to my mind.

48:33 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's already built.

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

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

48:45 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:56 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 which allows

49:07 you to run iOS apps 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 uh using Xcode and simulator.

49:21 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:32 Firebase and Google sign-in packages resolved.

49:36 Xcode is compiling the native app now.

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

49:42 I'm booting an iPhone simulator now.

49:44 Look, there we go.

49:45 Here's the simulator.

49:47 It should open up the app.

49:49 Let's give it a second.

49:50 There we go.

49:51 Look at this.

49:52 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.

49:59 Okay.

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

50:03 Okay, 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 and I'm going to say,

50:13 "I got this error on sign in." Okay, 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, continue.

50:24 All right, let's see what happens if we hit continue this time.

50:27 Boom!

50:28 On Codex, 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 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.

51:18 On the search bar, please make the placeholder text just say

51:21 search instead of search your second whatever because it's being cut off.

51:27 Ooh.

51:28 Ooh.

51:30 Ooh.

51:31 Oh, okay.

51:33 So, in the details for each one, like if I click on an item in the list,

51:39 uh it shows title, notes, status,

51:42 plan 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, so we're making like six different changes here

52:19 and it is really this easy 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.

52:26 iOS app changes only.

52:29 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 and if we actually let's just go

53:04 to a new chat and say use this skill add these tweets to my shared brain.

53:12 Okay, let's see if this works.

53:14 Okay.

53:15 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:27 Let's see Wait, 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 Codex for everyday work, Claude code 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.

53:49 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 Codex.

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 back end 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.

54:18 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 a paywall on it and start making money.

54:38 Uh I could also put the desktop download link on the internet,

54:41 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:57 So, I think this is a good stopping point for you to get your feet wet.

55:01 If you have a ChatGPT subscription, you can literally use Codex.

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 back end 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:18 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 video.