How To View Your App with ChatGPT Codex
Let's learn how to use ChatGPT Codex📅 2025-06-13
Transcript
[00:00] chat GBTC codec. Let's learn how we can actually start using it. I'm going to show you a real developer workflow from a website that is completely live. I'm going to show you from start to finish how we can use Codeex as a nice little AI helper. Does that sound okay? Let's jump in. Welcome back, y'all. We got another Codeex video. As a lot of you were requesting for me to show you an actual workflow. So, in this video, I'm going to show you how to use Codeex here. I'm going to deploy to my actual live website link here and get going. First things first, make sure you connect your GitHub account. I show you in 10 minutes how to do that in the
[00:31] description down below. That's going to be a nice little video to click off to. For now though, we're going to assume that you connect to your GitHub account and we're going to add our nice little repo. To do that, I'm going to come up here to environments and I'm going to be connecting my private repo of my website. So, I'm going to say create new environment. Once you've connected your GitHub account, you'll see it right up here. Mine is called Coffee Field Bump. I'm going to choose my relevant repo, which is going to be web cafe land. I'm going to scroll down here. We can add a description. So I can say my real website. And then from here, we're going to come down and I'm going to simply hit
[01:02] create environment, which I'm covering right now. So right here, create environment. Once you set it up, we're going to come up here to use this. I'm going to make sure that I have it selected right above me right here. And right now, you notice we only have one branch. So in order to effectively use codeex here, we're going to create a separate branch. And this is very typical in software development workflow where before you create really big changes to whatever you're coding, whether it's a software or web app, we create a separate branch. So let's do that. Go ahead and head over to your repository of your local code. Whether that is found in your cursor AI, Windsurf, VS Code. Mine is found in VS
[01:34] Code. It's the same situation no matter what platform you use. And we're going to go ahead and open up terminal. So I'm going to come down here. I'm going to select terminal and proceed. So the first major thing we need to do is make sure this code is just running so we can actually see it. So to do that, we're going to do npm start. Once we do that and we've rendered it, let's assume we have our application here. We're going to do the first major step to know how to leverage codeex. I'm going to go ahead and open up a new terminal window by selecting this plus button right here and we're good to go. So, we're inside our repository. We're going to do the following commands. First, just confirm what branch you're on. So, do get branch
[02:06] main and we're going to do get checkout dashb and then whatever you want to call the branch name. So, I'm going to make a couple changes here when it comes to verbiage that's used on the website. Add some mobile responsiveness. So, I'll just say like mobile words. Doesn't matter what it is. We're just going to know how to reference it. So, I'm going to enter again and we're good to go. to ensure you're in the correct branch and we can mess around, mess up, doesn't really matter. You're going to see it right down here. Mine's called mobile words. Let's proceed. So, now that we have that branch, we're going to go and just do a real quick push here so we can start seeing it in codeex. Specifically, what you'll notice is if you come back
[02:37] to codeex here, you're like, Corbin, where's my branch? That's because we need to push it into the cloud. To do this, we're just going to make a small change here. So, coming to app.js, we'll add test1235 save. And then in our terminal here, we're going to say get add.get get commit dash test. This is going to be the name and I'll show you what this looks like on GitHub side and we're going do get pish origin and we will do mobile words same branch name. Once you push like that, it'll pop up in your git repo here. We can simply just create a PR here. It's not necessary to do this
[03:07] right off the bat, but I'll just do new words in mobile here. And we're going to say create pull request. I dive deeper into what this means at a base level in another video which I'll link down which is a 10-minute video on GitHub. But the idea here is that any changes we make here on out on this specific branch won't break our original code found in Maine. I'm also going to show you how to merge this using codec. But now that we've done this, I'm going to reload. I'm going to come over here to enter branch. And here it is. Mobile words. Now we are in the ball game. Now we can
[03:38] just shoot off here and find out what we want to change about our website. So the first major thing that was identified in my previous video is Corbin, how do I render this code so I can actually see what's happening npm start and that's going to bring you to your actual application assuming it's a reactbased app like we've created a ton on these videos. So I want to do two major tasks. The first one is I'm going to change school to the actual school's name that we have here which is now called the community builder console log. Check it out description down below. And on top of that I also want to have this be more mobile responsive. So I'm going to hit inspect here and show you what I'm
[04:09] talking about. If I hit inspect, I come up here to this little computer. I click that. I can use this little sidebar to see what it looks like on different viewports or desktop, mobile, tablet, whatever it may be. Some of y'all are crazy right now and watching this on TV. I don't know how. Idea being though, as you'll notice, is that when this gets more towards the mobile viewport, it doesn't look bad. I like it. It looks good. But this right here, it's a little excessive. So, what I'm going to do is I'm going to have codeex remove content catalog as a button in just the mobile view and just keep take the website. And I guess this kind of parlays well with
[04:40] what I referenced earlier as take the website takes you to that three-hour video. Three-hour video, Corbin. Three-hour video and for free, 191 minutes, website links, GitHub repos, everything you need to know about AI coding. Task one. Let's proceed. So, what I like to do, especially when coding with AI models, is be very specific on what you want to happen. So, on the homepage, specifically in the component of investment G, this is where the school naming exists. So coming over here, we're going to go ahead and identify the specific file of investment G. This is not always necessary as it
[05:10] essentially has your entire code repo. So you could just kind of talk to it more in a lax way. But I'm going to say, okay, for investment G, can we have this? So school now says builder console log. Hit code. As I'm not asking a question here, I actually wanted to code to this PR pull request. Now, what's great about codeex is that we can actually fire off our next task. Now, if you remember, our next task is identifying that content catalog button. this button up here on mobile, I don't want it to show. So, I'm going to go ahead and put in the prompt. When I make the website go into mobile view, I don't want the button content catalog to show. And I'll hit code as well. So, now we
[05:41] have two tasks firing off. Our next step here is going to be pushing this to our specific branch. Then, we're going to pull this code into our local computer here so we can actually visually see it to see if we even like it. We got our first task done. Rename school to builder console log. I'm gonna click it. This is a very simple task. I know I can get more complex, but I just want to show you functionally how we do this. Coming down here, it did it perfectly. Builder console log. So, I'm going to go ahead and come up here and say create pull request. Then I can simply hit view pull request. So, the workflow here is
[06:11] that we've created the pull request. We can go ahead and merge this pull request and we're going to be able to see it live and rendered on our code here. So, delete this branch here. In theory, if you want to work directly in the branch, then you would simply just copy and paste over. But if I come back over to our VS Code right here, we can see what this would look like if I do get pull origin. And then we're going to grab the exact branch name. So this is mobile words. I hit enter here. And I notice you can't really see it on the screen. So let me move it up a little bit, y'all. Right there. Hit enter. And this is going to
[06:43] pull the cloud code. So what you'll notice here is we're going to get an update. Boom. It's updated. So now with that done, if I come over to my rendering, you will notice it says builder console log. Now pretty nice. Let's see how I handled our other task of mobile responsiveness. As I was more ambiguous, I didn't identify an actual file name. I just let it search. Let's click. As you already know, we can kind of scroll through the file, see all the relevant changes here, create pull request, and let's see if it works. The workflow here though, as you'll notice, because of the fact that we're creating PRs and we're merging into this separate
[07:14] branch, you want to do bigger changes to your underlying app. So, I'll merge this and then I'll delete it. Delete branch. We'll do get pull origin the branch name again. Mobile words. I know it's a little cut off. Don't worry. You you'll see the command. And then with that change, let's see if it worked. So, inspect. And then we are expecting this little content catalog button to disappear. So, close, close, close. Boom. It has successfully disappeared on mobile. Pretty nice. I show in that other video that I referenced, that 3-hour one, how to actually push that to a live website link. I also have a
[07:44] shorter one that's only 28 minutes long that you can check out as well. But here's the big consensus of using codeex in this kind of workflow now that you know how to see the code live in an actual website browser. Right? It's kind of annoying coding in the dark. Do big changes in this way, right? You're going to make prompts that are pretty lengthy here. Try to get a ton of code from codecs here. Then you're going to merge it into that branch that we just saw there. And then we're going to take that branch, which I'll show you right now, and merge it back to main. And then we'll have a codebase that is up to date with the help of codeex. So looking
[08:16] here, we got our two merges from Codeex. We're going to be able to take mobile words here and merge it back to main. Now knowing this, let's say you're using Codex, you do a bunch of PRs and it just goes absolutely sideways and it's horrible. Don't worry, just simply delete the mobile words branch. For now, though, we're going to assume that I like this code. It's good code. So I'm going to say merge pull request. What this is doing is this is taking that mobile words branch we just created and putting it to main. So I say delete branch here. Coming back to web cafe land, you'll notice that it says up here it merged with mobile words and then
[08:47] just to confirm, I can click in and if we go to views, we go to investment G, it should say builder console log and it does. Perfect. So here is the cleanup workflow then. So once we're done, we're good at the branch. We had our fun. I'm going to do get branch again. Okay, I'm in mobile word still. So I'm going to do get checkout and I'm going to do main. Let's go back to the main branch. Get branch again. Confirm. Okay, we're back in main. Now we just do get pull origin main here. And this is going to grab the most up-to-date code in that little repo. And boom, main branch has been fully and successfully updated by
[09:19] codeex. And last little thing here, which is going to be helpful so you don't get a bunch of branches. You're like, Corbin, I got too many branches. You do get branch. Get branch- d capital D. Copy the branch name space. Paste a branch name. Enter. And that branch has been successfully deleted locally on your computer. Here are two resources that can help you out if you get stuck. First one, check out builder Wisconsin log in the description down below. This is a community that I'm currently running. I answer questions here. I have a cool little exclusive series where I give my insight of different pivots I made in business and just my entrepreneurship journey. Check it out.
[09:49] But if that is not your cup of tea, you can also check out a platform here called Bumpups. You can grab this YouTube link, quite literally look up, double click that YouTube link, paste it into this platform, and ask more questions on this topic. So there we go. That's how we use chat GBT codeex in a developer workflow. Let me know what you think. I plan on doing a pretty big series here, y'all. I'm going to show you from scratch how to build out an actual software application. I'm going to go over the text tag. I'm going to use AI to code it all cuz you know what? I'm lazy. I don't want I don't want to code anymore. I don't want to type. So, I'm going let AI type for me. Those are two random videos. Make sure you leave a
[10:19] like. And one last thing, one last thing. If you're still here, 80% of y'all have not hit that subscribe button. I got like a four- fifth here. That's four fifths. I don't want that. Hit that subscribe button. Okay, I'll see you in the next