How to AI Coding with CURSOR IDE - Build & Launch Micro SaaS (+ NextJs, Clerk, Supabase, Stripe)

1. Introduction: In this class, you will learn about AI coding and how to create apps using cursor IDE. Even though we are using Cursor, the same process and prompt can be also applied in other IDs like Winsorf or VS code with AI extensions. This course is a practical one where we are focused on building full stack applications. In this case, we'll build a SAS, which stands for software as a service. It's an app that you create, set up a payroll for, and users can access it after subscribing. You will learn about cursor and how to use it for AI coding and to get ready to start building on your own. We will learn an effective way how to build chip SAS applications, how to implement the subscription management, authentication provider, database, and test the applications, end to end. We'll be learning this on SAS that we will create together from scratch. We will cover how to set up Stripe for subscriptions, a customer portal to manage them. How to work with Super baase and much more. We will cover the functional testing, so you are able to test your application by yourself later. Overall, the skills demonstrated in this session can be applied to your other projects. Let's talk about the approach that we will use for building the projects with AI. The goal is really to get you to the point where you enjoy building your own products, your own size and where you don't reinvent the wheel and create a new backend for your applications when we are talking about authentication and subscription management. If you can just set one up and then reuse it. Later on, after we'll build a SAS, you will also learn how to do the functional testing on the newly created application, so you will test the payments, subscriptions, database, set everything locally, so you can test locally and fix before you deploy to production. You will learn how to test webhooks, like if the payments with Stripe are successful, if the subscription is mapped in database and if the authentication with clerk works properly. AI didn't lose you there and you would like to build applications with AI, have some fun and just build products that you have in mind and get your ideas into production. I'm looking forward to see you in the next lesson. 2. SaaS Project Demo: Now let's proceed to the demo. We are on the landing page, and the main thing there is the code to action and a teaser. We have the demo showcasing the functionality that the user will get after subscribing to our SAS application, and we want to subscribe, and I'm redirected to the signup page. I will continue with Google. The user was saved also in our database. We cannot use the product yet. We first need to subscribe. Let's hit the subscribe to access. There we are on the pricing page. We will select subscribe. Now we can see the payment was successful. We will go to Dashboard, and there we have to product ready to use, and let's try it. You can select between the Deese reasoner and Desk chat models, and I will show you first the functionality with the design mode. I will click there, Activate Design mode. And when I will send there, for example, a paragraph, the assistant will know that it should respond with a code styled with tailwind CSS. I will hit Send and you can see as a response, I go this paragraph design with the tailwind CSS. The next feature is that I have there some templates, for example, I have their template for stripe integration, so I will click it, confirm, and now AI will generate the response for the stripe integration. If I would like to cancel the subscription, I can do it. I would just go there on managed subscription. It will redirect me to the customer portal, and there I can set. 3. AI IDE - What to know: Let's first talk about AI IDs, and then the approach that I will be using for building the projects. We have quite a few options. I'm using and I will use cursor because for me, I started with it, and I think it really has everything I need. Simple. It works, and for me, that's pretty much enough. There are other options like VSCde where maybe if you are already programming, you'll be most comfortable because probably you use it in past years. And there are extensions that you can use, fine, Ru code, and I also heard about augment then we have the windsurf which is also a pretty good AI IDE. And then we have here cursor. And cursor is the one IDE I will be using through this course. But from my perspective, I think it's not the most important thing which IDE you have. It's about with which ID you feel most comfortable, which ID you like to use. And basically, you are curious about few features that are coding agent that will help you code the application. Some chat, which is some additional feature that cursor has where you can ask questions, and it won't directly update your code, but it will give you the answers that you can then apply, I think, WinSerf and mentioned extensions in VS code also have a similar feature, and the third feature is when you will tag code and you will do some shortcut, for example, in cursor in Sutter K, you can edit the selected code. But most probably only the AI agent is the one that will help you the most and that you really need, if you want to be effective and use AI coding to build your applications. The question is, do you need AI ID? And the answer is, yes, if you want to be effective, you need it. But of course, it's also possible to do this just with a browser, chat GBT, for example, or clot or any other model that you would like to use. But then you will do a lot of copy paste thing, but it's still kind of possible. But there is no reason to not use AI ID. 4. Build & Ship Approach: Let's talk about the approach that we will use for building the projects with AI. The goal is really to get you to the point where you enjoy building your own products, your own sauce, and where you don't reinvent the wheel and create a new backend for your applications when we are talking about authentication and subscription management. If you can just set one up and then reuse. Later on after we will build the SAS, you will also learn how to do the functional testing on the newly created application, so you will test the payments, subscriptions, database, set everything locally, so you can test locally and fix before you deploy to production. You will learn how to test webooks if the payments with Stripe are successful, if the subscription is mapped in database and if the authentication with Clerk works properly. What we will do to create our applications, we will use third parties for authentication or our project, we'll be using clerk for setting up the subscription management, we'll be using Stripe and for database, we'll be using SupAbse. And all of these three providers already have existing documentation about how to implement this and make it work with your application. That means we basically just need to create some Next JS, starter kit because we will build our application with Next JS. And then after we will set the subscriptions, database and authentication, we will be coding just the MVP because then we will be able to test with the core functionality if our product is successful or not and deploy to production. And in case we will get the users, we can start building on top of it and add more and more features. With this approach, we can ship more products and make our building journey as effective as possible. So AI didn't lose you there and you would like to build applications with AI, have some fun and just build products that you have in mind and get your ideas into production. I'm looking forward to see you in the next lessons. 5. Cursor Crash Course: Get cursor IDE. You will head to cursor.com, and there you will download it. After you download it, create a new folder for my application, and I will move to folder to Cursor. I will drag and drop it and it will open the folder in Cursor IDE. Now there is the folder, and inside, we can start creating the files. Our applications will be created with Next JS. The command will set up all the necessary files for us, and then I will be just adding the necessary components so our page will get the desired look. Now, to show you what you can do there with Carolus I, you will open this chat. There you can see you have the agent, and he can create the code for you. If you will switch there, you can just ask, and this won't create any code. For example, please, how to create next JS application. With this, he won't be running the commands for you, but he will just tell you which command you should use. You can also directly run it from there, but if you want to have it under control, you can just click copy. Then you will open terminal. You can use a shortcut or you can just do terminal, new terminal. And before using this command, what I like to do the most and it's actually not use AI for this command because I rather go on Talen CSS and check the most up to date command there for just creating the application, it's possible that they do update for the new tailwind version, and it's not yet caught in the model, and it's just much easier instead of the prompt AI, then you will page the command. Instead of the Mapp, you will put there a dot that will create this app in your folder. You will hit Enter, then you will do yes to tailwind, no to source directory, no to turbopek, no to AIS. It will install the dependencies, and then from now on, we will be using AI. And if we will switch back to agent, we can start with our first prompt. And it will be a testing prompt because I want to show you what we can do there in cursor and some real basics. If you would just like to ask AI and not let it update your code, you will switch to ask, and there please how to update my lending page, for example. Instead of just quickly changing all your code on your lending page, it will just tell you how you can do it. Which is good if you maybe want to learn programming, for example, there you can see, I just gave us the answer. Also some proposals. We can also apply it, but it didn't do anything. If you put there the agent and there, please change my landing page, the agent will start and then of course, we can still reject, but you can see it already started to change the code. In some cases, of course, if you want to implement some feature for application, it starts adding the folders, and yeah now it's up to us if we want to accept it or not. So for this one, I can do accept, and there if I'm not happy with the output, I can do Restore Checkpoint then I will continue, it will just reset it, and now the code is gone. Next cool thing is that you can also insert a picture there. So if you have some idea of how you would like your page to look like, you can send there the page, and it will copy the layout at least and try to do a similar design. If you want to ask about any specific file, you can edit there. We're going to files and folders and just edit the file or direct to the folder. But mostly, you will be really using just this agent, putting there your prompt, then accepting it, double checking it, and building the application step by step, not putting there something crazy with, like, I don't 150 lines of prompt because then it will implement maybe just a part of it. It will try to do everything in a bad shape. I really don't recommend it, and I recommend using smaller prompt. What I also like to use after seeing some part that I don't like, for example, let's say that I won't like this div, I will just take it like this. Do sutural plus, and it will open this window. In this window, I can put a prompt and edit the sac that code. Usually what I'm doing is that I find element like this, and for example, it has a better layout. I need to do some small change, so I just want to pick something or I want to refine something, and I will there, please update the design of this element. And then it will start generating and just update the selected code, which is great because then it won't break any of your other code. In case you have some maybe more complex implementation, if you will put this into agent, yes, probably it will also update only the code you really want to update. But it happened a lot of times already that they just started to think and also created some unnecessary changes, and then it break the code, and this is just a smoother way of how to fix things in case you know where exactly is the problem you want to solve. Now I can just accept it, and that's it. No other code was changed, and that's basically it. Taking the code using idol K, writing prompts here to update the specific part, asking directly in the composer, the agent, and mostly we are sending the prompts there and then just accepting the code or ask in the chat in case you want to ask about some specific functionality, brainstorm, or figure something out without changing any of your code. This will be the cursor intro, and we will learn more by building. See you in the next lesson where we will actually start building something. 6. Get AI API Key: We need to get ABI keys first, and then we can start building the application. I will be using deepsk AIIBIKe, but you can use any AI API key you'd like to use. For example, Gemini AI API, you can get free API key that you can use, and after we will get it, we will store it somewhere. We will use it after we will start with development in Cursor. Now let's first get the API keys. We'll go on platforms.com. Then next important section is the API keys there where you will create a new API key, and you will use this one in the cursor or your IDE, where you will use the code from the documentation. You can see there, I will just create a new one. I can name it, for example, cursor, but if you are using it in different IDE, it's also fine. Quick note there, you can use any AI APIKey you would like to use. For example, there's also this Gemini free APIKey and if you will go to astudio.google.com slash APIK, you will get on this page where you will login with your Google account, and then you will create APIKey and you can also use this Gemini API for free. Just bear in mind, whenever I will talk about Deep Seek or using Deep Seek, you will tailor the prompt to use Gemini API instead. That's just information for you, so you can really easily swap the AI providers. Now we will go to apitps.com, and there in your first API call, we will have this documentation that we will use to create our first API call. We have there the base URL. API key is the one that we just got on the page, and there we will be curious about this block of code in a node JS. 7. Prompt 1: Core Functionality, Starting Point: Should now have the Next Jz application from last lesson. If not, you can create now with me. Also with trying to prompt, I will get us a command for creating the next Jz with tailwind. There we will create a new NextGz project also with tailwind. We will proceed. We will put a note source yes to a browser, and then the recommended options. Now after it will finish, we will install the Open AI library. The NPM I OpenAI, it will install this and then we can start working with the code we have in the documentation. We'll create an API folder with Route Ts, and there we will paste the code. Now I will change this model to reasoner, as it's also there, and I will get the API key. So I will go on the platform deepsk.com. There. If you saved this key, you can just paste it and we will put it there. It will be on this position exactly there, and we will create a folder, Deep Seek, and I will put the route there so we have better folder structure. Now I will put that into composer, act as an API endpoint to interact with Deep Seek, and there you can see it provided us with some code that we can just accept. If you want to store the deepsk API key in environment variables, you will just put it there in dot N file. Otherwise, yeah, I can now show you our API key. I will just delete it later, so it doesn't matter. Now I will put there a new prompt called Deep Seek API route from front end to generate content. So this will create a component for me where we will be able to prompt and get the answers from Deepsek R one. Now we will also tell Cursor to edit on the page. And now it should be ready. We will do NPM R on deaf, open Local host. I can see there are some error, so let's just fix it with composer Now we are green, so it should be fine. Now there is some additional error, and before trying it, let's just fix it with a composer. So it updated the route Ts. And now before we get to state where everything will be nicely readable, I will just create there a text file where I will show you the prompt I made. So please generate a full ing page in XS that will mainly display a chat window for interacting with Deep Skir. Page design should have a modern futuristic, beautiful and minimalistic look. It should use Talen CSS, dark them, and so on. We will paste it there, send, and let's see what ARO will come up with. So it will paste the answer of this component. There we get UI like this, which is not bad. I will try to put there another prompt with generating some of the code. And you can see I'm getting the content that is something we will need to fix in our code to get better formatted responses and so on because he's giving it to us in one row. We can actually ask cursor to format it. There we'll just select this, do CederK. Please format this. We can also try to switch the model for Deep Sk chat and we can do it simply there in the model. Deep Sk chat instead of the reasoner. If you'll save it and prompt there Hello. Is this a reasoner or a chat model? It will answer us that this is a chat model. In case you would also like to switch it, you can do it easily like this. But I will put it back to resoner and we will now enhance the UI. Now we can try to prompt with generate a responsive button component in Neck JS using talent CSS. So we are expecting a component style with tailwind CSS to create a subscription for our newsletter. Now we take a screenshot of this UI, and I will provide it to cursor and in composer, I will ask for enhancing the UI. So we are getting these responses. Please create UI that will look better and will increase the user experience. I want formatted responses into code, better prompting experience with increasing the lines when needed, better coloring, and so on. It will provide the code for the component. We will accept it. And also, we need to install some plugins. So there as recommended, we will run the installation with the first command and now also the second one or other way around. Now, it created additional tailwind configuration file, so we will just merge it and we can delete the Javascript one. And also, let's ask for fixing this properly because we also need to install some other plugins. Now after setting this, we will do NPM run Dev again. And it should work. So we have there our Deep Seek AI chat. I will ask for the component for subscription newsletter, and let's wait for the response. And looking at the response, everything is looking much better. I will now create this newsletter component and put there the code. I need to install this plugin, reactokFm so I can just do it NPM I react took form. Everyone also helps us there saying how we should install it. Then on the page, I will edit now before I will just format this code. And we will edit there below this paragraph. We also need to import. There we are just missing use client because this is a client component, and now we have it there. And if we will send it, we should get the success message. Now we want to implement the remembering of the context of our chat window. So in the composer, I will put a prompt to remember the context, and there, I will now test it. Please generate the button with a simple functionality with HTML and CSS. Everyone will generate this button for us, and now we will ask you to send it with tailwind CSS. That means he needs to remember the last message what he sent and he needs to change the CSS to tail end CSS. And as you can see, he remembered it, and he provided us with the button where we can see also the tail end CSS. So now the context of the chat is fixed. 8. Prompt 2: Design: We are to just stop at the basic chat boood functionality and not go any further. Well now with the second prompt at their switch and also a templating feature. For switch, I want the user to be able from switching from reasoner to chat model. I just wonder some basic tagle that user will click and he will have it. For templating, I want to have there some template, for example, generate clerk off for web application. And when user will click that template, the boat will just answer him. With this, you can basically add more and more templates, and then user can just be selecting the template, clicking it, and the chatbad will be enwering and he don't need to think, maybe you should generate this, generate that, and so on, and we will have there some basic structure of the prompt that user can choose from. So let's take this prompt and let's put it there. Now I'm in Crouser and I will use the Deep Seek R one model but when you use it on the website, if you don't want to use Cursor or when you use it with raw code in VS code, should be also fine, but you just need to provide the code to the tool where you are using it. If on a website, you need to just page there. In raw code, it can also read the context. I will put it to composer and we can see user wants to add two features to our Next Jz application, and there it is, we will accept it, and let's check the page and see the new features. On our page, we have it there, and it looks like we can easily switch from chat and reasoner, and let's try to put there clerk of setup. It will paste the prompt. We need to update the UI still for this to be a bit more user friendly because you can see there is the prompt for the clerk of setup. So when user will want to implement it, he will just click it. So what we would like is to have this executed right away and not having additional step for the user to click Sent also. And I would also like to put this out of the chat window. So the selecting of the model somewhere below or maybe above, and these templates I would put maybe on the left side or so 9. Prompt 3: Smaller features: Also enhanced this prom. I wrote it in more simple way, but then I sent this to AI, told it to enhance it for me, and now there we have it. So let's go through it. First, I want to enhance the functionality of my project by adding new features. What we need model selection. So I want to place this outside of the chat window, and it's there because I want user to be able to switch between reasoner and the chat. For the second point, the template features. So the template features should be placed on the left hand side of the interface. And there we want to also add some stripe integration, prisma warm, environment variables, and so on. You can add there more and more whatever comes in your mind, you can add there. Yeah, it will be something what the admin will then manage for his users. So I put there this example. Then what I'm missing there, to be honest, I cannot see the Let's continue, and I will go back. But I think when it was enhancing, it removed their functionality. Add functionality, I will note it there, and I will get back to it. Let's go to third point. Where is the new feature to context Tuggle button. So this functionality should add a button to interface. And when this is clicked, it will change a button to indicate it's active. And when it's active, Deep Seek should have a context of Make this AI modern and minimalistic like Shed CN UI. The purpose is that when user paste code while the mode is active, AI will return an enhanced version of the code, improving its UI and usability to follow modern minimalistic standards, for example, like in ChecN. Then I have there also objective. So point of this prompt is to create a feature each interface where user have control over module selection and last line we don't need. And now let's go back to the template features there at the functionality. So what I did there, the functionality is that when we click the template, the deep Sk should start responding because we don't want the additional step for the user to hit also send. Now this is quite a prompt, but let's take it. Go to page. I will open a composer. By the way, you don't need to write prompts to this prompts file. I'm just writing it there for you. You can just copy paste it from my Github and put it into your chat window with AI. Let me paste it there. Let's see what Deep seek cooked. I will accept it. Now we should have it. Let's go on the page. And maybe the coloring, I would use a darker one, maybe the color details, we can get rid of them. Let's go back to ID. And now in composer, we will prompt that we want to update the UI of our application, and I will put there that I want subtle shadows, smooth transitions, and rounded corners. You can put there the design that you would like for your application or ask AI to enhance your prompt that will update your application to some dark theme with detail colors that you will mention and so on. Then I will take this prompt, put it into composer, and let AI design. We will change just the design, not the functionality. This is important because we want to make sure that the functionality won't be touched. So I will just ask for removing the borders, I think we can do it. And to be honest, I won't even prompt it, we'll remove this Her border purple. David. What I will also do is that I will change this deep seek thing because our page is not deep seek. Our page is our page, we have whatever name you will choose. Let's try something funny. So there in the header. I will do Cider plus K. I can now change it to clothes because it will be just some text generation. For the prompt, I would like to change the name. So for example, I will use AI Fullstack Kitchen and two description, something catchy, used templates, built fast, ship today. This is just an idea. Of course, up to you what you will decide. I will save it. Now you can check back the page. Okay, maybe the MOG is not a good. By will use this prompt. Maybe this heather nice, modern, beautiful, catchy, minimalistic, futuristic, and so on, but it works. So let's use this. I also prom there that currently it looks very basic. I will accept it. 10. Prompt 4: Tweaks: What I know now is that probably this template selection won't work, and I will also expand the chat window because currently it's on 1.5 line. Please refine current functionality of prompt window in our component. Currently, the chat prompt textbox in my chat application displays just 1.5 line. And we want to improve this. The text window or the text box should grow vertically, and I did something like chat GBT. I also prompt there that maybe he also does it on his website, but it's unavailable right now, so I cannot tell this will allow for better UIC. Let's copy this prompt and put it there. Hopefully I want to get disconnected for this. No, but jokes aside, the reasoning is pretty awesome. Yeah, he's really on point. Everything makes perfect sense. I agree what he proposes. And so let's use the changes he made. Let's accept this. Hopefully, he won't prank us because of the message. Let's check the page. Now we will test the template, so I'll click there on Clark and you can see there it's being sent, but you need to click on the button one more time after you click on it, the first one. We will need to implement some confirmation at least, and it's actually quite a good UX. So we can leave it like this, but we will implement also some confirmation layer on the top of the selected template. Let's go with the prompt five for the functionality when a user clicks a template, and it appears in the textbox. Then when the user clicks it again, add an enhancement. So user knows that he just needs to confirm this. We will paste the prompt there and we will send it to Deepsk There we have the reasoning, and there is the output. Let's accept it. This looks pretty good, but it's selecting almost all the templates. That's something we need to fix, but otherwise it looks pretty good. For the last template, it somehow works, but we will manage to fix it. We are probably one prompt away from making this work. Let's specify there that for stripe N, this is working properly for other buttons. When I click on them, it displays the conformation, but yeah, they are tied together. We will again get the reasoning of our one. What is there, the issue, how he needs to fix it and so on. Then we will accept all now we will test it. Hey, and it looks good. Now it's working properly. Let's try to confirm, and it's being sent. And that means we just implemented a new functionality into our application. I will now test the design mode. Let's try to put there some code and send it without context and see what happens. And now I don't have the active design mode checked. We'll first try it without it, and then we will check it. There we have the code. You can see just some answer what he can probably do with this button that I sent for the prompt six. Let's put there when design mode is activated, I want to return just enhanced DI code with tailNCSS, no additional text around and keep the good styling practices as previously. I want to enhance this because when a user will use this design mode, now you can set there anything you would like for him. So for example, if you will have some TelnCSS context for your application, you will just put there, please use TelnCSS every time you don't use pure CSS. You can set there basically anything, and I really like this feature. I will put there for now the TelwnCSS and we will test it on a button that we sent before and we will check what is the answer. Ideally, it should be just a code with the tailwind classes. And it works. Now we can in this use effect, update the output because I don't want these codes start code end. We don't need that because user would like to copy just the full answer and put it into his code. He don't want to remove code start and code end. He just wants to send out the code, get the answer, copy paste it, and that's it. I will prepare prompt because we need to have a copy pasting feature. It will send us the answer. We will accept it. Now we will test it, and we will copy this, and we should have it in our clipboard and we can paste it. That means this functionality is working and we will just add a better UI to it. User will click on the copy the clipboard. It will also change the icon. That will indicate that it was successfully copied. Now we will enhance the UI there. I will put change the color team to gray color with lime details. Then I will add a design element, great background. You can just copy this from my Git up. On the page, it will look like this. We will remove some backgrounds. At some rounded Excel classes to align our design, this will increase the border radius. We have the back when we see a long message, this will happen. We'll do the prompt seven. Please fix the issue where a user can write a long message, but it's not properly formatted causing the message to expand, overflow, and so on. We will send it and it should fix it. If you want to change the color of the scroll bar, it's in Globals dot Css. By the way, for the role there in the message context, we'll just fix it as user or assistant. 11. Auth, Subscription, Database Setup: It's time to add a back end, and I won't be in wending the wheel, and I will show you how you can add a back end to any of your applications simply with using a next JS starter kit. Because of course, you can prompt AI and try to properly configure it. But I think getting the code that is already premade working is from the official documentation is probably the faster way. Yeah, again, why to reinvent the wheel. You can just do it and I will show you how you can set the third parties like clerk, stripe and Superbse. You will just log in there, get the environment variables. Then I will show you how you can test your application and you have a flu SACSS application ready. You can get the starter kit on Git upp. Of course, it's for free. There is the code, and what we will do is that we will just copy some parts from there and put it into our code. I will start with middle VaroTs then with Prisma. Then with the lip folder, hooks, pricing, payment, API, and off, I will paste it into my application. Then I will go to layout, copy it, paste it into our application. Then I will take this number, go into our components, put it there. And then I will open a terminal, run this command, and PX, ShetCN at Latest at button. This will install a component from ShetCN Library for a button that we will be using. I will select the recommended options, the legacy peer deeps. Now we will copy the environment variables. We will paste it into our environment variables. Don't worry. These secrets are fake and never expose these secret keys to anyone because when the secret key is accessible, the person has all the access to your third party. For example, secret key to Stripe, he can access the stripe and so on. Be careful about it. You need to check Git Ignore, and there is the dot N file. It's in gray color, and that means it won't get pushed if you will commit to Git up. And before we move on to setting all the third parties, we will run few commands to make sure we have all the libraries and dependencies installed. Let's start with the first one, and that will be a task kill. Then the second one, then this one for removing node modules because we'll re install them. And now the fourth one NPM install. If we are missing any library, we will just copy it and do NPM I and put the name of the library. Now we move the Navbar to wrong components folder. And to be honest, we should have just one. What we can do can merge it and copy this to the one that is in the root folder. Let's just merge this components folder. I put it there and we can delete this one, and there are some new errors. Let's put the t instead of a dot and that should fix it. Now everything is green. 12. End-to-end Testing: Your dot and file with all the environment variables should look like this. We edit three new environment variables, and it's this next public clerk sign in URL and signup URL where you will just do slash sign in and slash signup. Basically, you will just copy paste these two lines. For Web Book secret, this is the webhook secret from clerk, and you will put it there, and that's it. After you have all these environment variables, you are all set, and that's it. And last one, what you will adhere is next, public AURL local host 3,000. Now we will run the command and Px Prisma generate to generate the schema. We'll do NPXPrisma DB push. This should push the schema into our superbse. And before we do it, we need to add there also one additional thing below this URL. We'll add direct URL to have the direct connection to our superbase. Now after we have this and save it, we can do NPxPrisma DB push. We'll run the command, and this should push our Prisma model into our Super baase database. That means now we will go into our superbase, we have their user and subscription model. Now we can continue with the testing. Now to test this, we need two things. First one is open engroc dot that you downloaded and installed, and there we will do Engroc HTTP, 3,000. If you are running on local host 3,001, for example, you will need to do ngroc HTDP 3,001. There I will take this URL. There you will go into Configure, there you will scroll down, go to webhooks. We will add a new endpoint. I will paste the URL from Engroc and do API Webhooks clerk. There I will check user and all these events. Click on Create and I will get this signing secret. So I will just display it, and then I will copy it and I will put it into our environment variables like this. We also in terminal paste this command, stripe Listen forward to Local Host 3,000 API webhooks, stripe before you need to do the stripe login as we did previously to log into the stripe. After there it's checked. Every time you will want to test your application, you need to do just this. Stripe, Listen forward to Local Host 3,000, API Webhook stripe. This needs to be the correct path. If there is, for example, webhooks XIX, then you need to have the API web Hooks six stripe, but we have the correct naming, so it's fine like this. Now we are all set so we can test it. If you want to test with the user that you already have in your clerk, just delete the user from your clerk. Otherwise, it won't work. The user you want to test this with cannot be in the clerk previously. It needs to be there just after you will sign up with him now because otherwise, the user will get duplicated. I won't be created in your superbase and this won't work. Small fix is needed there for finding the proper path. If your background doesn't have the proper color, check the globe Blue dot CSS. Make sure there is just a root coloring. This is for background and foreground. A double check tailwind dot config dots and make sure these two files are working for you. I mean, with the colors and everything because maybe you can get stuck there, try to find where you should change the colors and so on, but these two files are doing it Globe B dot CSS and tail in Config. ICV are also missing stripe. So let's do NPMI stripe. Sometimes there is this issue with the API version. So let's just change it to cording one. And now what we will need to do is that we need to move our component to a dashboard because currently it's on a lending page on Page Tsix. We will go into app folder. We'll create a new one, we'll name it dashboard. In this folder, we will create Paget six. And onto this page, we can just move this lending page. Let's copy it and paste it there. Also, there we can remove the header and we can also remove the import of the newsletter subscription. We won't use that component. Also, we won't be using image. Now we go back to page t six. We'll do the same thing there. And there we can leave the header for this part on the lending page. Please make this dummy functionality. Now I'll submit this, and this will be there a sum demo for our potential customers on the lending page. And when they will buy the product and get their dashboard, there will be the real functionality. From the lending page, we can remove the component, and actually, we started with a pretty bad naming there. Let's rename it to AI hit Window. Let's also hit SUdateimports for AI hit Window. We need to have the proper naming and we made a mistake there with pasting the files of should be app and for the API, we will just take these two folders and paste it into API folder there. Then in API folder, you will have a deep seek user webhooks, and in webhooks, clerk and stripe. Then as this API folder is empty, we can delete it. And one more thing is that pricing and payment should be moved also to app. And then we are all set. We have the issue with dependency. Let's do NPMISwix install. There's one thing we need to fix, and that is this placeholder UI because that is nowhere near the UI we actually have in our product. And we'll put there prompt. Make this product the MOUI same as the product itself, as we have an AIched window component. Now we can select Des car one, I submit. Let's exhibit it, and I think that's perfectly done by R one. What we'll add there is some code action button, so I will put it on top. I will put there this prompt at the get started button that will redirect the user to sign up. I will continue with Google. Now in our dashboard folder, we will add Layout DTS six. We will go back to the starter there and layout TS six and Dashboard folder. We will copy it, paste it into our application, and there we can see we don't have access to this page. We need to hit Subscribe to access. Now, you will run this command. Stripe Listen forward to Local hot 3,000 APA webhooks, Stripe and on the page, we can hit Subscribe. There we will fill in the data, pan subscribe. The payment was successful, we will go to dashboard, there it will load, and we have access to product. We can use the design mode. We can just generate something, for example, stripe integration, confirm, and we got the answer. In our database, you can see that the subscription was created and that means everything is working. 13. Deployment: Play this versal, we'll first go to package do JSON, and we will add there into the script these additional commands. Then we will create a file named VersalDJSN and we will put there this content. Then into next dot config dots, we will put discontent then you will run this command, remove IM recross force dot Next. Then you will run NPM install once again, and then you will run NPM run built, which would basically validate if your application is ready to be deployed in case there will be any errors, it will display there, and you don't need to waste time on VersL because VersL will fail in case the build is not working properly there. Now we need to publish this project to get up. I will do Sutrla plus shift plus P. Publish to get up, I will name this Deep seek project, something and I will select this repository should be private or public. In terms of deployment, it doesn't matter. Just if you want to share the code with someone, you should put it public because otherwise you won't be able to see it. Then you will stage all changes there. You will click on Source up there above the name of the folder. Everything should be staged. You can put there some commit message, hit Commit, and it will push it to Git. If you'll do then any changes in your files, the new changes will be shown there, and you can again do plus, put a commit message. For example, deployment Fix, commit and so on. This way, you will be updating your live page on Versal with some new features, content. Now you will go to virsal.com at a new project. I will at my Project Deep seek ARO Project one, which I just published on my Git upp and there, I can set all the environment variables, how this will look like. If you will go into your dot and file and you have their webhook secret, you will put there the name of the environment variable, and there you will put the value, so something like this. And then you will do this for all your environment variables. For example, clerk, I don't remember the name, but yeah, you probably know what I mean. Clerk and paste it there. Then you will have the stripe one, and you need to put there the names that you have in your environment variable file. Or you can do it also in a different way. You can paste the dot and file above, and it should load all the values. Let's now try it. We will hit deploy there. It will fail. We will click Go to Project. There we will click on settings. Environment variables, and there is the button. I will put there some value, click on at another, click on Import dot and file. You need to locate the DTN file, and then after you will edit, it will load all the environment variables there and you don't need to write it one by one. I will hit save there. I can delete this xx value because, of course, I won't be using it. And now I can go to deployments. Go on this one, for example, hit redeploy and the page is deployed. Now we will open the page, the URL, even with HTPS, copy it. I need to go to clerk and there I need to change the endpoint for our Webook that we put there from the Ngrog to our URL from Versal. And it should look like this. This is the link to our page, and there is slash API Webooks Clerk. Now I will save it. Double check that the webHook secret is the correct one that we upload it to Versal and that should be. 14. Project 2: Intro: Will be building a SAS application for YouTube video analysis, where our users can subscribe, and then they will have access to our product that we will step by step build with AI using also documentations, and the goal is to help you build a minimum viable product, learn how to build SAS or Microsas application on your own with a similar approach. I will help you create the prompts that you can reuse, set up a SAS and how to make it work even if some newer versions will be released. You will see which documentations you should track and how to create a series of prompts that should give you similar output. And if you will be creating another SAS later, you will already know where to look for all the things that you will need for your building journey. And what we will do in this session, we will be creating a product using prompts, then we will be integrating third parties for the of database and payments. We'll do functional testing where you will learn how to test your SAS applications to end, and also we'll be deploying this to versal. So our application will be the live. Now let's see the demo of this SAS. We are here on a landing page, and we will click on Get Started. That will redirect us to the sign up page where I will select continue with Google. Now the user is saved into clerk, then via webbook it will be also saved in our database. In our database, you can see that with a new user, I have a null for stripe customer ID. The next step will be getting access to the application. There I will click on Subscribe. It will redirect me to the Stripe checkout session. There I will pay. I will get the payment successful message, and now I will be able to use the product and how the product will work, I will pace there the YouTube URL, and I will click Analyze Video. There I will see the thumbnail of the video that is being analyzed, skeleton for the analysis until it's loaded. There is the AI analysis. I can save the analysis into database. Then I will see it there in saved analysis. When I will click on it, it will open a model with the saved analysis, and I can edit it and save it into database or just delete it. Now let's go to the database and I can see the active subscription for my user, and also I can see the analysis being saved into the database. And if you want to see the process, how I did this from scratch, finally, let's dive right into it. 15. Project 2: Setup: Start with using the command from TelewncSS to create our application. You can use AI to do this, or you can just do it yourself with telencss.com and make sure you will use the most up to date version of the command. That means we will head to tansss.com, get started framework next JS and there we have it. We will copy this line, and we will go back to our ID and we will paste it there. We don't need to seed to my project. Let's instead of my project, do DR Dot because we are already in the folder that we created for our application. So I created a folder named Video Analyzer SAS. Then I opened this folder in the cursor IDE and now I will run this command. I will head Enter. Then I will proceed with Y. I want to use tail WN CSS, no source directory, no turbopec no AIS, and now it will install all the dependencies, and then we can continue. Now the next thing we will do is that we will run the server, so we will do NPM run Death. We will open this local host and there we should have the first UI with the next JS template application. Also, if this is being shown, it means that the tailwind CSS is working. If you want to test if it's really working, you can go to page, and maybe there, you can just put background to green. 400, for example, save it. Then you can see it's working because it read the tail end class and applied it to your page. But now we will start prompting and leave these things to AI. We just wanted to make sure that we have the application properly set and the tailwind is working. We have the correct configuration, and now we can start with prompt. Next step for me is to create the prompt dot DXDFle and I will be saving all the prompts that then you can reuse enhance and so on. You don't need to create this prompts DXTFle. It's enough if you will just directly prompt the composer 16. Project 2: Prompt 1: Start with the prompt number one. I will keep there this structure. First, I will explain what this application should be about, then core features of the application, then the UI components I want there to be, then the styling of the application, and then some additional code considerations. Let's start with the main application functionality. This application should take YouTube Below URL as input. There we will use a different API in the end, for now, it doesn't matter. Then it should present a clean user friendly interface. Core features will be YouTube URL input field with validation, loading state progress indicator, Analysis results display and error handling for invalid TRLs, widows without transcripts, and API failures. For the UI components, I want a main form with YouTube URL input with YouTube icon, submit one with loading state, and progress indicator during processing. Then a result display with the video analysis section, rest bound to analyze another video, clean and responsive layout. For the styling, I want to use tailing CSS, responsive design with mobile first approach, modern and clean interface, loading animations, progress indicators, and dark colors with some red details, but mainly focus on het scan like UI, and for the code, use typescript for type safety, implement proper error handling, a loading states and the user feedback, keep the UI clean and minimal, and focus on user experience. Now with this prompt, we will copy it. We will put it to composer and we will wait for the response. And now we got some output. You should have there in API and transcript Route DS. And this is probably not correct. We don't need to use Rapid API. We will use just the YouTube transcript library, but we will specify it in next prompt. I will know how to try make it as general as possible. So whichever output you will get from the prompt one, we will fix it in prompt two. But you should have there, the route for the transcript, then the components error display progress indicator, result and input. I think that's correct. And the page connecting these components. What will be the mission of our next prompt is that it should mock the response because currently, we don't have any API for the AI analysis connected. But they are trying to make this as general as possible. We will try to fix the output of the prompt one. That means even if your prompt will have a different output than mine with some next prompts, we should reach the same output. We can accept all and check the page. You can see that currently is doing nothing. We have the YouTube URL. It's not reading the valid URL. It looks like it's not even showing the result of the transcriptions. That's something we will fix now. 17. Project 2: Prompt 2: Let's head to the prompt to, and there I will note the box if there are any, I will not there what I expect. And let's go through the prompt. First, I want to display a section with the text transcript from the input video. Also make sure in API transcript row dots, again, we will use a different API in the end because this didn't work in production. For this MVP, I want to use black and white colors. Also, you can note there any errors you have. I will not there that currently it's saying the YouTube URL is not valid even though it is, I will also provide the example of a valid YouTube URL, and I will also note there what I expect. So I expect that I will input the YouTube video URL. I will hit Analyze and it will display video loading or processing. Then after it's done, it will display the section with a text from the video transcript. You can know there what you expect from your side. You can also know there your errors or bugs. You can also note there your color preferences. Then what you expect? Maybe you would like to use a different library, and we will wait for the response. Now we will accept Hall and we will check what is implemented. There it looks good. It's using the correct library. Now we'll go onto our page and we will hit refresh. It looks like it still didn't use the proper coloring, but we can fix it later. That's not a big issue. We'll put the YouTube URL and its it's working. So there we have the transcript, but we don't need this feature. We'll basically just scrap this and we will be showing there only the analysis. But this is exactly how it should work. We can hit analyze another video, we can again put there the YouTube v link. It will show the progress bar, and then there we can see the video with the thumbnail and with a video transcript, which is perfect. And we can start working on the prompt tree so we don't need this transcript, but use it and create AI analysis out of this. For this, we also need an AI API that will help us with this AI analysis. And I will be using Deep Seek. I'm using still the credits. I topped up there for $2. So you can just use anything you would like. It just needs to be some AIAPI that will help you analyze this text. If I will head platform dotpsq.com, there I will go into API keys, and I have there M key. I will create a new one, so I will revoke this one, create new APAKey, I will copy it, and I will go back to my ID. Now you will go into dot N file. If you don't have one, just create it, and there I will store the AI APIKey 18. Project 2: Prompt 3: Let's now go to prompt and there we will implement the functionality I just mentioned. I want to extend my existing functionality where an AI analyze it on the transcribed text of the input video, reuse AIAPIkey that I have in my Doden file. Now I can also mention which API key it is and then implement the functionality where AI will analyze the transcript that we got from the video. Never display the transcribed text anywhere, and when it's loading the text, display a skeleton of it. After AI generates the video summary, display it in a professional and easy to read way, make everything feel simple, bright, friendly, with smooth fonts and good spacing. Then I will just delete the fonts. We can leave the spacing and the final look should feel modern and polished. With this prompt, I expect that I will just analyze the text. I will make sure that the transcribed text is never displayed anywhere because we don't need it, and this should be the functionality. Then we will build on top of it, but for now, this will be enough. We will put it into the composer and we will wait for the response. Let's see the response. It analyses functionality, created a new route in API for Analyze. Then it's using the Deep CKI API, which is correct. It analysis result component. Then it updated the main page to fetch and display AI analysis instead of row transcript. It updated the UI components, transcript result, and edit skeleton loader, updated the progress indicator, improved user experience, and now we can go and test the website. On our website, we'll paste the YouTube URL, and we will hit Analyze do. You can also restart the server if this won't work for you. That means in your terminal, do ct plus C and NPM run De and open the local host 3,000 again. Let's see how the analyzing content is going. So it validated the URL. It fetched the video details, extracted the transcript, processed the data, and now it's analyzing the content. And there we have the analyzed video. We have the summary, key points, insights conclusion. I mean, it's good. We can then improve the UI of this because we would like this to be a bit better highlighted. I mean, the sections, the key points and everything. But yeah, it's just a detail that we can then work on and we will make it running. Now we can focus mainly on the functionality and the functionality. I believe it's the one that we wanted for our MVP. Now we want some additional features for our SAS. We would also like to save these analysis, list through the saved analysis, and for that, that will be probably it. 19. Project 2: Prompt 4: And for the prompt for, we will also start with Prisma. Once the AI analysis is complete and the result is displayed in a component, I want to add a safe bound that will allow users to save this analysis to the database. Define a Prisma model for storing AI analysis results. The results should be stored in JSON format. It should store the analysis in the database via Prisma. And also, create a model for user and assign the analysis to the current user. For the UI, I want to add a safe bound below the AI analysis result, and when it's clicked, it should trigger the API request to save the analysis. Also, display loading and success states on the button. On the main page below the widow and Po box, create a visual appealing section to display all previously saved analysis, fetch thee from the database, and each analysis should be displayed as a clickable card that will ensure clear readability. And when the user clicks on an analysis, open a well designed model that will load and present the full analysis in a user friendly format. Also, we want to include an edit button next to the displayed analysis. And when the user clicks on Edit, the text should become editable. After making changes, the user can click a safe bound and we should also enjoy the smooth experience with clear visual cues. And then also at delete button to delete the analysis. And we will also mention there somewhere between these lines, please use clerk of in case you will be implementing of also. And now I will take this prompt, open a composer, paste it there. We will wait for the response. Now let's see the response. So the database integration, there we can see the Prisma and the schemed Prisma. Where is the model. Then the deduced clerk authentication, we are missing the folders we need for the sign in and sign up and some additional things, but we want to reinvent the wheel. I have these things already prepared, and I will show you how you can just reuse them from the documentation and not rely on AI because sometimes there are some changes in their documentation and AI can mislead you and you will get a lot of errors. So I will show you how to make this work every time we will go to clergy.com, and there you will click on Documents. You can see there how to actually implement clerk into your next JS application. For example, this is for the middleware dots. We'll just copy paste it. There you can see how it should look like for layout dot Ta six. Again, we will copy paste the proposed changes there. So we need to wrap this into clerk provider. We will use the sign in sign on and so on. Let's paste it into layout dot Tasix after we have it, our page won't run because we need to get the API keys from a clerk and now I will show you how you can do it. 20. Project 2: Setup Clerk: Sign in, then go to this dashboard. There in our applications, we will click on Create application. For application name, I will select SAS Tutorial, and next to email, I will have also login with Google. I will click on Create application now I have their guide how to do this with nextJS. We will go to Configure, and there we will copy the two secret keys from Clark. We will paste it into our DTN file, and now we can fix the rest of the errors on our page. That means usually we are missing some libraries because the AI didn't install them. We will go through all the files and we will check if there are any errors. In case we are missing some library, we will just do NPM I and the library name. For example, NPM I react model, and we can continue for the analysis model, it should be fine. We can just rewrite, then it will be working. And now it's time to go again to the clerk documentation and implement this sign in or sign up page. You can see it's pretty simple. It's like four lines of code, but we need to create the folders. In app folder, we need to create sign in and sign up folder, and inside these folders, we need to create these sign in and sign up with the dots, and inside page dot Tsix. We will go into our folder there in app we will create off in parenthesis. That means it won't read it in path. If we will go to sign in, it will look like our page sign in, and it won't look like our page of slash sign in because of is being ignored as it's in parenthesis. We will use it as just a grouping for our off. So we have our folders nicely structured and we don't have a mess there. Now I create the sign in and sign up also with the dots and everything. I create page D six inside, and then I will copy paste the code from the documentation inside this page DaixFles. Now, in our environment variables, make sure we have this next public clerk sign in URL and signup URL, and they will go onto our page and we will click on signup, it will redirect us to the signup form with clerk. There we can try to sign up with Google, and we can see there our icon for the user. We'll later delete this icon because we will be just using the sign in and signup to not let the user be able to edit their email because then it would make a mess in our database, and we will be just implementing the functionality where after a user will sign up, we will save his user into our database with a clerk web hook. We will in documentation go to synchronize clerk data to your application with Webooks and there we'll be able to see the implementation of this. We can see setting up the End grog, which we will use for testing, because the endpoint we will set to clerk won't be able to see Local Host 3,000. So we need to take Local Host 3,000 and change it into the URL that clerk will be able to read. End work will help us with it. It will be simple to set up. I will show you step by step solution how to do it. There you can see the code example of the web hooks, but I will also provide you with this code, so you can just copy paste it and don't have much troubles with it. 21. Project 2: Setup Stripe and Supabase: I will go to this git that I will also provide to you. I will copy paste the web hooks. I will also paste the dashboard folder. Stripe ts and subscription Ts from a library folder into my already created library folder. I will also copy paste schema dot Prisma. I will just add connection to the analysis model into my user model. I Then I can see there are some errors, so I need to install Swix. I will do NPMISwix. Then I need to install Stripe library, so I will do NPMIStripe now we will go through setting the secret keys for Superbse and Stripe. In the end, your dot and file should look like this with these stripe keys, Superbse keys, clerk keys we already did together, and the AI API key. For my case, it's Deep Sk API key. We'll head tosupbs.com, and there we will log in or sign up after you will be on the dashboard, you will need to create a new organization, and then you can create there a new project. In three tier, you can have up to 23 projects. You will click on the project that you will create, and there you can also select which project you want to use, so I will be in the first one. If you created just one, there will be just that project. Then we will click there on Connect. There are two strings. We'll need to paste into environment variables to database URL and direct URL. In Database URL, you have the string where is number 6543 and in direct URL, it will be the one with 5432. Just copy paste these two strings, and now you need to also put there the password where you can get this password. You'll go there in project settings. There you will go into database, and there you will hit Reset password. You will generate it, copy it, and store it. Then you will put a password on this place. Also one additional thing for the database URL, after the string that you will paste from your database, put there a question mark, BG bouncer equals screw and connection with limit to one. Now, as I mentioned before, we will be setting Engrog. This will help us expose our local server to the Internet. What we need to do is just download Engrog after you download it, you will open the engrog dot a file which will open a terminal for you. And before downloading it, you need to login on this engrog.com, create an account there, and then you will download it and open the engroc dot X file, which looks like this. We will do Engroc HTTP 3,000. If you are running on Local host 3,001, for example, you will need to do Engroc HTDP 3,001. There I will take this URL. There you will go into Configure. There you will scroll down, go to webhooks. We will add a new endpoint. I will paste there the URL from Engroc and do slash API Webhooks clerk. There I will check user and all these events. Click on Create, and I will get this signing secret. So I will just display it, and then I will copy it and I will put it into our environment variables like this. Now we will set up a stripe. So first, you will login or sign up to Stripe and then in stripe, you will create a new product, and there in the new product, we will go into developers there we will go into API keys. And there we will take the publishable key. Then we will go to our IDE, paste it there, and we will go back for the secret key, we will click on Reveal and then click again, so we will get it to clipboard, and we will paste it into our dotnf file, so into our environment variables. I have the publishable key and the secret key, I will put a name for these environment variables. As this will be a public one, I will put the next public and then Stripe publishable key, and for the secret one, I will put Stripe secret then we will go back to stripe page. There we will go to Product Catalog, and you can see I already have the two products, but I will create a new one with you. So let's click there on at product. I will name it thumbnail previewer. There I will put yearly subscription for thumbnail reviewer app. They I will put recording, then I will put early $20 or let's do 19.99, and I will click on at product. Now it will save the product. Now I will click on the product, and there I have a product ID, so I can click on it, and it will copy the product ID for me, which I will save into my environment variables also. And there I will click on three dots, and I will copy the price ID. So this price ID, I will save in my environment variables, so I will do their stripe Price ID like this, save it. Now I have the publishable key, secret key, and the price ID of our only product. You can see it like this. I put it there. And last environment variable we will need from stripe is the Stripe webbook secret. So let's prepare it there. This is not the secret you should put in. For the secret, you will get this actually generated from the terminal. So what we need to do now, we will go there on webhooks. We will click on test in Local Environment, and there we will get the guide what we need to do in order to set up the stripe for web hooks. So first, we'll need to download the client there you will select your system for meets Windows. The I will download this zip file from Github. You will unzip it, then you will open the folder, then you will open environment variables in your computer and you will add a path to this dot x file there. You will open your terminal. You will write stripe there, and you will get this information. That's how we will know you successfully installed the client. There we will go back to this page. Then we'll put there this first command, stripe login. We will copy the URL, open it there, there we will see the word. We will click on Lo access and access granted. Now if we go back to that page, we will see there completed, then we will copy this command and we will open there a new terminal so I'm an IDE. I open the new terminal, and there I will do Stripe Listen forward to local host and not 4242, but 3,000. Now I will hit Enter. And as I have it installed, it will generate this secret for me, so I will put it there into Stripe Webook secret. I will save it. And now if I will go back to Stripe I will have this working. And now we are back to our Jordan file, and we should have all these secret keys set. We will need to run some commands, starting with NPxpress MDB Push to push our new schema into Supabase. If you have already some data there, you will need to overwrite it. All your data will be lost in case you already have something in your Superbase. After you will successfully push it and we will go into your Superbase and refresh, you will see there tree tables for analysis, subscription, and user. 22. Project 2: Prompt 5: The prompt five, we will mention that we want to use a different package for getting the transcript for YouTube video link. That will user input into the application. We want to change the package we are currently using to a new package, and we will provide also a code snippet below. And this code snippet is something I found on GitAp from some user that was having similar issues. We will put it in the composer, there we will send this and we will wait for the response. And we have it. Now, it will be time to test it because it basically just changed the route to the TS file. Nothing else. That means, let's test it, and then let's try to deploy this. And even with the new package, it looks like it's working. There we have the analysis, and it's basically the same as the previous one, maybe even better in the 23. Project 2: Testing: Now I will test if the clerk data are being properly saved into our super baase. If you will be testing this, make sure you set the Ngrok and the endpoint to clerk. Make sure you have no users that you are testing this application with in clerk because now you need to create a new one. If you will sign in as already existing one, it won't save it to the database. So I will delete my user from there. Now I will go to the page again. I will just make sure I'm signed out. And after I will sign up, the user will be saved into Super baase and if you'll save analysis, it will be assigned to the user, and also it will be saved into our database, and we can create an active subscription that will be also assigned there into Superbase. Our user management is done. If you are getting some errors in your application, AI should be able to fix it, but usually it's because of some parentheses or maybe it can be because of a missing library name that means for ClerNJs is just slash server, and then checking the user ID is also now done asynchronously with weight off. You will just add this keyword and everything should work. I recommend you to go file by file and see if there are any issues or errors and try to fix them. It should be really simple and in case you have any, AI should help you with this. Now we will add navigation bar to our page. We'll be using this ChatsN library for bans. That means we will do NPx at latest at Bn. Now we will install this, why to proceed. It will create a new folder components UI, and there into UI, it will be saving hetsiN components from the ChetsN library and into components folder, we will add enough bar to Tasix. We already have one components folder in the app folder, but that components will be for the landing page or for the application. If you will add their components for the application itself, we can also create components folder in the dashboard folder. So each folder will have its own components. For the root folder, we will add our components that will be for the wall application. In this case, it will be UI, the components from Chetcn because they can be reused across the wall application and the navigation bar because that will be added to layout Dt ta six, and that is applied for the wall application also. I will give you the Navbar that will be already working. The only thing you will need to do is to go to layout DTS six and there implement the Navbar component. You can delete the inputs from clerk. You will leave the just clerk provider Import. And now, how to test the stripe functionality. We'll make sure that we have our user. We are logged in as in the database. Then we'll go into our IDE and we will open the new terminal, we'll make sure this command is running. It's stripe Listen to forward to Local host 3,000 ABI web ooks Stripe. If you are running on local host 3,001, it needs to be forward to local host 3,001. Then in our application, we will go to pricing. That means we will need this folder pricing, we will take from this git and we will put it into our repository in the app folder. Now on this page, we will click on subscribe that will direct us to the Stripe payment checkout session. We will fill in the data, click on pay and Subscribe. Now we will go into IDE, this payment folder, we will move to app folder. Now we can see that our payment was successful. And in the terminal, you can see HTDP status code 200, which is for success. That means our payment to Stripe was successful. And now the question is, if we will go into database and we will go there into subscription, I already see it's fine. We have the subscription status active assigned to our user, that means everything is working, which is perfect. Now we will also get this types folder, which contains user dots with its types, and we'll put it there into the root folder. Then we will go into the dashboard that we already compete, it should be working. If we will go to our page, click on Dashboard. We had there the premium access required, but as we are subscribed and it's in our database, we have the subscription active. So the product that we currently have on our homepage will be moved to our dashboard, and on our homepage, we will just do some promo or demo displaying the functionality of the product that user can access after he buys the subscription. That means our SAS is now working technically, but of course, we need to do some final updates and move the things and do the final testing and then deploy it to production. We have the page TS six, and there is the wall functionality of our application. What we need to do is that we need to merge it into page Tsix that we have in dashboard. And how we can do it, there are two ways. The first one is to just take this code, select this code, Rutter plus K in case you are cursor, put there this code and say that we want to merge this code into this dashboard, and AI should handle it well. The second way is to type composer that we want to do this, merge app page DTS six into dashboard, page Tix, and that should also somehow work, but I'm not sure which option is better. And the third way is to merge it manually. But probably we will try one of the ways where A I will help us. Let me try it with this. So I copied WAL code from paged t six. In dashboard page D six, I selected the code. I did plus K, so it's having the context just of this code, and it won't change anything else. I will merge this code into this dashboard. I will submit it, and now I will wait for the response. Let's now accept this and see if this will work or not. We will go onto our page. We have their subscription active. There is the functionality, and now we will test this. First, I will try to open analysis, that is working. I will try to edit it. That is still working. I will try to delete it. Is also working, and I will send there the URL. Click Analyze video and I will wait if also the analysis is working. There is the analyzed video, we will save analysis. Now it's also saved, and that means everything is working. On our dashboard, we have the functionality. Then we can go back to the landing page and it will go back to cursor and go back to page Tsix, this app, page T six. There we can delete all this functionality related to our application we will we can again select all the codes or put into composer. Then for the prompt, I will put there now this lending page don't have any functionality. I moved everything to dashboard. Please make this just a lending page that will promote product for you to analyze this and also put there button to get started, that will lead user to pricing where he can buy the product. I will enter, and it doesn't matter if I will just select this and hit zero plus K. If I will open a composer or if you just put it into any AI, this will generate the page and it will remove the old functionality. Now if I will just save it, I will get the basic lending page, and I can see there also some user burn. I don't want it. I will just find it. User Barn, it's there. Let's delete it. Now, there we have actually let's delete also the heading. There we have the landing page for our SAS. Actually, I wasn't correct with pricing. It should be dashboard redirection because even if the user is locked out and he will get started, it will redirect him to dashboard, but our user management will handle this, and he will know that the user is not signed in. That means he will need to sign in, sign up, and after he will do it, there he will see that he doesn't have an active subscription. Now we want to get this into production. So far, we are using YouTube Transcript API for getting the transcript. But when I was testing this in production, it looks like that this API is not working there. So I was searching for different solutions, and I found one that is working. And now I will show you how to get this solution and how to implement it into your SAS application. 24. Project 2: Deployment: Close the server, and we will run NPM run build command. This command should tell you if the builder will be successful or not, and in case not, we will know which errors we should fix. If you are having any slink errors, it's good to fix them. But if you don't want to spend time on it now and you want to deploy this and see how it's being done in the next config DTS, we'll add Ignore During Build to True to YSind and also for TypeScript, we'll add the Ignore built errors. Then we'll do NPM run built to double check that we are ready to deploy this, and we are. So what we will do is that we will publish this to Git up. I will do their published Git up. I will create a name for this repository. And after it's successfully published, you can go to source control, and if you will change anything, for example, enough Bar there, I will just add some text, save it. There you will be able to see the changes you did code. And if you want to commit them and then also take them to production, you will just click on stage changes there. They will put some commit message, update Navbar, and you will click on Commit. And then this will get committed to your Giru and also because it will be connected to Versal, it will be deployed to production automatically. But now I will stage it and remove the changes because I don't want to do any changes there. And we will go into package dot JSON and we will build at Prisma generate. We will save it, go to source, edit to staged changes. And the last file we need to create is versal dot JSON. And there we'll put this code. What this means. The max timeout duration is set to 10 seconds. We need to increase it to 60. If we don't say this, we will be able to analyze this really like I don't know, maybe 5 seconds video. Then we will save this, we will stage it, and we will push it to our Git. And we will now go to the Versal and we will try to deploy this. After you log in to Versal, you will click on a New end project. There, you will select your repository. In my case, it's Video Analyzer, SAS, and you will click on Import there you now need to add some environment variables. And if you don't want to add one by one, you can just mock the value. For now, you will hit Deploy. Now you will click on GT project. It failed, and of course, it failed because we didn't load the proper environment variables. There we will go to settings of the project environment variables. We will put there some fake value. We will click on at another. Now we are able to import the dot and file. It will get imported. You will save them. Now we will just delete the mocked values that we put there. That means we now can go back to deployment and we can redeploy. After we will redeploy it, everything should work, and we should have our application ready live. Now what we need to do is that we will open the application and we will copy the URL. Now, after we have the URL, we will go to Clerk, configure web ooks and there we need to change the current one from Ngrok to the one we got from Versal. The important thing is that after we will change it and put it there, we still need to keep API slash webhooks slash CORK. I already mentioned this, but it's really important, otherwise, it won't work because users won't be created in your superbase and that means we won't be able to assign analysis to them. They won't be able to buy a subscription because that's also connected to them and the application just won't work. And the last step will be some UI enhancements. I wanted to do this after deployment because I also wanted to teach you how you can then update your application, push it to the Git up, and update it in production. It's a very easy process because we'll be just updating our application now the UI, then we will push it to Git and it will get automatically deployed to Versal to our production, and it will be live after around one or 2 minutes since we will push the commit to Git. Of course, in case the deployment won't fail, but if you will be doing just the UI updates, the deployment shouldn't fail, at least it didn't happen to me. If we are doing some backend updates, maybe changing the routes and so on, it can happen that it will fail because maybe you will be testing your application and everything will look like it's working. You won't test that scenario that will cause some errors. We will just change the UI, the testing will be easier than for some backend processes, and everything should go smoothly into production without any issues. How I will do this is that I will figure out what I want to be displayed on the lending page and I will prompt it to AI. Then I will go to Dashboard. I will probably get some inspiration from the pricing that I currently have there. In a similar style, I would like to also design the dashboard and the lending page. You can go to pricing page t six, you will copy this wall component, then you will open a composer and you will prompt, please design my wall application in a style like is my pricing component. And you will paste there the code. Now you will send it to composer and you will wait for the response, and the AI should help you design your application in a similar way, which is some SchetzN UI style, I would say, try to figure something out on your own. I will definitely try to create some video on also designing the SAS applications. So we all learn something new. I will accept it, and I think it worked pretty well. We have there the landing page. We have the dashboard, which looks amazing, I think. If you open this, we have the model. We can also try the process once again, and here we have it. One additional thing I will do. I don't need this part there. I don't even need to create a prompt. I will just go to Dashboard. I will find there this YouTube video analyzer. And I can delete this and this border with bedding, I can take and I can put it there to the subscription active. I will delete this dis, save it, and now the page will look like this. Let's focus on the landing page and see what we can do there to increase the conversion of users that will actually buy our sauce. I would put a demo of our product with a Colo action ban that we already have there, the get started one, then the FAQ section. Customer review section with some testimonials. He application is working, and that will be probably it. We need to create a prompt that will cover all these steps. First, will be demo section. There will be intro of our product with a placeholder picture, where I will then use an actual picture of our product, and with this, I'm prompting AI that it should put there some placeholder picture, and I will change it later. For the second section, I want to highlight how to use our product in three easy steps. That means the user will input to YouTube video link, click Analyze and then he can save or edit the analysis. For FAQ section, I want to put there three questions on our YouTdink analysis product and subscription plans, which we have only one for $20 yearly. Fourth section will be about testimonials with some few placeholder testimonials. Later, we will add there, but for now, we don't have any testimonials yet, so we can prepare this section. We can hide it and wait for some actual feedback that we will get. And the last one will be a footer section that will be on the bottom of the page. Now we can run this command we will accept it, and now let's see the outputs. There we are on the lending page, and there we have the title with some description. There is the product demo screenshot right now, which is a call to action button that will get our users to sign up to the application. Then how it works in three easy steps, input the link, click Analyze, save and edit. Then we have their frequently asked questions. This can be changed easily. We will just go to the landing page. Let's find the FAQ, and there we can just change the questions and answers. Then we have what our users say section, and there we will have the testimonials. For now, if we don't have any testimonials yet, we can just put the hidden and it will hide it on our page. But I will leave it there. And the last section will be a footer, and there we have some additional information, maybe contact us, some links, and so on. Now let's add the demo picture of our product, and how we will do this is that we will in our application, go to the public file. There we will create a new folder, images, and there we will put a picture of our application. Now I will go back to the landing page, and there, I will import the image product demo. Now, we will take this product demo input. We will go to the placeholder. I'm not sure what it is. Let's try to find it. There we will input the placeholder image. And this will be our lending page. There we have the title with some description, call to action. Maybe we should give this code to action a different color. We can test this for mobile. It looks like everything is responsive and works. And now we will deploy this. We will go to the source control, and there we will stage all the changes. We will create the commit message with UI update, and we will click Commit. And inversal, the new built will automatically start running. And now we have this deployed. If we will open the link, there is our page live. Now let's test our application. We are here on a landing page and we will click on Get Started. That will redirect us to the signup page where I will select continue with Google. Now the user is saved into Clerk then via webhook, it will be also saved in our database. In our database, you can see that with a new user, I have a null for Stripe customer ID. The next step will be getting access to the application. There I will click on Subscribe. It will redirect me to the Stripe checkout session. There I will pay. I will get the payment successful message, and now I will be able to use the product and how the product will work, I will past there the YouTube URL, and I will click Analyze Video. There I will see the thumbnail of the video that is being analyzed, skeleton for the analysis until it's loaded. There is the AI analysis. I can save the analysis into database. Then I will see it there in saved analysis. When I will click on it, it will open a model with the saved analysis, and I can edit it and save it into database or just delete it. Now let's go to the database and I can see the active subscription for my user, and also I can see the analysis being saved into the database.