Claude Code Tutorial: I Built a Full App in One Session
Claude Code TutorialsFresh📅 2025-12-10
Tutorial Overview
┌─────────────────────────────────────────────────────────────────────┐
│ LEARNING PATH │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ LEARN │
│ ───── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Watch │───►│ Understand │───►│ Follow │ │
│ │ Tutorial │ │ Concepts │ │ Along │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ PRACTICE │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Try It │───►│ Experiment │ │
│ │ Yourself │ │ & Adapt │ │
│ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ MASTER │
│ ────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Share & │ │
│ │ Your Own │ │ Iterate │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Takeaways
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] The festive season is here, so I thought it would be fun to vibe code a secret Santa app together. And this app includes all the bells and whistles. It allows users to create groups, invite members, share gift ideas, and a lot lot more. So, in this video, we'll cover everything from project setup to building the app, implementing the features, and finally deploying the project to production. So, anyone in the world can use our app. Now, I know a lot of you like using platforms like Bolt or
[00:31] Lovable to build these applications, but I really want to encourage you to follow this process instead. All you need is to install a code editor on your machine like VS Code or Cursor. I'll be using Cursor in this video. And all you have to do then is open a folder on your machine using cursor. So, at the moment, our project folder is empty. Now, deciding on which technology stack to use can be quite difficult. You can of course ask your coding agent to recommend the stack and then set up all
[01:02] the dependencies for you. Now interacting with the coding agent in your IDE is really simple. If you're using cursor, you can press control and L and now you can start a conversation with your agent. Of course, you can change modes as well. So you can switch it from agent to plan to ask mode. So you could just switch to ask mode and then ask the agent to walk you through this process. And for this video, we will be using Anthropics models, more specifically Opus 4.5, which is the leading coding agent at the time of
[01:34] recording. Now, if you don't want to use cursor, you can also use Claude Code. So, really, all you have to do is open up your terminal. Then, we have to install the Claude Code CLI tool. So, I'll link to this page in the description, but really all you have to do is run a command based on your operating system. Since I'm using Windows, I'll just copy this command and then run it in the terminal. And now that we've installed the CLI tool, we can simply run the command claude. And this will start up Claude code. You
[02:04] might be asked to authenticate your Claude account at this stage. And you will have an option of using your Claude subscription or an API key. In my case, I already have a Claude subscription, so I just went with that option. Now, if you don't want to use the CLI tool and you don't want to use cursor either, you can also go to your extensions and install the Claude code extension. Whichever option you go with, you're now ready to start using a coding agent. Now, this is not a complete tutorial on using Claude Code, but you can also
[02:35] switch between different modes by holding shift and pressing tab. This will go to auto accept mode or planning mode and then we can have a conversation to plan out our application. Now, of course, CK code can recommend a text stack and set everything up for you. But in order to speed things up, I've already set up a boilerplate project template for you. And this is free to use and you can build some impressive applications with this. So really all you have to do in your terminal is run the command npx create agentic- app at
[03:10] latest followed by space and a period. This will copy the boilerplate files into this root project or you can provide a separate folder name like my app and everything will be copied into a subfolder called my app. I'm simply going to copy everything to the root folder. Then let's press enter and you can select npm to install all of the dependencies or if you've got pmp npm set up you can go with this first option. This will copy across all the
[03:40] files and create an initial commit. If you experience any issues while running the npx command you might have to install nodejs. So simply go to nodejs.org and then download and install node. And this is not required, but if you want to use PNPM, I'll link to this article as well. And really, all this involves is running a single command in your terminal. Either way, the setup is complete and we're now ready to use our app. So, if you are curious about the stick stack, we're using Nex.js for both
[04:12] of our front end and our backend logic. Then, we'll use a Postgres database to store all of our data. For user authentication, we will be using better o. And for any AI related functionality, we'll be using the versel AI SDK along with open router as the provider. Now, enough about the text stack. Let's start planning our project. So, I'll use voice to text to speed things up. I would like to build a secret Santa app that allows users to create groups, invite friends,
[04:45] share gift ideas, and more. So have a look at the text stack and then propose the features and the design of our application. All right. So this is a really super simple prompt. Let's send this. The agent will eventually ask us clarifying questions. So here's the first question. What scope should we target for this initial build? Will we just build an MVP with the core features like groups, invites, secret Santa draws, basic wish lists? So just the basics. or will we go for a full feature
[05:17] set which includes AI suggestions, anonymous messages, notifications, and all enhanced features from the start. Let's actually go with option two, right? For user authentication, we'll be go with Google Oorth or email and Google Oorth. We'll actually use Google Oorth. How should notifications work in the MVP? In app only. So, we'll show notifications within the app dashboard. No email infrastructure needed or do we want to do email notifications? Now
[05:48] setting up an email service can be really tricky. So let's just do inapp notifications. What priority should AI powered gift suggestions have? Post MVP or it should be included. So this will leverage the existing open router integration to provide gift recommendations from day one. Let's go with option two then and let's submit this. So, what we can do now is simply read through this implementation plan and ask the agent to make any changes if we're not happy with anything. So, I'm
[06:18] just going to add a few more things actually allow the users to select from different currencies. By default, you can set it to USD, but the user should be allowed to change their currency value. Also, I need you to really think about the theme and the style of this app. It should be lighthearted and fun and use colors typically associated with Christmas. If possible, it would be really cool if we can add a little snowflake particle effects slowly coming down the screen. I don't know. Let's
[06:49] just send something like this and see what happens. All right. So, we now have some details around light and dark mode. You know what? I think we're ready to go. So, I'm going to press escape. Then, I'm going to go out of planning mode. So go to edit mode and then run the command create feature. Now this is a special command that I included as part of this boiler plate. If you're not using claw code and you can't see that feature. So if you're using any other coding agent and CLI tool, you can simply go to the
[07:20] claude folder commands then grab this create feature file, drop it into the conversation, and then ask the agent to follow that prompt. And what this command does is it actually creates a new folder within this specs folder for our new feature. And within this folder, the agent will now create three files. The requirements file, which basically contains all of the stuff we just planned, as well as a step-by-step implementation plan. And it will also create an actions required file where
[07:51] the agent details any manual steps that we have to do like creating accounts and supplying API keys. Now, why are we doing this and not simply asking the agent to start building directly after creating the plan? This all comes down to context windows. Chances are we're already using a lot of the context window with this plan. When we enter the command /context, we can see that this plan is already taking up almost 80% of the context window. This means if we
[08:21] continue with the implementation in this conversation, we're soon going to hit the context window length and compacting is going to run losing a lot of important context. So with this workflow, we're simply summarizing everything that we've discussed so far and storing it in separate files. So we've got our requirements file. Then very important, we've got this implementation plan that is split up into phases. And within each phase, we have actionable tasks. And as the agent
[08:52] works through these, it will actually mark these tasks as complete. So if we restart the conversation or close the IDE, we can always come back and ask the agent to continue. And the agent will simply look at this file to determine what the next steps are. Then we also have this actions required file. This will list any manual activities that we need to implement. So for example, we need to ensure that the database is actually up and running. We also have to provide this Google Oorth credentials in order to sign in with Google. And for
[09:24] the AI functionality, we have to store our open router API key. And if you don't know how to do any of these things yourself, you can simply ask the agent by dragging this file into the conversation and ask the agent to walk you through these step by step. I mean, how simple is that? Now we can simply clear the conversation to free up that context window. Now before we start implementing these features, I personally like to create a checkpoint or a commit at this stage. Commits allow
[09:55] us to roll the project back to a certain point in time. So if we make a mistake, we can always roll back and undo our changes. So to create a commit you can either go to source control in the IDE give your commit a name like add plan and you can simply press commit. Another shortcut is we can actually get the agent to do this for us by running the command / checkpoint. The only difference being that the agent will now have a look at all these unttrack changes and then write the commit for
[10:26] us. In fact let's actually run this command. You will notice at this point we only have this initial commit. And this was created when we installed this boilerplate project. And in a second we'll see a new commit just above that that was created by this agent. And there we go. We have this docs commit. And all of this was written by claude code. And this does indeed detail everything we just added. Cool. So this means if we ever make a mistake, we can simply roll back to this commit or checkpoint. There's another thing that these commits allow us to do. We can now
[10:59] push these changes to a remote repository. And that's something I like to do at this stage as well. So if you do want to follow along and deploy your project to production, then you can follow along with this step. For this, you will have to create an account on GitHub. So simply go to github.com and create an account. And you will also need Git installed. So you can just go to this website and download and install Git. Then really all you have to do is from your code editor click on publish branch. Now you can select the
[11:30] visibility. I'm simply going to make this private for now. And now we can view this project on GitHub. So if we actually click on that link, we can see this code repository that contains all of the changes we made so far. Now this is extremely valuable because if something had to happen to your local PC, you would lose your entire project. At least by deploying to GitHub, you have a backup of your project in the cloud. Now, there's another benefit of deploying this to GitHub. It makes it really easy to deploy this project to
[12:01] production, but we'll have a look at the production deployment a bit later on in this video. So, there's actually another really cool benefit of deploying your project to GitHub. You can get Claude Code to continue working on your app in the cloud. So, you can use Claude Code web to continue working on your project. All you have to do is select your GitHub repository from this dropdown and then ask the agent to make changes so the agent can continue working while you're asleep or away from your PC. If you do get stuck with git or get up or have any
[12:31] issues then definitely join my community which you'll find in the link of the description and either myself or one of the community members will be able to assist you. So let's have a look at this actions required file and see if there's anything that we need to set up for this project to work. For this we need to set up this Postgress database. Now this is actually really simple. The easiest way to run this database on our local machine is to install Docker desktop. So go to docker.com and download and install Docker Desktop. And after
[13:02] opening docker desktop, you won't see any containers running. So then back in our project, let's go to this docker compose file and let's go to this Postgress database name. I'm going to remove dev and replace this with something like ss for tutorial. So I'm just going to copy this name and also let's go to this env file and look for this postgress URL variable and replace the name with a new name that we
[13:33] created. Then let's open a new terminal session and let's run the command docker compose up dash d. So this will create a database and start it. So every time you start your IDE and you want to continue working on your project, really all you have to do is run this simple command to start up that database. We can indeed see our database is running. And by the way, if you wanted to see the tables in your database, you can simply run the command ppm run db studio. This will
[14:07] give you this URL. And if we open this, we can see we currently don't have any tables, but that's perfectly fine. We'll set all of this up during this tutorial. At least our database is now running. So, let's go back to Claude Code. So, let's see what else we have to do now that our database is running. We have to provide a Google client ID and a Google client secret. So, go to cloud.google.com and sign into your account. Then click on console. Then from this project
[14:37] selector, click on new project. Give your project a name and click on create. Then select your project. Go to the menu and click on APIs and services. Now this might feel like a lot of steps, but it's really not that bad. Let's start with the oorthth consent screen. This is that popup that shows up where you have to select your Google account. So let's click on get started. I'll call the app secret Santa. Select your support mail and click on next. For the audience, click on external and next. Then enter a
[15:10] contact email and click next. Agree to the terms and click on continue and create. Then click on audience, publish app, and confirm. We're almost done, I promise. Let's click on clients, create client. For the application type, select web application. And let's give this a name like secret Santa. dev because we can create different keys for production. Now scrolling down, we just have to provide this authorized redirect URI. Click on add. Then back in our
[15:43] project, go to the env file and look for this Google client ID section. Here I've given you an example of what that URL looks like. So simply copy this and add it to this field. And let's click on create. This will give us our client ID which we can add to this. env file as well as our secret which we can add to this secret variable as well and let's save this. Now finally let's have a look at what else we need. We also have to provide the open router API key. So if
[16:16] you want to add AI functionality go to open router.ai then you will have to add some credits to your account. Once you've done that go to keys then click on create API key. I'll just call mine secret Santa tutorial. Let's create the key. Let's copy the key. Then back in our project, go to the env file and add the key to this open router API key variable like so. Now, we can also select which model we want to use. So, to find the model,
[16:47] let's just go to the models page on open router. And I think for this, let's just go for a really cheap model. And I know this one is really old, but it really is such a cheap model. So, let's use GPT4 mini. Of course, you can use any model you want. So, I'm just going to copy this back in ourv file. Let's replace the model with this. Cool. We're actually done with all of our steps. So, now it's time to implement our features. So really all we have to do is grab this
[17:20] feature folder and drag it into the conversation and we can ask L to implement the solution one phase at a time keeping the context window lean and precise. So we could just say hey please go ahead and implement phase one. Mark the tasks as complete once you're done. And we could then send this prompt. And what the agent will do is look at this implementation file, grab phase one, implement all of these changes, and then mark this as complete as it goes through
[17:51] these changes. And at that stage, you can simply clear the conversation, grab this folder again, and ask the agent to implement the next phase. Now, I've shown this workflow in all of my previous videos. So, in this video, I actually want to show you something different. This is a workflow that I've started using recently and I really enjoy it. Now, this is optional. If you don't want to do this, you can use the old way, but this is really cool. Watch this. So, instead of pulling in this folder, I'm going to run a separate
[18:23] command publish to GitHub. Since we've deployed this project to GitHub already, we can run this command. And this is actually going to take everything in this folder and create separate issues in GitHub as well as a board where we can track the progress. So this does something really cool. It created this new GitHub file. And this just contains a whole bunch of information around what was created on GitHub. But what we're really interested in is if we go back to our GitHub repo and we refresh this, we
[18:56] can now see that we've got 10 issues in this issues tab. And what the agent did was actually create an epic for this feature. So if we open this up, we can see all the initial requirements in this epic file. And this epic is also linked to all of the issues for each of these phases. So if we go back to our issues list, we have an issue for every phase. So phase one, two, all the way to nine. All right. And if we open up any of these phase issues, we get an actionable
[19:27] list of tasks. And if we scroll down, we also get the technical details and things like the CLI commands and acceptance criteria. Now, what's really cool is we can go to the projects menu. And now we have a project created for this feature. And if we open this, we can see all the issues linked to this feature. We can also change the view to a board or a road map. So let's go to board and now we have the scan band board showing the status of this implementation. So this can be really
[19:59] useful if you are working in a team environment where other team members might want to track the progress of this implementations. And cool now that we've created this GitHub issues. We can start with the implementation. Now of course we don't have to drag in this folder anymore. Really all we have to do is run the command continue feature. The agent will now intelligently figure out that our issues are actually being tracked in GitHub. So it will read the issue details from GitHub, implement the feature and then update the status as it
[20:30] continues with the work. So as we can see it figured out that issue two would be the first issue to implement and looking at our issue list that is correct because the first issue is actually the epic and the second issue is the first phase that needs to be implemented. And I didn't touch a thing. The agent automatically moved the card from to-do to in progress. And once the agent is done with its changes, it will move the task to done. And we can then move on to the next task. Right, it's been a few minutes and I can now see the
[21:01] task is moved to the done column. And if we open the issue, we can see the status was set to done. All of these tasks have been marked as complete. And if we scroll down, we also get a summary of all the changes that were made. And we can see that lint was run type check and we also ran the database migration script. This simply copied across all the new tables to our actual database. The agent actually tells us exactly what the next steps are. We can simply run the continue feature again. So first
[21:33] we'll clear the chat to free up the context window. Then let's run continue feature. So agent is saying that phase one is complete. So let's have a look at phase two. and it correctly identified that the next phase to implement is indeed phase two which is issue three in GitHub. So I'll simply repeat this process until all of the phases have been implemented. Oh, and before I forget, here's a little pro tip. Something you can also do is open up another claude session and then we can drag in this feature folder and then we
[22:05] can then say something like let's have a look at all the phases planned for this feature and see if there's anything that we can implement in parallel. So look for any phases that are not dependent on each other that can be implemented in separate tracks. I would like to split the workload between different developers without them being dependent on each other. So look at the getup issues and give me the different tracks with the issues assigned to those tracks. I'm just going to go to planning
[22:37] mode because I don't want this to make any changes. So we could implement these in parallel. So track one covers phase one, three, and four. Then track two could be phase two only. Then track three gives us phase five and phase 6. And for track four we could implement phase 7, etc. So if you wanted to speed things up, you could have multiple terminal sessions running claude code and you can then tell the agent that hey you're working on track one so go ahead and implement these phases and you could
[23:08] have a separate session for track two, separate session for track three and let those agents run in parallel. Another way to speed things up is to run the continue feature command as per usual but then also add something to it like please implement phases four, five and six or you can just give the issue numbers as well. That way it can implement multiple issues in the same conversation. All right. So our agents has implemented all of these phases and if we have a look at GitHub, if you
[23:39] follow this process, you will notice that pretty much all of these issues have been moved to this done column. So everything seems to have been implemented. Only this epic issue is still open. And basically we can simply drag and drop this card to the done phase as well. But before we do that, one thing I like to do is to start a new conversation in claw code. Then let's grab this feature folder and drag it into the conversation. And let's say, so we just implemented all of the phases for this new feature. Please go ahead
[24:11] and review the implementation. Make sure that everything was completely and correctly implemented and fix any issues. And that's it. Let's send this. And that's really it. It's really helpful just to do a bit of a code review after everything was implemented because this agent will now look at the solution holistically and fix up any loose ends or any code duplication or anything that might have been missed. All right, so the code review is complete. So I'm just going to clear the chat and now we can finally have a look
[24:43] at our app. So let's start a new session. And in order to start a dev server, what we can do is run npm rundev or if you're using pnpm, we can run it like this. All right, this will give you this URL that you can use to open the dev server. But we actually expect this to run on port 3000. This is important because if you recall when we set up our Google credentials, we added localhost port 3000 as the URL. So what you can do
[25:15] is maybe just add a few more URLs or just always start a dev server on port 3000. So sometimes what happens is the agent actually starts the development server itself and now it's using that port. So what we can do is say please stop any process running on port 3000. Okay. Then I'm just going to press Ctrl and C to stop the server. And let's run this command again. And this time our app is running on port 3000. So let's
[25:45] open this. And if you're using cursor, it might use the builtin browser. But what we can also do is open the site in our actual browser. And this looks really cool. We've got this gradient background with this little snowflakes. Now, of course, if you don't like any of the styling, you can just chat to the agent to make any changes that you want. Let's also try to sign in. So I'll select this email address. And it looks like our Google authentication is actually working. So I can see my little avatar and if we go to your profile, all
[26:18] of this seems to work. Now we are getting this little issue bubble. So if we click on this, we can actually just copy this error. Then let's go back to claw code. Let's paste in that error and press enter. All right. While that's resolving this issue, let's try to create a new group. So, let's call this office 2025. And for the description, let's do Secret Santa Party 2025. For the exchange date, let's select the 25th of December. For
[26:49] the currency, I'll just leave it on USD. And for the budgets, let's do a minimum of $10 up to maybe $50. And let's create this group. Right. So, it looks like everything is working. If we refresh the app, everything is still there. Now, we also get this invite code and an invite link. I'll try to use this link to join this group. So, I'm going to copy this link. Then, let's actually sign out. Let's paste in that URL. It's asking us
[27:20] to sign in, which makes sense. This time, I'll choose a different email. Let's continue. Then, let's simply try to run this URL again. Let's join this group. And that's it. Now we can see both members in this group. So the question is how do we actually use this app? I'm going to let Claude code explain the process to me. But first a bit of house cleaning. We implemented this entire project. But the claw.md file still contains all the boilerplate text. So I'm actually going to clear
[27:50] this file and back in claude code. Let's run the command init. So front /init. Claude will now scan the entire project and create a cloth.md file and then I'll just clear the chat again. All right. So now that we've implemented this new feature, how do we actually use this app? What is the correct workflow? Actually, you know what? This is something I like to do. Please create a docs folder which is public facing explaining exactly how this app works
[28:23] with easy to follow instructions. So while it's writing the docs, I'm actually going to open up another claude code session. And what I want to do is actually replace this gradient background with something that looks a bit better. So I'm going to use this Aurora background component from aity. So you can find the link in the description as well. So what I'm going to do is copy the link to this page. Let's say please can you replace the gradient background on the homepage with this anity
[28:54] aurora effect instead. Then let's paste in that URL and let's send this. That looks really cool. This website is full of really cool components. So definitely check it out. And now we have detailed documentation showing exactly how to use our app. All right, let's give this a spin. So I'm signed back in with the admin user. And by the way, the notifications seem to be working as well. We can see that a member joined, which is really cool. Now, as the admin,
[29:25] we are able to draw names. So, basically, after everyone's joined our group, we can click on draw names to be assigned to someone. All right. So, let's try to add an item to our wish list. So, let's just say something like board games. And for the description, let's just say anything for four or and more players. And we can even set things like prices and product URLs. Let's just add this. And let's do another one. Let's do salty snacks. Any
[29:58] salty snacks will do. Let's add this as well. Then I'm going to switch over to my other account. Let's go to the group. Let's go to wish lists. Let's add an item for this user. I don't know. Let's just say booze. And let's just do wine will be fine. Let's add this. And that's it. So, let's switch back to the admin. Let's go to our event and let's try to draw these names. Right. So, we can see how many days are left. And we can also
[30:30] add exclusion rules. So, we can prevent certain people from being matched. That's really cool. Let's start a draw. And let's start. And now I can see who I've been assigned to. So let's reveal. And believe it or not, I was assigned to myself. Now this is definitely not correct. It's supposed to be $10 to $50. So this could just be a UI issue. But we can just pass that to Claude code to resolve. Let's go to view their wish list. And this guy just said he wants
[31:00] booze. So we also get this get AI suggestions option. So let's click on that. Let's click on get AI gift ideas. So, it's generating gift ideas apparently. And none of these gift ideas actually seem correct. So, let's fix that as well. All right. So, I've picked up a few issues. After starting the draw, I could see my assignment, but the actual budgets on that page is not correct. I created the event with budgets between $10 to $50, but on that
[31:33] screen, it's actually showing something like a,000 to $5,000. So those values are incorrect. Secondly, on the AI gift suggestion screen, it's ignoring the preferences from that user. So in this event, the user actually only had one item on their wish list, and that was booze with a description of any wine will be fine. But the AI then generated things like air fryers and a whole bunch of thing that was completely un unrelated to what the user asked for.
[32:06] So please ensure that we are actually passing the contents of their wish list to the LLM. All right, let's send this. All right, so let's try that again. Let's go to my assignment. This is giving me a page 404. So I'm just going to copy this. Also, I get a page not found error when clicking on this link. All right, so this budget is fixed as well. Let's go to their wish list and let's see if the AI suggestions are working. Now, the budget on this page
[32:36] also doesn't seem correct. So, again, I'm just going to copy this URL. The budgets on this page also is not correct. It's showing 1,000 to 5,000 instead of 10 to $50. Okay, let's paste in that link. And either way, let's see what this does. And hopefully this time it will actually consider the wish list from the user. And that's cool. These gift ideas are actually now wine related and they also fit within the budget. There are a few more UI related issues, but these
[33:08] are easy enough to fix, right? So our app is functional, but it can definitely look a lot better. And if you are using something like cursor, then you do have access to a lot of different models. And Gemini 3 Pro is really good at doing UI stuff. So at this stage, I'm going to just move away from Claude Code for a second and I'm going to ask Gemini 3 Pro to try and fix this UI. So I'm simply saying that you are an expert UI developer with a lot of years experience. Then I'm just going to say
[33:38] that the Secret Santa app doesn't look great. It feels bland and kind of corporaty and I just want the agent to see if it can improve the UI. So at this stage I did create a new commit. So this change list is clear. So we can roll back if we're not happy with these changes. So let's send this. And it's done. And I think this looks a lot better. I mean really Gemini 3 is really good at doing UI stuff. I also asked it just to change the name of the app to slay. And our logo even has this very
[34:08] cool little animation. And scrolling down. I think all of this looks so much better. Also, if we go to our dashboard, this looks really cool. Let's have a look at our group. This layout just makes way more sense. So, let's go to our match. And everything seems to be working, right? So, we can continue working on this app if we wanted to, but I think this is a good time to actually deploy this app to production. So, what we need to do is commit any changes that we haven't committed yet. So again, you
[34:40] can get your agent to create a checkpoint for you or I'll just do this one myself. I'll just call this redesign UI. Let's commit this. And now let's sync all of these changes with GitHub. And in fact, there's one more thing that I am going to do using claude code. And let's just say please run npm run build and resolve any issues. The reason we're running this is when we deploy this app to production, the production infrastructure is actually going to run this very same command to check that
[35:12] there are no issues. If there are any issues, that build is going to fail. And thankfully, we ran this because there are issues. All right, so it's actually fixed a few issues. So I'm going to let it create the commit by running the checkpoint command. Then let's send this to GitHub. And now would be the perfect time to deploy this project to production. The easiest and cheapest solution by far, in fact it's free, is to use Verscell. So simply sign into Versell, then create a new project. Then
[35:44] you will have to connect your GitHub repository and afterwards simply import the project that we just created. Now from the screen, we really don't have to change anything, but we do have to go to environment variables. Then back in our project, let's go to this env file. And at this stage, we can actually just copy everything and paste everything into this first field. And now we have all of these variables. We will change the values of the variables. But what I do
[36:14] want to do is just do some house cleaning. So let's actually remove this polar variable, both of them, as well as the blob read and write token. We're not using blob storage at all. We're also not using the open AI embedding model. So let's remove that one. Now the database path as well as next public app URL is still pointing to our local database and local server. We will change these in a minute. So let's simply leave all of the default values
[36:45] like this. And let's click on deploy. And actually this deployment is going to fail. So we need to create this database first otherwise the app will be unable to migrate our tables to the actual database and there we go it actually failed. So what we need to do is create a database for production. Thankfully we can do that with versel as well. So I'll simply create a new window with versel. Let's go to storage. Let's click on
[37:16] create database. Let's click on neon continue. Then let's click on continue again. Let's give this a name like secret Santa AI. Then let's create this database. Then let's click on done. And from this screen, let's show our secrets and look for this Postgress URL variable. Let's copy this entire string. Then back in our environment variables, let's paste in the link to our actual database. Let's try to deploy again. And
[37:48] this time it should work. Hey, that took a minute, but our project was deployed. Let's go to dashboard. And now we get this domain to our application. So if we open this, we can now access this app in this public facing URL. You can assign custom domains as well. Simply click on domains. And now you can either buy a new domain from Versel or add an existing domain. Now, I'm not going to register a domain as this really is just a tutorial, but it really is that
[38:18] simple. Afterwards, you will have an option of this versel domain or your very own custom domain. So, what we need to do now is copy our domain. Then, let's go back to Google Cloud Platform. Go to clients and let's create a new client. Let's select the web app. Let's call this secret Santa prod. And under authorized redirect URIs, let's paste in our domain. And just like we did with the local domain, just have to copy this
[38:49] example. We just have to add API/orth/callback/g Google. Then let's create this. This will give us a new client ID and client secret. So let's copy this. Let's go back to settings. Let's go to environment variables. Then let's edit the Google client ID. So we'll just replace it with a new value. Let's save this. Then let's copy the new secret. Let's edit the Google secret environment variable. Let's click on save. Then
[39:20] let's also change the next public app URL. Currently it's showing local host. So let's edit this and let's paste in the URL to our app. Let's save this. Let's click on redeploy. And let's redeploy again. This will now restart our server and redeploy the project so that the environment variables can take effect. So to view this deployment, we can just go to the deployments tab. And here we can see this deployment is currently building. And I forgot to mention that if you want to assign a
[39:51] different open router API key for production, of course, all you have to do is go to your environment variables again, look for open router API key, and paste in your production API key. Right, our production deployment is done. Let's open our app and let's see if everything is still working. All right, let's test this out. So, we're now in the live application. Let's see if we're able to sign in. And that's awesome. The O system is indeed working. Let's see if we're able to create new groups. Let's
[40:23] see if we can create this group, which we can. Everything is still working. So, I hope you enjoyed this tutorial. These long- form videos are a lot of work to create. So, if you would like to see more of these types of videos and support my work, then subscribe to my channel and hit that like button. Also, if you got stuck at any point in the video or just want to contribute to an awesome community, then definitely join my school community and I'll leave a link in the description. Thank you for spending all of this time with me and
[40:53] for an incredible year and have yourself a fantastic and safe Christmas. I'll see you in the next