<b>Hey there and welcome back. So in the</b>

<b>previous video I gave you</b>

<b>this demo of this AI powered</b>

<b>interior decorating app. It includes</b>

<b>everything from user</b>

<b>authentication to payment processing,</b>

<b>web analytics and this also includes</b>

<b>integration with other AI services.</b>

<b>But how do we get started with this? Of</b>

<b>course you might want to</b>

<b>use something like Luvable</b>

<b>or Bolt but to be honest I've never seen</b>

<b>anyone build a real world</b>

<b>production application using</b>

<b>any of those platforms. So instead we'll</b>

<b>start this project locally</b>

<b>on our own machine and we'll</b>

<b>use Claude Code to build this application</b>

<b>for us. Now just a side note</b>

<b>you don't have to use Claude</b>

<b>Code. Any coding agent will work. So</b>

<b>let's briefly discuss the tech stack. We</b>

<b>will be using Nextjs.</b>

<b>This is a really popular framework for</b>

<b>building real world SaaS</b>

<b>applications and it's used by</b>

<b>some of the world's largest companies. In</b>

<b>fact a lot of these app builders that</b>

<b>you're familiar with</b>

<b>actually use Nextjs under the hood. And</b>

<b>the reason we're using</b>

<b>Nextjs is it actually deals with</b>

<b>everything on the front end as well as</b>

<b>the back end. Then for the</b>

<b>design system we will be using</b>

<b>ShadCN. This gives us a list of beautiful</b>

<b>components that we can</b>

<b>use in our application.</b>

<b>For user authentication we will be using</b>

<b>a library called BetterAuth. As with a</b>

<b>lot of the tools and</b>

<b>libraries in this series BetterAuth is</b>

<b>open source. For the</b>

<b>database we will be using Postgres.</b>

<b>I've tried a lot of different types of</b>

<b>databases in my life and Postgres just</b>

<b>stands out. Especially</b>

<b>if you're building applications that</b>

<b>could potentially require</b>

<b>vector embeddings or full</b>

<b>text search. Postgres is easy to work</b>

<b>with and it does everything.</b>

<b>Now we will look at payment</b>

<b>processing and web analytics further down</b>

<b>in this video but for now</b>

<b>this is our core tech stack and</b>

<b>everything you really need to know. And</b>

<b>for the AI functionality we</b>

<b>will be using the AI SDK from</b>

<b>Vercel. I've tried a lot of different AI</b>

<b>libraries and the AI SDK is really</b>

<b>phenomenal. And we'll</b>

<b>then combine the AI SDK with Open Router</b>

<b>to get access to hundreds</b>

<b>of different models. Now I do</b>

<b>want to mention you don't have to use</b>

<b>Open Router. The AI SDK is also capable</b>

<b>of integrating directly</b>

<b>with the providers. To get started open</b>

<b>up your code editor. I'll be</b>

<b>using VS Code but of course</b>

<b>you can use cursor or whatever you want.</b>

<b>I've opened up a new folder called</b>

<b>Plushify. This is going to</b>

<b>be similar to our AI powered interior</b>

<b>decorating app in that users will upload</b>

<b>images of themselves</b>

<b>or their family or their pets and we'll</b>

<b>then use an AI model to convert the</b>

<b>subjects in those images</b>

<b>to plushies. This will also work of a</b>

<b>credit system so users</b>

<b>will start off with a few free</b>

<b>credits and they can then purchase</b>

<b>additional credits to</b>

<b>continue using the application.</b>

<b>So how do we now set up our project? So</b>

<b>if we wanted to we could</b>

<b>install each of these frameworks</b>

<b>individually. So we could start with</b>

<b>Next.js and then maybe install shad cn</b>

<b>then better auth and</b>

<b>then set up a Postgres database. But</b>

<b>instead I'm going to show you an even</b>

<b>easier way. I've created</b>

<b>this boilerplate project that you can use</b>

<b>for free. This greatly speeds up the</b>

<b>process of setting up</b>

<b>that initial project. So if you want you</b>

<b>can go through this article</b>

<b>to see how it works but I'll</b>

<b>simply show you. So what we have to do is</b>

<b>in our code editor open up</b>

<b>your terminal and run the</b>

<b>command npx create a genetic app at</b>

<b>lightest and period. This will</b>

<b>set up the boilerplate project</b>

<b>in its current working directory. So</b>

<b>we'll just say yes to install</b>

<b>this. Then you can select your</b>

<b>package manager. I'll just use pnpm and</b>

<b>that will copy across all</b>

<b>of these files. It will also</b>

<b>install all of the dependencies and</b>

<b>initiate a git repository. In fact if we</b>

<b>go to version control</b>

<b>we can already see this initial commit.</b>

<b>So that's really it. This might seem</b>

<b>intimidating but it's</b>

<b>actually really straightforward. In the</b>

<b>cloud folder this</b>

<b>template already gives you access</b>

<b>to a few sub-agents. So we've got this</b>

<b>better auth expert, a polar</b>

<b>expert and a UI developer.</b>

<b>We also have a few commands. So we can</b>

<b>use checkpoints to</b>

<b>easily create commits and we</b>

<b>can use create feature to plan and create</b>

<b>a new feature. It's kind</b>

<b>of similar to what speckit</b>

<b>does. Then we also have this docs folder</b>

<b>where I've stored some technical</b>

<b>information on using</b>

<b>our AI framework as well as better auth.</b>

<b>But of course we'll build</b>

<b>all of this out together</b>

<b>during the course of this series. Now for</b>

<b>the main project files we can</b>

<b>open up the source directory</b>

<b>and within app we can view all of the</b>

<b>files that make up this project. Now you</b>

<b>don't really have to</b>

<b>worry too much about these files. This is</b>

<b>not a crash course in xjs.</b>

<b>We will be using our agent</b>

<b>to do the bulk of the work. So this is</b>

<b>really just a high level</b>

<b>fyi. Within app you'll have</b>

<b>this page file. This is really the main</b>

<b>page of our web app. Then</b>

<b>if we have any nested routes</b>

<b>like slash dashboard then this is where</b>

<b>we'll find the dashboard</b>

<b>page or the user's profile</b>

<b>page etc. Then we can also store any</b>

<b>reusable components in the</b>

<b>components folder like if we</b>

<b>open up ui we can see things like buttons</b>

<b>and cards and dialogues</b>

<b>and badges etc. And of course</b>

<b>we can use shad cn to install additional</b>

<b>components into this</b>

<b>project. Then we can also start our</b>

<b>development server to viewer app by</b>

<b>opening up the terminal and we can then</b>

<b>run npm run dev or if you</b>

<b>want to you can use pnpm run dev. This</b>

<b>will start our project on localhost 3000</b>

<b>and from here we can</b>

<b>see our boilerplate project. Of course</b>

<b>we'll replace all of this</b>

<b>with our actual app. All right</b>

<b>so when we click on sign in nothing</b>

<b>happens and that is because we still have</b>

<b>to set up our database</b>

<b>and authentication. So basically</b>

<b>everything in this checklist. Thankfully</b>

<b>this is really simple.</b>

<b>In this project I've already created a</b>

<b>docker compose file that will</b>

<b>automatically start up</b>

<b>a Postgres database for you. And in order</b>

<b>to run a Postgres database locally we</b>

<b>will be using docker</b>

<b>desktop. So simply go to docker.com and</b>

<b>download and install docker</b>

<b>desktop. Then in docker desktop</b>

<b>you won't see any containers running yet.</b>

<b>So back in our project we</b>

<b>can actually just start a new</b>

<b>terminal session and run the command</b>

<b>docker compose up dash d. The first time</b>

<b>you run this command</b>

<b>it will download the Postgres image and</b>

<b>then start your container. So in docker</b>

<b>desktop I can now see</b>

<b>my plushe5 folder and we have our</b>

<b>Postgres database. Now you might be</b>

<b>wondering if you need</b>

<b>to change anything in the .env file and</b>

<b>the answer is no. For development I've</b>

<b>set up like a default</b>

<b>user, a default password and the database</b>

<b>can be accessed from</b>

<b>localhost 5432 and this is the</b>

<b>database name Postgres dev. These values</b>

<b>can also be found in this</b>

<b>docker compose file. So if you</b>

<b>don't change anything here then you don't</b>

<b>have to change anything in</b>

<b>the .env file. All right so our</b>

<b>database is currently up and running and</b>

<b>if we click on recheck this</b>

<b>step is still read. That is</b>

<b>because we haven't migrated the tables</b>

<b>across to our database. It</b>

<b>simply means our database is</b>

<b>currently empty. And if you ever wanted</b>

<b>to see the contents of your</b>

<b>database what you can do is run</b>

<b>the command npm run db studio. This will</b>

<b>give you the strezl URL and</b>

<b>here we can view all the tables</b>

<b>in our database and as you can see we</b>

<b>don't have any tables. And this step is</b>

<b>basically telling us</b>

<b>that we need to migrate across all the</b>

<b>user authentication</b>

<b>tables to our database. And we</b>

<b>can do that by running this simple</b>

<b>command. So I'll just copy</b>

<b>this and I'll just open up a new</b>

<b>terminal session. It's based in that</b>

<b>command and run migrate. Now if you go</b>

<b>back to our database</b>

<b>we can see a few more tables. Now you</b>

<b>don't have to worry about</b>

<b>the specifics around these four</b>

<b>tables. Just know that these are used by</b>

<b>better auth to implement a user</b>

<b>authentication system.</b>

<b>And also we can view all the tables in</b>

<b>code by going to source,</b>

<b>lib and the schema file. So in</b>

<b>the schema file we can see the definition</b>

<b>for the user table,</b>

<b>sessions, account and verification.</b>

<b>So let's say we wanted to add a new table</b>

<b>to this database. We can</b>

<b>obviously type it out ourselves</b>

<b>or if we open up a new session and start</b>

<b>up plot code we could just</b>

<b>say hey please add one more</b>

<b>table to our database called todo. This</b>

<b>table will store todo items for our</b>

<b>users. All right so let's</b>

<b>run this and plot code just added this</b>

<b>todo table to the database. Now by</b>

<b>default you won't see those</b>

<b>new tables because we have to migrate</b>

<b>them to the database. Again to do that</b>

<b>what we have to do is</b>

<b>run ntn run db generate and this will</b>

<b>generate a db migration. And finally we</b>

<b>have to run the command</b>

<b>and let's just clear this and after we've</b>

<b>created the generation we can run db</b>

<b>migrate just like we</b>

<b>did before. Now if we go back to the</b>

<b>table we can see that todo table along</b>

<b>with the columns that we</b>

<b>created in the schema file. Now this was</b>

<b>just for interest's sake. I actually</b>

<b>don't want this table</b>

<b>so I'm just going to delete it and like</b>

<b>you just learned in order</b>

<b>to apply the changes to the</b>

<b>database we'll run db generate followed</b>

<b>by db migrate and now the</b>

<b>table should be gone which it is.</b>

<b>So I wanted to show you these db commands</b>

<b>for a reason. Throughout</b>

<b>the series the agent will be</b>

<b>making changes to our database and if we</b>

<b>don't generate and migrate</b>

<b>those changes our application</b>

<b>will fail. It will fail because it will</b>

<b>try to interact with tables</b>

<b>that don't yet exist in the</b>

<b>database. Right so now that we've run the</b>

<b>migrations the database</b>

<b>connection and schema is complete.</b>

<b>Now let's set up auth. Our application</b>

<b>uses better auth which is a fantastic</b>

<b>open source auth library</b>

<b>and better auth supports a lot of</b>

<b>different providers. So</b>

<b>obviously we've got email and</b>

<b>password verification but we also support</b>

<b>social providers like</b>

<b>apple and discord and facebook</b>

<b>google github and much much more. We'll</b>

<b>be using google as our</b>

<b>provider and in order to use google</b>

<b>we need to set up our google client id</b>

<b>and a google client secret</b>

<b>and then add those to our .env</b>

<b>file to these fields every year. So what</b>

<b>we need to do is go to</b>

<b>google cloud platform then click</b>

<b>on console. So from here we need to</b>

<b>create a new project so</b>

<b>let's click on this drop down.</b>

<b>Let's pick on new project. I'll just call</b>

<b>this "placify AI". Let's</b>

<b>create this and it will just</b>

<b>take a few seconds to create this project</b>

<b>and there we go. Let's</b>

<b>click on select project</b>

<b>then on the left hand side let's go to</b>

<b>apis and services and let's click on "oh</b>

<b>auth consent screen".</b>

<b>This is a little pop-up that shows up</b>

<b>when selecting your</b>

<b>google accounts. Let's click on</b>

<b>get started. For the app name let's call</b>

<b>this "placify AI" and</b>

<b>let's select our email. On the</b>

<b>next let's select external and next let's</b>

<b>enter our email address</b>

<b>then let's agree to the terms</b>

<b>continue and create then click on</b>

<b>audience. Click on publish app confirm</b>

<b>then finally go to clients</b>

<b>create client then under application type</b>

<b>let's select web app and</b>

<b>for the name let's just say</b>

<b>"placify AI" and then very important</b>

<b>under authorized</b>

<b>redirect uris let's click on add</b>

<b>URI and for the value I left the note in</b>

<b>the dot env file so you</b>

<b>can simply copy this URI</b>

<b>and paste it into this field. Cool. Once</b>

<b>we deploy this app to</b>

<b>production and we have our production</b>

<b>domain we will come back to this page and</b>

<b>add the production domain as</b>

<b>well. Let's click on create</b>

<b>and this will give us our client id and</b>

<b>client secret so let's</b>

<b>copy the id add it to our dot</b>

<b>env file let's copy the secret and add</b>

<b>that as well. So when we</b>

<b>click on recheck our environment</b>

<b>variables are now set up we've got our</b>

<b>database and our auth is indeed</b>

<b>configured. Now if you are</b>

<b>planning to add AI capabilities to your</b>

<b>application like what we'll</b>

<b>be doing you have to configure</b>

<b>your AI integration as well and like I</b>

<b>mentioned we are using open</b>

<b>router so it simply means that</b>

<b>in this file we have to provide our open</b>

<b>router API key so go to</b>

<b>open router.ai and sign up for</b>

<b>your account then click on keys and pick</b>

<b>on create API key give it</b>

<b>a name and pick on create</b>

<b>then copy this key and add it to your dot</b>

<b>env file over here. Now</b>

<b>keep in mind depending on</b>

<b>which model you use you will be charged</b>

<b>for that model so I do</b>

<b>recommend adding a few credits to</b>

<b>your account either way when we click on</b>

<b>recheck everything is now</b>

<b>green so we should be able to</b>

<b>now test authentication and our AI</b>

<b>integration. Let's click on</b>

<b>sign in and look at that we can</b>

<b>now select our google account so let's</b>

<b>select this one let's click on continue</b>

<b>and we're now signed</b>

<b>into our dashboard and by the way if we</b>

<b>were not signed in we</b>

<b>would not be able to access the</b>

<b>dashboard we'll just get this message</b>

<b>saying that this is a protected page so</b>

<b>I'll just sign in again</b>

<b>and we can also test the AI capabilities</b>

<b>by going to go to chat and</b>

<b>let's say hey what model are you</b>

<b>let's send this and the response just</b>

<b>streamed in cool so our AI</b>

<b>integration is indeed working</b>

<b>and by the way since we're using open</b>

<b>router we can easily swap</b>

<b>out our models so let's say we</b>

<b>didn't want to use openai we wanted to</b>

<b>use clod4-solid instead we</b>

<b>can simply copy the string</b>

<b>and back in our env file simply replace</b>

<b>the open router model with</b>

<b>the string that we just copied</b>

<b>then back in our app if we ask what model</b>

<b>are you we should now get a</b>

<b>response from anthropic which</b>

<b>we do now that we've got our project set</b>

<b>up we can finally start</b>

<b>building our SaaS application</b>

<b>please leave a note down in the comments</b>

<b>if you've got any</b>

<b>questions related to the series</b>

<b>and I'll try my best to address all of</b>

<b>those in the next few</b>

<b>videos also hit the subscribe</b>

<b>button to be notified as soon as I</b>

<b>publish the next videos and</b>

<b>it will also greatly support</b>

<b>my channel I'll see you in the next one</b>