Vibe Coding for Beginners (Full Course 2026)
Riley Brown
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.