I Made a Free Boilerplate for AI Coding Agents (full stack)
Claude Code TutorialsFresh📅 2025-08-18
AI Agent Architecture
┌─────────────────────────────────────────────────────────────────────┐
│ AI AGENT FLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ USER │ │
│ │ QUERY │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ AI AGENT │ │
│ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ LLM BRAIN │ │ │
│ │ │ 1. Understand query │ │ │
│ │ │ 2. Plan approach │ │ │
│ │ │ 3. Select tools │ │ │
│ │ └────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ┌────────────┼────────────┐ │ │
│ │ ▼ ▼ ▼ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ Tool 1 │ │ Tool 2 │ │ Tool 3 │ │ │
│ │ │ Web API │ │ Files │ │ Code │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ │ │
│ └──────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ RESPONSE │ │
│ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Agent Components
- Agent configuration
- Tool integration
- Memory management
Transcript
[00:00] I created a template that will drastically speed up your Claude code projects and get you better results and it's completely free. Although I'll be using Claude Code today, this will also work with Cursor Windurf and any other coding agent. This is perfect for both vibe coders and experienced developers who simply want to hit the ground running. I have taught a lot of people how to use agents to build their projects and I keep seeing the same patterns. They would use platforms like Lovable or Bolt to get a beautiful UI
[00:30] working, but then everything falls apart. They can't get back-end systems to work, like user authentication. They're unable to persist data in a database or they're unable to store files. And that's exactly why I created this template to solve all of these problems that's been tripping people up. You can set this boiler plate up within minutes. And out of the box, it supports authentication, a connection to a database, beautiful UI components, and it's also AI ready, so you can add AI
[01:03] related functionality in your applications as well. So, in the next few minutes, I'll show you how to download the boiler plate, set it up on your machine. We'll also build a small application, and I'll show you how to deploy it to production so users can start using your application. Today I'm planning a series where we'll build realworld applications and instead of wasting a lot of time setting up our project, we'll use this template to jump right into the project. First, I'll give you a quick overview on how this boiler plate works and then we'll go through
[01:34] the entire process step by step. Sounds good? Let's jump into it. First, you can download the boiler plate by going to this GitHub repo page. Then under code, you can either clone the code or you can download the zip file. Then let's simply rename that folder and open it in our favorite code editor. I'll be using cursor in this video. Then let's open up the terminal and install the project's dependencies by running npm install. After installing the dependencies, we can start the dev server by running npm
[02:07] rundev. We can then open the project by clicking on this link. And now we can view our boilerplate project. When we scroll down, you will see the setup checklist. Now, technically this is all optional. If you don't care about any of these, you can simply start building your project by clicking on start building and then entering this prompt. But let's say we wanted access to all of these features. What we would have to do is rename this file to env. And in this file, we simply have to provide a few
[02:38] environment variables. Again, we will go through this entire process step by step during this video. So I've gone ahead and entered all of those details. And now we can see the checklist is complete and we can move on to the next step which simply involves migrating our database schema to our actual database. Now don't worry if you don't know what this means. Just know we need to run these commands in order for our database to work. I'll simply open up a new terminal and let's run the first command and then let's run the second one. And
[03:09] after we've executed these commands, we can try out these features by trying to access a dashboard, which should be protected if you're not logged in. Or we can try chatting to an AI agent just to test out our AI functionality. Let's try the dashboard. This is correctly telling us that we do not have access to the dashboard and we have to sign in. So let's try that. And after selecting my Google account, I am indeed signed in. I'm able to access the dashboard and I
[03:39] can also see my avatar image was built in correctly. I'm able to sign out and I can see my name and my email address. Now we can also test out our AI functionality by going to AI chat and let's click on go to chat. This will give us a very basic interface where we can say hey and if everything was set up correctly we can see the response from the large language model streaming in. Cool. And to start building, we can simply go to the start building section and click on get AI starter prompt. Now,
[04:12] this will actually generate a prompt for you that you can pass your agent when you first start to build your project. So, we could provide something like I would like to build a business listing platform that allows businesses to list their business and to assist users in searching for those businesses. When we copy this prompt, we can go back to our code editor. And if you're using cursor or windserve, you can simply paste in that prompt. Or if you're using clawed code, I'll simply start up a new cla code instance. And all we have to do is
[04:42] paste in that prompt and press enter. Now, I do want to show you what this prompt actually looks like. So, what I recommend you do is go to the docs folder and under business, simply paste in that starter prompt. If we have a look at what that looks like, it's a super detailed prompt that tells the agent what the structure of this project is and a lot of stuff like you need to overwrite the boilerplate content and of course if you scroll down we can see the section what I want to build and this
[05:13] includes your actual instructions and once the agent's done we can refresh this project and you can now see we actually have a working application. This includes user authentication and all the data in this app is actually persisted in a database. I also want to mention that you do have access to light and dark modes and we can also test out the authentication system. So let's try to sign in. This seems to work. So let's select my user and I can complete this form to add my business. And from the
[05:45] dashboard I can view the business that I just added. And of course, because we are connected to a database, when we refresh this app, our data is still there. And I'm actually going to try something. What happens if we enter a search phrase? We can see the search engine is actually working and pulling up relevant listings. And these are showing up because during build, claw decided to see the database with sample data. Either way, I just wanted to show you that this is the power of this boiler plate. So whether you're a VIP coder or an experienced developer, this
[06:17] template is perfect for you. It's extremely well optimized to work with agents and I will be adding to the repo all the time. Out of the box, I've already included a couple of commands that you can use to easily create checkpoints so that you can roll back. We have commands for documenting all the features of the application. And if you are using claude code, I'll also be adding sub aents to this project like this UI developer sub aent. that greatly improves the UI of your application. So, let's now go through this process step
[06:49] by step. And again, I want this template to appeal to everyone, whether you're an experienced developer or a non-coder who simply wants to vibe code their own solutions. So, if you're familiar with using Git and GitHub, then feel free to skip ahead to the next section. You will find a link to this repo in the description of the video. And again, this is completely free. So from this page you can definitely support my template by clicking on the star icon. Then when you scroll down you will see
[07:19] all the features offered by this template along with all the prerequisites. You'll need NodeJS will set up Git and we'll need a Postgres database if you are planning on using a database. Then I've also listed all the setup instructions on this document but don't worry we'll go through everything together. Let's start with the prerequisites. First, we need to install Node.js. So go to node.js.org. Then click on get NodeJS. Select your
[07:49] operating system and install Node.js. Then we also have to install Git. So let's click on download here. Then download and install Git for your operating system. Then if you are planning to persist your data in your app, which I assume everyone wants to do, we will set up a Postgress database. There are many different providers you could use to set up your Postgress database. But for this video, we will be hosting our database with Verscell and there's a good reason for it. We're also going to use Verscell for our production
[08:20] deployments in this video. So for me personally, it's just really easy to keep everything in the same place. So go over to versell.com and sign into your account. The free tier is extremely generous. So from this dashboard go to storage. Then click on create database. From this list click on neon and click on continue. Then select your region. I'm going to disable off and click on continue. Let's give this a name like
[08:52] YouTube tutorial and click on create and let's click on done. All right. That's all we have to do for now. You can leave this tab open as we will come back to these connection details in a few minutes. Now let's copy this repository over to our own machines. What you can do is at the top click on code. Then if you have git installed simply copy this URL or alternatively you can simply download the zip file and extract it on your machine. But I'm simply going to
[09:23] use git. And I do want to mention there's another reason why we installed git. We'll use it to do version control later on in this tutorial. This is how the checkpointing system will work. After the agent completed a feature, we would want to create a checkpoint of sorts so that if we make a mistake, we can always roll back to that previous commit or checkpoint. All right, let's copy this URL. Then let's create a new folder anywhere on our machines. And let's give it a name, something like todo app. Now, this should all be in
[09:54] lowercase characters and no spaces. Instead of a space, use a dash instead. Then, let's open this folder in our code editor. Again, I'll be using cursor, but for you, it might be winer or VS code. It really doesn't matter. Then, in the terminal, and by the way, to access the terminal, you can press control or command and tilda or at the top menu, simply go to terminal and new terminal. Then from here enter get clone then
[10:25] paste in that URL which you copied from GitHub followed by space and dot. If you don't specify dot it will create a subfolder within the current directory which is not what we want. So I'll simply delete this and instead let's run get clone with that URL space period. Let's run this. And this will now download that repo into the current working directory. Now that we've downloaded the boilerplate project, all we have to do is install the
[10:55] dependencies. So let's run npm install. So this will now automatically download and install all the dependencies for this project. And this only took a few seconds to complete. And what we can do now is run the dev server. We can do that by typing npm rundev. This command will simply allow us to access our application. So it gives us this URL which we can open in the browser. And there you go. If you see this page, then you successfully set up the boilerplate
[11:27] project. And if you don't care about having a database or authentication or any of these features, you can actually already start to build your application. Simply go down to start building, click on this button, and tell the agent what you would like to build. But the point of this boiler plate is to allow you to build advanced applications that include authentication and the database. So let's set all of this up starting with the database. Now I've built a boiler plate so it actually shows you what is outstanding in your application. And we
[11:57] can also see that the first step is to set up these environment variables. So what we need to do is back in our project rename this env.ample file to env. I'm just going to hide the terminal and then in this file we can provide the database connection. Where do we get this Postgress URL value from? Well, if we go back to our database in Verscell, I'm just going to click on show secret and what we're looking for is this
[12:28] Postgress URL string. So, I'll just copy this entire thing and add it to our project. Cool. So, after saving this file, we can go back to our checklist. We can see this step number two over here that shows you how to set up the database. All we have to do is run these two commands. Let's actually do that now. So back in our project, I'll just start another terminal. Then let's paste in that first command. And once this is done, let's grab the second command and run that as well. And now if we click on
[13:00] recheck, our database is now connected along with the schema. So if we wanted to, we can already start to build an app that's able to persist data in the database. And let's keep going. We also want to add user authentication to this project. By default, this project uses Google as the orth provider. And yes, it is free to use as well. It's not critical that you know this, but I just wanted to mention this as an aside. This boiler plate uses an authentication system called better or if you wanted to
[13:31] add additional providers. So maybe you don't just want to use Google, you can simply go to the documentation of better or then under authentication you can view all of the different providers like Apple, Discord, Facebook, of course Google which we will use and much much more. So if you wanted to get additional details on how to add something like GitHub as an example, you can simply go to the GitHub page, copy this markdown and then ask your agent to add GitHub as
[14:02] an authentication provider in your app. Now as I mentioned, we will be using Google as our provider. So what we need to do is complete this Google O section in thisv file. In other words, we have to provide this client ID and the client secret. So in order to set up those keys, go to cloud.google.com and then sign into your account or click on console. Then let's create a new project. So from this dropdown, click on new project. Let's give it a name like
[14:32] to-do list vibe tutorial and click on create. Then click on select project or select it from this drop-own list. Then from the burger menu, click on APIs and services. Now, this does involve a few steps, but it's really not that bad. And trust me, once you're used to it, you can speedrun this entire process in under 10 seconds. From here, go to OOTH consent screen. Effectively, what we're doing here is we're setting up that popup that shows up when you click on sign in with Google. You know, the one
[15:03] where you have to select your email address. So, from here, click on get started. Then, let's give our app a name like to-do list vibe. Then, select your email address. Click on next. Click on external. Then click on next and enter your email address. Click on next and select finish and continue. And finally click on create. Now that that's done, click on audience and publish app and simply confirm this popup. Then finally
[15:34] click on clients. Click on create client. For the application type, select web application. Let's give it a name like to-do list via tutorial. Then under authorized redirect URIs, click on add URI. And now we have to paste in a very specific value. And you can get that value from the GitHub repo by simply copying this URL when you are in development. And we will update this value once we deploy this to production.
[16:04] So simply copy this value and paste it in here. Then let's click on create. And now finally we have access to our client ID and secret. So let's copy the ID and add it to our environment variable file. Let's also copy our secret and add it here as well. Right. So after we've added these values. Let's go back to our app. Let's click on recheck. And now our system has been configured as well. This means users can now sign up or sign into our application using their Google
[16:36] accounts. Finally, we can also add AI integration. Now, again, this is optional, but I'll do it for the sake of the tutorial. And by default, this boiler plate uses OpenAI as the LLM provider. So, what we need to do is get our OpenAI API key. And you can get that by going to platform.openai.com/api keys. Then, let's create a new secret key. I'll just call this to-do vibe tutorial. Let's create the key. Let's
[17:07] copy this and let's add that to this AI integration section next to the OpenAI API key. Cool. So, if we go back to our app and click on recheck, our AI integration is now fully set up. We can actually test that everything is working by going to this try the feature section and let's click on view dashboard. This should allow us to sign in with Google. So, let's click on this. And now we do see this modal. And then I will select my email address. And awesome. We now
[17:39] have a fully functional authentication system in our app. Then let's go back to the boiler plate. Let's click on try AI chat. And let's say why is this guy blue? And we get the answer streaming in meaning our AI integration is working as well. Cool. And of course, we are able to sign out and everything is now ready to go. Next, I'm going to show you how to build your project. And then I'll show you how to deploy it to production. But before we move on, I do want to show you one more environment variable. And
[18:10] at the bottom of the file, you'll see this file storage section that expects a blob read write token. Now, this is useful if you want to allow your users to upload files or images. Setting up file storage is really easy as well. In versel, go to storage, then create database and select blob storage. Then click on continue. Then give it any name and select your region and click on create. Then from this page, click on
[18:41] env.local and copy the snippet and add it to yourv file. Your agent will now be able to add file uploads to your application. That was really the hard part. And trust me, once you're familiar with this process, you can spin up this boiler plate within minutes. Now, for the fun part, let's build our application. On this page, click on start building and let's describe the app that we're trying to build. I actually recommend writing a very detailed prompt here. So, tell the agent exactly what type of features you
[19:13] want and what the user journey should be. The more specific, the better. But for this demo, we'll simply build a to-do list app. I know the app itself is not complex, but the focus of this video is to get you going with the boilerplate that includes authentication and database integration. We will use the same boiler plate to build super advanced applications going forward. So, let's say I would like to build a simple to-do app that allows users to sign in, add, remove, update, and complete
[19:44] to-dos. For fun, let's add some AI capabilities as well. Let's say, please use AI to categorize the to-dos. Then let's copy the starter prompt. And back in our project, let's go to docs, business, and let's replace the starter prompt that we just copied. Cool. Now, of course, if you're using cursor, you're welcome to use the agent in the sidebar, but I've really been enjoying Claude Code lately, so I'll just use Claude code. I'm just going to rename
[20:15] this tab to Claude Code. And cloud code is simply asking our permission to access this folder, but it's also telling us that it found an MCP server configuration file in the project. So what I've done is I've preconfigured this MCP.json file to give our agents access to context 7. Now context 7 is simply a repository with up-to-date information on all of the technical frameworks used within this application. So if the agents get stuck, they can
[20:45] reach out to context 7 to see the proper way of implementing these features. So let's proceed with the MCP servers. So my workflow is as follows. I like to start a dev server by myself in the terminal. So always have the terminal open and let me just stop it for now. And in the terminal run npm rundev. Now if you want the agent to start the server for you, that's perfectly fine as well. There are actually pros and cons to both approaches. If the agent starts
[21:16] a dev server, it will have a view of any error messages in the terminal and it will try to autocorrect those issues itself or if you just want to run the dev server yourself like how I'm doing it here. If you run into any issues, you can just manually copy the errors and paste it into the chat. Either way works. So, all we have to do is click on the starter prompt, then copy all of this and paste it into the chat, or simply drag and drop this file into the chat window. Either way is fine. Let's
[21:49] press enter. So, Claude is saying, I can see you've shared the starter prompt documentation for your project. The document emphasizes that this is a template meant to be completely replaced when building the actual application. And all we actually have to say is please go ahead and build this app. So Claude is now doing its thing. It's created this to-do list and it's asking my permission to make these changes. I'm actually just going to press shift and tab. And this will go into accept edits
[22:20] mode, which means it won't ask our permission every time it wants to change a file. Now we can sit back and wait for Claude to complete. And I do want to mention that sometimes you might see Claude asking for permission to generate the database schema changes. This is perfectly fine as well as Claude is building this application, it might realize that it needs more tables in the database to store new information relevant to the app. The first time we manually executed these commands, it was to migrate over all the user tables so
[22:52] that our authentication system would work. But since we're now creating a to-do list app, Claude will create new tables where all these to-do items would be stored. So you can just go ahead and accept those changes to the database. All right, cool. So the agent is done. And I do want to share with you some of the cool features that is included in this boiler plate. You will notice that whenever the agent completes its changes, it will automatically run the database generate and migrate scripts as well as the next JS build command to check for any error messages. So let's
[23:24] have a look at our app. The dev server is still running. And if we refresh this page, we get this internal server error. Now unfortunately that will happen every time the agent runs the build command. That's just how next.js works. So when that happens, simply stop the dev server by pressing control and C or command and C and simply start the dev server again. If you want the agent to run the dev server for you, you could simply provide a memory to say always start the dev
[23:58] server yourself after completing changes. Use npx kill to free up port 30,000. So this is just a very useful tip if you wanted the agent to run the dev server itself. Right, let's refresh our app. All right, so let's have a look at what we got. We have an app that gives us access to a homepage and a dashboard. We have our sign in with Google button at the top and we're able to change the theme from light mode to
[24:29] dark mode. Then we have this form where we can add to-dos. But we're not yet signed into this app. So, this doesn't make a lot of sense yet. Let's go back to our agent and say users need to be signed in in order to manage their to-dos. Then, I also don't like that we're able to add to-dos from the homepage. So instead, let's say the homepage should contain some marketing copy to promote our to-do app. Also, give the app a catchy name other than to-do app. Use a suitable icon with the
[25:00] logo. Then move the to-do app features to a dashboard page instead. Let's run this. Cool. So, I can see Claude has already started making changes to the app. And we will fix up the styling of this app in a second. Let's just wait for claw to complete. And apparently it is done. So, of course, when I refresh this, it's going to fail. And we just have to restart the dev server. And then we can see our app. So, it's got all of this cool marketing copy. And let's try to sign in. I'll select my email. And
[25:33] now we can manage our to-dos from the dashboard. Let's try this. Let's say buy bread. Let's add this. And cool. There we go. Let's also say call mom. Let's add this. Nice. We can see our two items showing up. Let's try to set this one to complete, which it did. Also, if I refresh this page, all of our data should still be there, which it is. Cool. So, we now have an app with a working authentication system and our data is persisted in a database. Now,
[26:05] let's have a look at fixing the UI. By default, it's using all the colors that I used in the boilerplate template, but you are able to set up your very own design system yourself. So, I'm just going to clear this chat. And what you can do is run a custom /ash command, which is included in this boiler plate. And that command is called create design system. When you run this, this agent will now ask you a bunch of questions to set up your own personalized design system. So, it will ask you what is your
[26:35] preferred color scheme, your visual style, component style, and a bunch of different things. And you can have a back and forth conversation with this agent to build out the perfect design system for you. So, let's say we want a warm and friendly color scheme and a playful and casual visual style. you can decide on the rest which would make sense for a to-do list app. Let's run
[27:08] this. So, what this agent will do is actually take into account all of your preferences and now create a custom design system in the docs folder. We can see it's created this new folder called UI and within this UI folder is going to create four different files. And I do want to mention that you can use the same slash command to iterate on this design at any point. So if you really don't like something about the design, run the same command again, but this time the agent will see that you already have a design system in place and then
[27:39] ask you what you would like to change about that system. Cool. So what exactly can we use this for? We can simply drag and drop this UI folder into the chat and then tell the agent to please fix the UI or a specific page. But what we can do instead if you are using claw code is use a specialized sub agent that can do the UI components for us. So we can tag that agent with the at symbol and then in this list let's look for the agent UI developer. Now this sub agent
[28:12] you can actually see it in this agents folder contains a lot of custom instructions to force it to implement this very specific design system. So here we tell it to always follow the guides located in this docs folder. So let's simply say please implement the design system on all pages in the app. Let's run this. Of course, you could just give this UI folder to your main agent and it should do a very good job, but the sub agent was carefully prompted
[28:44] to give even better results. All right, so the agent is still busy, but we can already see that the new design looks very different to the boiler plate. The design is way more casual and warm, and we have this fun little animation as well. What I did notice is that this text is quite hard to read. And if I go to the dashboard, this text is hard to read as well. So when this happens, in fact, as I was talking, the agent automatically fixed this. So maybe it's not an issue. But if you run into any
[29:15] design issues, for instance, text that's hard to read. What you can do is take a screenshot of the UI and then paste it back into the chat, it's very hard for these agents to kind of predict what this UI would look like as it's effectively coding blind. So if you can give it a screenshot of what you see, it will greatly improve the results as well. And really scrolling down with this page, I hope you can see this design is very different to what we had before. All right, so it's completed all
[29:45] of these UI changes. And if I refresh this, the agent fixed up all of this little UI issues. And now we have a fully functional to-do list app that looks very different to the boilerplate template. Now, let's talk about checkpointing. I recommend creating checkpoints as often as possible. Since we have the fundamentals of the app up and running, it would be a good idea to create a checkpoint or a commit. This means that if something goes wrong with the app, we can always roll back to this current checkpoint. So what we can do is tell claw to create a get commit or what
[30:18] you can do is use a custom slash command which is included in this border p. So enter slash then select checkpoint and cla will now create a checkpoint for you. The first time you execute this it will ask you to run git in it. Just say yes. Then I'll just say yes again. And cool. So we can see all of our checkpoints by going to this source control option in cursor or VS code. And in here we can see this initial commit that was created by Claude. and it gives
[30:49] us a nice little summary of everything that was done up to this point. So if we somehow mess up the application, we can always ask claw to roll back to that commit. As an example, let's say, please change the branding of the app to task flow 2.0. Let's send this. All right. So claw changed the name of the app to task flow 2.0. And we can see those changes all throughout the app. Now, what if we realize that was actually a bad idea?
[31:20] Well, all we have to do is say, please roll back to the previous commit. Let's send this. This is going to run get restore. So, let's just say yes. And cord is saying it's done. And if we go back to our app, the name was changed back to task flow. Cool. So, that's how you can roll back to any previous commit or checkpoint. Now, one thing that's missing in our app is our AI functionality. When I add a to-do, I want an LLM to categorize that to-do item. So, let's say I'm just going to
[31:50] clear this chat. And I do recommend starting a new conversation whenever you start with a new feature. A clean context will always produce better results. Please add some AI logic that will categorize to-do items as they're being created. All right, so let's try adding a new to-do like go to gym. Let's add this. And this is actually use GPT to create this item and categorize it under health. If you wanted to add advanced functionality to this application, perhaps like the ability to
[32:22] search through to-dos or maybe you wanted to integrate a chat interface with an AI model, you can do that by going to docs and under technical, I've added some documentation that the agent can reference to implement some advanced functionality and I will be adding additional documentation to the repo. For instance, let's say we wanted a chat interface with the AI model. You can simply grab this streaming document, add it to the chat, and then say something like, "Please add a chat interface with
[32:56] an AI model so that I can ask questions about my to-dos, etc." But I'm actually happy with this application as it currently stands. So, let's have a look at deploying this app to production. Now, we will be using the terminal for this. So, I'm actually going to stop this development server. Now, the first thing we need to do is to ensure that all of our latest changes have been committed. So, either you can just use the source control window or of course you can just ask Claude to create that checkpoint for you. Now that we've
[33:27] committed all of our changes, we can open up our terminal. Hey, Leon from the future here. While editing the video, I realized that I totally forgot to mention one more dependency. In order for the Versell deployment to work, we have to install one dependency using the terminal. Simply run npm i-g [Music] versel. Simply press enter and this will install the versel library on your machine. And you can then use for cell to deploy your app to production. Back to the video. And then what we need to
[33:58] enter is versel- d-pro. Then let's run this. Then it's asking us if we want to set up and deploy. And then let's say yes. Link to existing project. Let's say no as we don't have this project in Verscell yet. And for the project's name, I'm just going to use the default name. And I'll just press enter. And let's press enter. And enter again. And that is actually it. The project is now being deployed and built in production. And we will be able
[34:28] to access it through a public URL in a minute. All right. So we're getting this message saying that the build has completed and it's done. So what we can do is go back to Verscell and then search for our project which we called to-do app. And on this page you'll see this public domain that you can use to access your app from anywhere in the world. Now this won't work yet. What we have to do is go to settings then go to environment variables and in here we have to copy across all the environment variables from our project. So all I'll
[35:00] do is select everything and copy and then simply press Ctrl and V to paste. And now we can see all of our environment variables. Let's save. This will ask us to redeploy the project. So let's actually do that. And let's click redeploy. And I'll simply go back to overview and then go to the deployment tab. And here we can see the project is currently building. We'll just wait for this to complete. Cool. Our project was deployed. So, let's go back to the overview page. Let's open up our app and
[35:31] let's see if everything is working. When we click on sign in with Google, I do want to warn you that this is not going to work and I'll explain why. What we have to do is copy this URL and then add it to our list of redirect URIs. So, back in our Google Cloud Platform, let's click on our client. Then, under authorized redirect URIs, paste in that URL. And let's also include API and O. So all of this stuff at the end. Let's
[36:01] save this. And these changes could take a minute or two to take effect. And actually, come to think of it, let's go to settings. Then under environment variables, look for the variable called next public app URL and click on edit and change this from localhost to your apps URL. Then let's save these changes. Let's redeploy and let's go to view deployments and let's wait for this build to complete. All right, we're done deploying. So, let's refresh our app.
[36:31] Then, let's click on sign in with Google. And afterwards, we can now see our to-do items and let's actually try to add one more. So, let's say buy dog food. Let's add this. And indeed, we can see the item was added. If we refresh this, the data is persisted in the database. Now, of course, for a real application, you don't want to use this generated URL. The nice thing about Versell is you can assign a custom domain as well. Simply go to settings, then go to domains, and by default, we
[37:03] can access the app using this generated URL. But you can also buy a domain from Versell directly. Or if you're using another domain provider, simply click on domain, enter the name of that domain and VE cell will give you the exact instructions for connecting that domain to your application. If you assign a custom domain, just remember to add that domain to your list of authorized redirect URIs and go to environment variables and change this next public
[37:34] app URL variable to your custom domain and everything should work perfectly. This boilerplate anththers video was a lot of effort to create. So, if it helped you in any way, then please consider hitting the like button and subscribing to my channel. Also, give this repo a star. And thank you so much for watching this video until the end. I look forward to building some exciting projects using this boiler plate going forward. If you want to watch more of my videos, then click on the card on the screen right now. Otherwise, I'll see you in the next one. Bye-bye.