Vibe AI Coding for Beginners using Bolt. NEW

1. Introduction: Welcome, everyone. My name is Greg Kang. Welcome to AI coding for beginners. This course is for anyone that wants to start coding, using the power of EI, using your creativity. You don't need any knowledge of coding. And I'm actually a Canadian content creator of over ten years. I have a technology background, but I'm not a coder. But a friend introduced me to this app. I started playing around with it. I started creating different applications such as this site here, which has a community chat. It does rankings, a directory of the best digionmad locations. And in this course, I'm going to take you step by step how to get started on this platform, creating your own apps, using your creativity. It's a lot of fun, so let's get started. 2. Setting expectations: Hi. Before we begin the course, I just want to set your expectations for how the course is structured, what you can expect to learn and get out of the course. So AI coding is a very new field. In fact, Bolt was just released December 2024. We're in January 2025 now. So you can expect a lot of experimentation to see what you can get out of the app, what you can create. And I'm going to be going through in the lessons, you're going to see me creating a variety of apps, and I have a list here because I created quite a few here. So you're going to see different sites that do rankings. For example, the wealthiest people in the world. You've also got one on how to do Instagram rankings and while creating these apps, I'm going to show you how to implement different features like filters, how to add profile pictures to spice up your app and make it look more visually pleasing. I've also got a game that I'm going to show you how to create Pong, the actual TD game Pong using AI coding. We're also going to do functional apps like currency conversion calculators. We're going to make use of APIs, application programming interfaces to add power to our app. We're going to actually call different APIs from Google. They're going to call an API that's going to allow us to actually transcribe an audio file and more. And APIs are quite a powerful feature of the AI coding skill set that is going to really open up a new world for you. We're also going to demonstrate how you can use PayPal or Stripe to implement a paywall in front of your app in case you want to monetize it later. Lastly, I'm going to show you a really advanced example, a multi AI LLM chatbot that makes use of different AI chat bots from Open AI as well as Google, and I'm going to use an API for that as well. So look for that lesson, and we have a fun one as well, a basic ride sharing app, which will give you not the full blown app, but it'll give you an idea of what's possible. So when creating these apps, you're going to get to a point where you create something, you deploy it, and you're going to get this URL that is not going to be user friendly. So I'm going to give you some ideas on how you can change that. I think the easiest way is to purchase a domain site from Netafe which is the built in provider. From bolts. But you can also just change the site configuration name so it's more user friendly, for example, pong dotnetlofy.com. And you also use URL forwarding. So I'm going to show you some examples of how to do that. At the same time, the app itself is evolving every week. For example, they introduce Super Base database integrated into bolt. You'll see it on the top right, and that allows you to create a database, which will create users for you. I'm also going to introduce you to another platform called lovable, which makes it a little bit easier to connect to the database and add authentication from Google. In my opinion, and also makes it easier to integrate payment APIs from Stripe. So that's why I'm going to introduce you to lovable dot Dev at the end of the course. So you have an idea of other alternatives just to BlaneU. Bol taught Nu not the only application in the game, not the only AI coder in the game. But this course is really designed for beginners. Because I'm not a programmer, and I want to show you the possibilities of what is possible if you're not a coder. But if you are a coder, then, you know, just expect that there is going to be it's going to be quite a beginner friendly course. We're not going to go in depth. We're not going to go into GitHub repositories, that type of thing. We're not going to bring our projects over to a program like cursor or GitHub and get into the code. So that's not what this course is about, and this is why it's it's the title is AI coding for beginners. So with that out of the way, let's begin the course. 3. Signing up: So we are looking at bolts right now, and I'm just going to take a step back and show you how you can get started. So first, you want to go to the RL bolt dot Nu. That's Bolt dot nu. And what you need to do is sign up for an account. Now, once you create the account, you'll be able to log into the dashboard, and you'll have the ability to create some apps for free and get a feel and taste for what this app can do. Now, after a while, it's gonna tell you that you're going to need some credits to sign in, and that's where I recommend that you sign up for a personal plan. So I'm just going to show you the plan that I have. So I've signed up for the P plan, which is $20 US, and that gives you 10 million tokens, and that's good for a month. And I have 8.2 million tokens left, and I'll just give you an idea of the amount of apps that I've created. So you can access your chats on the side here. So you can see I've made a golf scoring app, currency dashboard, investment dashboard, golf scoring application, golf course ranking, Bitcoin, blockchain dashboard. So I've created quite a lot with the tokens that I have. So this icon on the bottom left will allow you to access the menu. And the menu is where you can access your chats, the settings. The Help Center. And you can actually see your tokens there. So I've used almost 1.8 million. You can buy more tokens. And from subscription, my subscription, you can see which subscription plan that you have. If you want to access your chat and start a new prompt, you've always got this, and from this menu here, you can always start a new chat. Alright, with that, we are going to start from here and create our first app. 4. How to Save Time & Tokens: All right. I want to do an update on bolts to save you tokens and some time. There is a new setting if you go to your settings on the bottom left, and if you go to feature previews, there is a feature called DIFS that you can turn on. And what this will do is, rather than rewriting the entire file, it will just focus on the new changes, saving you time and tokens. So originally when I looked at this, not too long ago, last week it was an experimental phase, but now that label has gone. So I would say this is safe to try. I've tried it out for a week, and it seems to make the process go a bit faster. So again, it's under settings, feature previews, and the features called DiFs. I'll save you tokens and time. 5. AI prompt engineering tips: When it comes to generative AI, whether you're generating images, video, code, I think the secret sauce is really the input, the prompt engineering. So prompts that you give is what is going to determine what you get out of these AI models. I've tested image generators like Adobe Firefly, diffusion, Microsoft Bangs copilot, ChaGBT, Metasama. There's just so many different AI systems now. But really, the common skill required across all platforms is prompt engineering. So what are some tips here? So when generating videos on Opening Eye Sa or Adobe Fireflies image generator, they give you some reference images to show off what their model can do. Also give you some examples of different styles of images and videos. So you can use those as reference points. You can click into that image that you like. You can get the prompt that they use to create that image, the style, and then you can customize it for your liking. Another key skill, whether it's image generation or even code generation, is what I call iteration, reiteration. So it's basically a fancy word for doing it again. So once you get that first reference prompt, you're going to customize it. Let's just say you get a prompt for hyper realistic image of Vancouver in the mountain backdrop. So you'll get your first image generated, and then you'll probably notice it's not quite what you want. So then you want to reiterate change the color tone, make the sky brighter, warmer, and then reiterate. You can also do variations. So some platforms like Adobe Firefly will allow you to choose from four different versions of the image. And then from there, you can keep on iterating iterating. So that's what I mean by iterating. And, of course, you can save your progress sometimes. You can favor it so you can recollect your style of creation later on. So I had some recent experience with coding with AI, and it's a very similar thing. You can start with a similar prompt and reiterate and create something amazing. And if you want to create if you want to create another app, you can use the same style. For example, I created a cryptocurrency dashboard that was customizable, had drop downs, had email alerts. Well, I could take those same features for another type of customizable dashboard. Let's just say for sports scores. So you could take the same design and inspiration and bring it to a different application or a different AI image. So yeah, what would I call that? I'll call it just bookmarking, bookmarking your work for the future. The more specific you are on your prompts, the more detailed your output is going to be. So prompt engineering is essential, and I think some skills to get good at it. It's just a practice. And then if you get those reference images, look at the prompts, and you'll just learn from doing more. But definitely I can see more courses training people on prompt engineering with the popularity of all these AI models. One more thing that I wanted to share with you is the enhanced prompt feature. Some applications like Bol thought New. I think there's others like WIX. They allow you to create your prompt first, and you may see a magic or AI icon that will elaborate on your initial prompt. So watch this in action here. I'm just got a two sentence prompt to create a Instagram dashboard. When I click the enhanced prompt, you can see that it's elaborating even doing a educated guess on exactly what I want, and you solve the Bild to edit it and then put those into your initial prom. So very powerful. Have fun with it and good luck. 6. Building our First app Instagram ranking: Everyone, this is Greg here. We're going to build our first app today using Boldoc New. So you will get a number of free prompts on the pay plan, but give it some thought before you go ahead and hit Enter because the first prompts the most important. And yeah, you can just start off with a first prompt, and then you can see here, I've got an idea for a created dashboard ranking of the top Instagram influencers with a profile pick and number of followers. Now, once you've entered your prompt, you have this icon, which is an enhanced prompt. And if you click it, AI is going to help enhance your prompt with just a lot more specific requirements. So I'm just going to read through here. Create a visually appealing dashboard displaying the top 20 Iscram influences worldwide, ranked by follower count, include the following elements for each influencer, profile pick, high resolution. Use the name with verified badge status if applicable, full display name, total follower counts, country of origin. This looks great. So let's hit Go. He all right. So we can see the code being generated on the right side. Now, don't worry if you don't know what it means. It's fine because you just need to kind of follow on the left hand side. I'll give you an idea of what it's doing. You're waiting for your first preview or your first draft, and then you can revise or iterate once you have your first preview or draft. Okay, so you can see mine here. And it's showing me two names here. Okay, and then it's showing a problem on the left, which is normal. It's normal. So let's just click Attempt Fix to start off with, and then I might just ask it to include more more profiles. I'm just going to move myself out of the way here. All right. And it's normal to get these potential problems. Fix the profile, pick images, and show at least the topt profile. Alright. So then it's going to go and reiterate. And you can kind of see on the right hand side that it's picking up Selena Gomez for number three, Kylie Jenner for number four, the rock for number five. So it's picking up the data from the code. Now, as far as the syntax, I mean, I don't really understand that and all this code here. But like I said, you don't really need to. It's just running through and doing its thing. Your main goal is to prompt it using this technology to get what you want. Alright, great. So top Instagram influencers Christiana Ronaldo, Lionel Messi, Selena Gomez, the Rock. And yeah, while these profile picks are not they're definitely not correct. It's showing the correct data, and it's showing other information like growth, the number of followers, so this is a good second version. Now, if you make a mistake on your second or third prompt, you have the ability to go back here. So I'm just going to show you where. They keep changing things because they're making updates to this application. But you can see here at the bottom of your last prompt, there's an Undo button over here. So you can click Undo if anything breaks. So I'm going to add more features here. I'm going to add a filter. And ask her to fix the profile pick and add a filter. So you can sort of see the process for creating an app. You create your very first prompt, you enhance it, and then you create your first version, take a look at what bolt creates for you, and then you can revise it and you have the ability to undo. And it's a journey, right? It's a process. Quality of your app or your output depends on your input. Okay, so it's adding a falter. Nice. And so we continue to have problems with the picks. It might just be a copyright thing. But okay, got Nike right. At least we've got the data here, and we've got different filter categories. I can see they're working. Let's click Music, Beyonce, Ariana Grande, Justin Bieber, Taylor Swift. So this will be a good draft, right? So let's just say we are ready to deploy this to share it. And later on, I'll show you how we can create different URLs for our app. A more advanced feature is the ability to download it and open and stock splits or connect it to a database. That's more advanced. At this point, I'm just going to click Deploy. And it's going to create a URL with Net LIFE, which is another platform, and you'll get this URL so you can see here when I click on it, it'll open the app and you can share this with your friends. This is live on the Internet. So there you go. So go ahead and create your first app and think of your idea. Put in your idea on the first prompt. Maybe you want to enhance it using AI and then look at the first draft and then just reiterate and then deploy. Good luck. 7. Building our 2nd app - Wealthiest people: Okay, here's the world's wealthiest individuals application here. You can see some of the wealthiest individuals, what source of their wealth, which country and company. And you can filter by country here. All right. So here was the prompt, create a detailed list of the ten wealthiest individuals. And I probably use the enhanced AI prompt. So created that. And then at first, the app wasn't working. So that just basically just got the bolt to start fixing things. And then it fixed it. I asked it to add profile pictures besides the name in a filter. I did that. And then, yeah, I deployed the application. So I just want to show you an example of an iteration. Let's just say I've already released it, but I want to enhance this application. So I think a good way to enhance this is to expand the list. Expand the list to include the top 50 wealthiest individuals. Let's see what the enhanced prompt says. Alright, full name, car net worth. Sure. Now it's going to ask for age, country of citizenship, a little bit more information. I can see it's using the Rat language. All right. But still only ten. But I just start small, include the top 20. I think I asked for too much information. So I can see it adding the list here, three, four, five, six. So it's getting the image from Wikipedia. Okay, now it's adding more people, nine, ten, 11, 12, Okay, this is looking good. Number 16, Jensen Huang. So this is when you're watching the code long enough, you kind of get to understand what it's actually doing here. So here we go. Now we've got more a longer list, up to 20 people. And we got a filter, minimum net worth, country. And now I can actually download this and I can deploy it. There we go. 8. Building a Multi-Currency calculator: Okay, here is a practical app that allows you to convert one currency to another. For example, let's see $100 US is 94 euros. You can then email the result to yourself. And then you can also look at your conversion history. And there's also a calculator here if you just want to make some calculations on the fly. There we go. So this is inspired by another app called X currency. But, yeah, I just want to show you another type of application to spark your ideas. So let's just look at the prompts that I use to create this. So originally, I put create a multi currency calculator application. But then I use the AI prompts, multi currency, converter. And then if you click the AI prompt in the bottom left, it'll enhance your prompt basically to cover all scenarios or most scenarios. So I'm not going to go ahead and do that because I already have. But yeah, let's just move that prompt. That's how I started this app, right? And then went ahead and did its thing. So created a comprehensive currency converter app. And then my next prompt was add a calculator function that will take the currency selected from the drop down it didn't quite match match that. What I wanted to do was to be able to use a calculator in Euros or US. But then I realized it doesn't really matter because $1 is $1. So I let that one go. And then I put, can you add a calculator underneath because it wasn't adding the calculator? But it ended up putting it on the side, which is fine. And then I added another problem, add an email function and allow the calculator to compute in dollars, add a header title, chic voyage global currency. And then I deployed the application. I got my link. So one final touch is I want to add a website link. So if I want to link this title here, link the header hqvoyage to this site. And yeah, I think that's pretty much about it. Add a flight finer below. Now let's not do that. Let's just see one of my let's see. I try to I'm very ambitious, so I tried to add multi functions to an app, even though it's not related. I should just stick and focus to one core function and just keep it tight. Okay, so let's just click this. Does it open the site? Yes. Awesome. So there we go. That's how I created the multi currency calculator application. 9. Building a Cryptocurrency Dashboard using API's: This is an example of how we can use an API or application programming interface to connect to a database of data to use in your app. So I'm going to just share my prompt here so you can see what I have done. Alright. So initially, I just asked for a cryptocurrency dashboard. I used the AI icon to enhance it. And initially I was using a site called coin Market Cap to get their API. So my prompt was create a cryptocurrency dashboard, and then when I AI enhanced it, created all these different features, which is amazing. And went ahead and created it, but it had some issues. And I thought it was because of the API. So what I mean by that is if we go to the actual source of the data, so coin market cap. They actually have documentation for their API. So I just signed up for a developer free account, and that gives you access to get an API key, but it's very limited. So what bolts, I try to ask it to use the API key. And I basically prompted it to say, use this API key, but it had issues using it. So what it did was it used another site called Coin Gecko. They have a free API key and then it even explained it here. It said it doesn't require authentication, provides better rate limits for free usage. And now we have real time data from our cryptocurrency dashboard in the top right. So I'm actually just going to verify if this data is current by actual going to the actual app. So if I type in Coin Gecko, I can see prices are 100,000. Arium is just below 4,000. XRP 259. Yeah, so this data is fairly current. And so this is a basic dashboard, and I like to customize it, right? So add the ability to click into a crypto and display the percentage change over time. A show the top gainer. Let's just see how many there are here. One, two, three, six, nine, ten. And an explanation for the increase. All right. So another example of reiterating your app. I'm actually pretty impressed with what its shown here. And you can take inspiration from the original site, and you can look at what type of improvements do I want to show? Because this is a pretty good app as it is. All right. Here we go. Okay, so showing the top gainer, XRP and the reason why it's gaining. And we have the ability to click in select when we select a crypto, it's showing this dashboard below. It's giving us some more detailed information. Now, the chart's not working, but it's okay. I'm sure we can fix that. So this is a good improvement. So I'm going to ask it to improve on the charting and then an option to set email alerts. All right. Let's get back to our prompt. Let's go back to the chat. Okay, so here's our last prompt. Let me just Show better chart show chart data at the bottom. And a customizable email alert based on percentage increase or target price. Oh, sorry, I'm blocking that. Let's move that over. So here's my new prompt. Show the chart date at the bottom, and a customizable email alert at the bottom. Oh, now it's showing the chart. Okay. Um over time, including up to one year and all time. And a customizable email alert. Alright, let's see what we can do with this. And I think if this works, this would be a good chance to actually deploy this as a release one version to share with the world to get some feedback. So the key learnings from creating this app are usage of an API to enhance the functionality of your app. And we started with a very basic prompt enhance it with AI. And then we reiterated. So there we go. Where's the option for the email alerts right here so we can see Bitcoin over one year? So one year ago it was at 41,000. Let's just double check that. So the data should be the same because it's using the same API key. And I should be able to set an alert here email address. If target price goes Okay, something wrong here. See, it's still the charts still going even though I clicked the pop up. Okay, so what I would do is fix the email alert feature and place the button above the charts. Well, everything looks good. It's just that email alert feature wasn't working. So you got to test your ops, test test test. So something I've learned in the past couple of years is user acceptance testing. So anytime you create a release, you definitely want to test all the core features of the application to make sure that something didn't break anytime that you make a change. Okay, looking good. Okay, see the button is placed at a different area. Set it for Dogecoin. We'll set an email alert when Dogecoin is at $0.60 goes above create alert. Alright, I'm not sure what happened there, maybe in error, but yeah, I think you get the idea, and it's just constant reiteration after this. So I think we actually accomplished a lot in this 15 minute video, created a pretty good cryptocurrency dashboard and set some email alerts showing the data over time. And yeah, I hope you can get some inspiration from this. 10. Building an App that can Transcribe audio: Hey, in this lesson, this video, I'm going to demonstrate a new type of app that can actually transcribe texts from an audio file. So this audio file I'm going to use was actually generated by Google's Notebook LM, which is an audio podcast. So here's the app. It's called an audio video transcriber. We're just focusing on audio right now. And although it does have the field for a video URL that's not available yet, I would like to get to that step. But what I've asked it to do was to include this ability to upload videos or audio so I can click here and I can actually find the WayFle. So we're starting from scratch here, and I'm going to find a Wayfle Old Coin Summer. Oh, I think this is the one here. So here's a wayfle. You can see it's processing. So I'm using another platforms API. It's called Assembly AI. I'll quickly show you the site here. So assembly ai.com. I'm just using the free plan right now, and this provides the speech to text functionality, and it allows you to distinguish between the speaker. So here we go. So we can distinguish between speaker A and B, and we can actually copy the transcript so we can use this generated text elsewhere. So let's just say let's just bring up a notepad. And we'll just paste here. So that's the transcript. Alright, so I'm just going to reverse engineer. Alright, so I'm going to go through some of the highlights of this app, and I'll blur out some of the parts that are confidential, namely the API keys. So I started off very simple prom, create an app that can take YouTube URLs and transcribe them and provide captions. And as I told you, I'm not there yet. But yeah, told me it's not a good idea to paste API keys in this window as a best practice. You can do that within the ENV file if you go over to code and then in the ENV area, this is where you can actually paste in the API key just as an FYI. So I created the initial UI here with the URL field, the button. And yeah, that was the draft one. And then it took me a while to find an API key, an API key that could actually digest video or audio files. So I went back and forth quite a bit. And actually, it wasn't until I found assembly AI. I asked it to update initially, I I try to use some APIs from Google, and that's an ongoing process. But just as a version one, I use Assembly AI, and so they offer the free API to take audio files and transcribe them, and it allows you to copy and paste the text. So I basically told it update to use Assembly AIs API, and it actually did that pretty seamlessly. But what it didn't have was this area to drag and drop audio videos. So I told it to allow the user to upload audio or video files. So then I understood that pretty well. And from there, I had to give it more one more iteration. And that was the application should allow you to distinguish between Speaker A and Speaker B, as well as copy the text. And see here's the prompt over here. And yeah, that brings us to where we are today. So what are some learnings here? So it's both pretty powerful. I mean, the ability to take a video or audio and transcribe it but also to build the UI. Bolt understood that pretty well. And I'm pretty impressed by the drag and drop audio video functionality and the ability to use the API from another platform. I understood that pretty well and the ability to distinguish between Speaker A and B in the transcript. That comes from the API, but I had to explicitly tell Bolt to do it and to allow us to copy it. So this is a good working version one of this app. Hopefully in the future, I can get the video functionality transcription to work, and I can share that with you. And yeah, so that's a different use case of using bolt dot u to build useful apps. Hopefully this gives you some ideas. 11. How to set up Email Authentication: Okay, in this video lesson, I am going to cover how we can build email authentication using Firebase. So I have an existing application here that's open right now. It's a multi LLM chat bot or Cloe and Chat GBT. And you can you can just use it openly right now, but I want to put an email opt in. I want people to sign up before they can use it. So what we're going to do is go to a program called Firebase. This is owned by Google. So you can just sign up here. I'm going to create a new project. I'll just call it chatbot. I'm going to click Continue. And I'm just using the free version right now. I'm just going to enable Google Analytics by default. You have to select a Google Analytics account. I'm just going to select one of my existing ones. Okay, Project is ready. Let's click Continue. Okay. So the first thing we want to do is let's go to Get Started, and we're going to go with a web app. And let's call this chatbot, and I'll register. Okay, so we have some code here we can use. We copy this, but we haven't set up our authentication yet. I mean, our email authentication. So let's just click Nick continue to Console. Alright. So now that we've created our project, let's click on authentication. All right. Let's click Get started. We're going to select email and password. Let's enable it and allow email link password less sign in. Okay, so this enables you to just click on a link in your email without using a password. It's a little bit more configuration, so I'm just going to disable it for now. Click Save. Okay, so this is now enabled. All right. So yeah, we've enabled the email authentication. So if we click Users, we don't see any yet. Okay, so to implement this, let's click on Project Overview. Let's click on Project Settings. And let's just click on the project here. Alright, so we do have this web API key. So I'm on Project Settings General. I'm going to copy this code here. You go back to bolt. Set up email and password authentication using Firebase and this code. All right. Yeah. All right. So there's one potential problem. I'm not sure if this is a deal breaker. We're just going to need to test this out to see if this works@gmail.com. All right, so let's sign up. And you can see that we have this logout button here. So that's a good sign. Let's try sign off. And now let's try login. I'll just enter a wrong password just to test. Okay. Okay. It says Firebase error. So probably this is a good sign because the password doesn't match what's in the database. Let's try the correct password now. Okay, that works. So let's go to Firebase to see if we have our user here. So let's go to project overview. Let's go to authentication, and we can see users. There's that new user we just created. Okay. So from here, we can actually reset, disable and delete the account. And yeah, so that's how we implement email authentication logging on your app. So just to summarize, you went to Firebase. We created a new project, and I created a new project called Chatbot and set up the authentication sign in method. I selected email but you do have other options here. We just went with email just to keep things easy, and you have more configuration options here, for example, email address verification, which we didn't set up, but you can pass your reset template, email address change, et cetera, the stuff gets a little bit more complex. And what we did is we went to our project overview. And we actually got the code under General, and we use this code here. We copied this code. We went to bolt and asked it to implement email authentication, and we paste it in the code. You can see right here. Set up email and password authentication using Firebase and this code, and I pretty much just paste it in. I tested it, and it worked, as we can see, two users in this database. So yeah, that's how you can set up email authentication. Pretty cool. 12. How to set up Gmail authentication: We are going to try to set up Gmail authentication for our app. Please watch the previous video on setting up the project in Firebase, if you haven't already. We're just going to continue using the same project that we created in Firebase for the chat bot, except I'm going to the project. I'm going to click Sign in Method. We're going to add new provider, and we're going to select Google. We're going to click AB Okay. We want to select an email address that will be presented to users. Okay, I'm just going to I'll just select my Gmail address. Okay. I go to click Save All right, so this is enabled. Now let's go back to the project. All right. Let's get our code. Let's go back to bolt. Please implement Google authentication using Firebase and and this code. And I just paste the codes. Let's give this a try. Okay. So let's test this out. So we have this new button here, sign in with Google. But it's saying this request action is invalid. Let's ask him to fix it. I can see that in the errors, there's some type of pop up block. Maybe I need to Yeah. Allile third party cookies. Alright, let's try again. Firebase error. Let me sing off pop up blocks. Maybe what I could do is try another browser once I've deployed. But let's just see what ball says. Let's go ahead and deploy this. Let's look at the errors that there were two errors before. It looks like the pop up block error is gone now. Let's just deploy Alright, let's try this app now. Okay, let's try Google authentication. Doesn't work. Let's try it on the brave browser. Unauthorized domain. I'm still getting unauthorized Okay. Tell me how to fix it. I need to add this domain to Firebase. Go to Firebase, select the project, select authentication settings, authorized domains. Let's try this. Okay. Click authentications settings, authorized domains. Just want to make sure I'm capturing this. Click add Domain, pace us in. Alright, let's go back to bolt. You might also want to add local host. No code changes are needed. Okay, let's go to Let's just add this IP address. So you can actually ask bolt questions during the troubleshooting process. Here we go. Now, let's try this again. Let's just refresh. Continue with Google. Walla. Let's try login to our app, using Firebase. And amazing. We have just added Google authentication to our app using Firebase. And you can see here that we have this Google authentication provider instead of the email. So what we did just to recap is for signing method, we added a new provider, which is Google. We had to go to settings and authorize domains, and we deployed it, and we add that deployed domain to authorize. I also added an additional IP address. We did ask both to implement Google authentication. I'm just going to find that prompt. Okay, here is a prompt. Please implement Google authentication using Firebase and this code. So I got the code from the project the project in Firebase. And then I actually had to troubleshoot using the errors that we got, and Bolt actually helped. Let's go to the last prompt here. And I told it, I'm still getting an error saying unauthorized domain. How do I fix this? It actually gave me a very good answer. In fact, it gave me the answer. I went to firebase, went to the project settings, authorized domains, and it works. So there we go. That's how we add Google Authentication. 13. Creating the Paypal Dialogue Box: Alright, so here's a sample app with a Pay Pal paywall. So it outlines the features that you'll get if you pay, and you can kind of see the content behind it. And if we click PayPal, it's going to bring up the familiar dialog box that you need to enter in information. So let's just take a step back here, and I'll take you back to Boldt New. So I asked it to create a thumbnail gallery of stock videos in my Google Drive. Each thumbnail should be a representative frame. So I just wanted to create a basic app that I could test out the PayPal paywall. To actually implement my idea, I need access to the Google Drive API. So it just created a simpler version of my original ask. And so what I ended up doing was I asked it to use PayPal. So I'll just bring you back to that prompt. I actually took a few tries here. So this is the PA PL developer dashboard. So once you log onto your account, you should go to developer mode, and what you need to do is get your client ID. So once you have set that up, they'll give you the ability to try a test payment using fake credentials. And you can see here we're on Sandbox mode. This is live mode, but I want to be on Sandbox mode, and you'll see here. Now, the information you need is down here. You need your API credentials, and you can create an app And then just call it anything. And what happens after you do that, you'll get a client ID that you can paste over into Bolt dot N to bring up that pay paypal button that will come to your PayPal dashboard. So that in a nutshell is how you could implement a pay button using PayPal and essentially how you could monetize your app by putting it behind a paywall to get access to some functionality. 14. Creating the deep seek api App: Alright, I'm on the Deep Seeks website. This is the Chinese AI competitor to Open EI. And just checking out, what are the capabilities cross models here. So I just want you to know that this page exists on deepsk.com, so we got deepsk V three versus HBT. And honestly, I don't know what all these stats mean, but they're basically showing in terms of total parameters, the volumes more than Lama. They don't list HGBTs let's try to use this. You can actually download it on your phone, and I've tried it and it's pretty good. Sometimes it is quite slow. And I think there's a lot of traffic right now. So let's go into the chat. So I already asked how do I use this API in my app? Okay, sign up for an account, navigate to the API section, generate a key, and Looks like they gave us the code. Let's try. Let's try. Let's go to the site. Let's Let's top up here. $2. I'll just use my PayPal. Alright. Payment successful. Okay, so I've topped up $2. Let's create a new API key. Let's call a video. So I'm gonna delete this API key by the time you're watching this video just for security. And, um Let's start with a new prompt here. I want to show you how this works. Creates an AI chat OG Deep seeks API using Well, using this code. I'll put in the API key later for security practices. Okay. Using Python code. And I will enter the API key in later. Okay, let's see what we get out of this. Alright, so it's saying create an ENV file and add your API key here. Okay, so let me just add my API key. I'll need to create a new one because I forgot it. Just for folk. Okay. Let's go to the Code. Let's go to IV. Well, I have to crate. All right. Let me make sure I created. Okay. Yeah. So this is where you would put it. Okay, let's test it. Well, something is not working. What is a Bitcoin prediction? Okay, that looks promising. Which model are you? Nice. What is the best coding language? So I'm going to check my usage account. Okay, Python web development. Solidity. Great. So et me refresh this. Okay. Data may be delayed by 5 minutes. Okay, so now that we have it working, let's just create a more creates a visually friendly page around the chat assistant. Mm hm. So what we're doing here is we're making we're making an AI coding app, but we're tapping into the API of Deepsek so, yeah, we can create our own software as a service. Okay, name it. Okay. Let's just test it out. Explain quantum physics. Let's expand. Thinking Okay, very nice. I'm going to go ahead and publish this. And yeah, to summarize to get this to work, I actually had to tell it it's not working, so it fixed the chat assistant. It made several important fixes to API integration. And that's what made it work because it took me a few attempts. So what this really shows is if you're getting an error, give that exact error to bolt, and sometimes it's smart enough to troubleshoot it. Okay, so I'm going to just save that. Open in stockblts create a repository That's just for later. Mm hm. So what that does is, when you create that repository, you can use it outside of bolt later. So I'm just been starting to create repositories of important apps. So later I could reuse it in the future. Okay, now I want to deploy this. What is the best digital nomad country in the world? Alright, Colombia. Interesting. Mexico. Okay, I go stop it there. So hopefully you found this video helpful. 15. How to Build a Multi AI Model LLM Chat App: Hello there. I've built a multi bot chat that can use various AI models here. We can see we have a long list, and this is still experimental. But yeah, I think this has a lot of potential, and I wanted to share this because I think it's pretty mind blowing, actually. You see all these models from Microsoft Anthropic, Medama Google, Google Gemini. So let's just start with Google Gemini and start with Hello. What are your full capabilities? Okay, let's see. Text generation learning and adapting. Translate languages. Okay, so let's ask it to Can you translate your last response to Spanish? Oh, okay. I thought it would know that. D. Translate this to Spanish. Then I'll ask it a math question here. Okay. Let's just ask it a simple math question here. If I'm renting a car December 21 to 27. My daily calls. Is this a good deal? All right. Let's switch to CHAT EBT. Version four. Ask it the same question. How long did it take to train Open Esa? All right. So as you can see, I've got a working multi language model chat bot, and I'm just going to show you some of the prompts that I use to create this. Yeah, I asked it to design a scalable multi chatbot that uses the leading AI language models, gave some examples, and then I used the enhanced prompt. And so then I used I use a platform called Open Router. I got an API key. I paid $5 worth of credits. I went to keys, and it gave me an API key that I used as the API key in my bolt app. And I also use another AI program called Perplexity. So I asked it to implement a open outer API. And it gave me the code here. So I copied this code into my prompt. And what I said was basic setup, and I pasted the code right here. Let me just move this over. Yeah, so the highlighted part, I put right there, and then full implementation. I copied the final part. Step four, I just copy right over there into here and there we go. And then I pasted in my API key. I told it to set it up, and now I've got a multi bot chat bot. So the last step is, I just want to deploy this and save my progress for later because pretty happy with this for someone who doesn't code. Alright, so once I deploy it, I'll have a URL, and I can actually share it with other people and improve it from there. 16. Building a Ride sharing App with Stripe Integration: Alright. This is an interesting app here. This is a pretty basic ride sharing app that uses Google Maps API. It also has stripe integration. And so what you can do here is type in the address, the starting location, the destination. It will show you available drivers and the amount, the amount of time, and then you can confirm your ride. So I'll just demo this I'll just put Gramble Islands. And then I'll choose the airports. We actually need to refresh it, so we start from scratch. Okay, so it starts in New York, but I'll put Granville Islands. I'll choose a far destination Stestono, $25. It shows us available drivers. This is just a basic version. There's a lot of enhancements I can make. But I've just set up the confirmed ride so that it'll go to Stripe. So for Stripe, let me blur this out. I'm just in test mode here, and I've used my publishable key for testing. That's for testing this confirm ride. So it'll come up with this pay now, and it's not active, but you can see here, payment is successful. You ride is confirmed. So this is a basic ride sharing app. I'll just show you some key prompts here. So I create a full ride sharing app similar to Uber, and I used enhanced prompt, and it added a lot of additional features that aren't in here yet. So user authentication, real time location tracking, ride booking and matching system, InappPayment processing. A technical requirements, there's these APIs here, so I use the Google Maps API. Responsive design. Yeah. So all of that stuff is extra, and bolt came back and said, There's some limitations here. Do you want us and it suggested two alternatives. Do you want just the front end or a simplified version? So I asked to create a basic version, and it also said they need a Google Maps API. And so this is where I'll just go to the part where I actually needed to put in the API key. So I went to Google Maps, and, yeah, what you need to do is you actually need to get the keys from Google Maps. And this is a bit of a maze, but you go to key and credentials, and then you get your API key, which I won't show. But this is where you get the API key. So this gave the mapping functionality over here. Otherwise it wouldn't work. And then from there, I asked it to swap up that confirm write button as a payment link to Stripe. And that's where I got the publishable API key from Stripe. So I'll just show you the prompt here. So I just said, Make the confirm write button, go to Stripe pay button. I actually misspelled that. But then later on it asked me for the actual API key which I provided later on. And that's where we get to the app today. So it's a simple app, but it does require the use of two APIs, the Google Map API, as well as the Stripe publishable API key in test mode. And like I said, this is just a very early version. It's a mock up, and a lot of enhancements can be made to this. But I actually read that ride sharing apps do use the Google Map API as well. So that's where I got the idea from. So hopefully this can kick off some creativity, some ideas from you for building a ride sharing app or any type of app that requires some math functionality. Maybe this will kick start some ideas from you. 17. How to create pong using ai coding: Alright, I'm going to demo a very simple game just like Pong. So it's two D tennis. But I've added a bit of a twist. You can add the players names and choose a profile pick. So let's just start here. Greg, and I'll just add a profile pick. And we'll put Kasey Choose a pick choose this one. And then we'll start the game and space bar to start. So the controls are below. So W and S is for player one. Up and down is for Casey, player two. So I'm just going to play against myself here. But as you can see, we've got a very simple game of pong here, and we've got the profile picks. So it kind of adds a bit of customization and we've got a sound effect there. And the game will go up to something like 11. So this is the Pong game. So I'm just gonna close it. I should probably add a feature to stop the game. But I'll just go behind the scenes and I'll show you my prompts. Alright, so I started off with a prompt, create a two D tennis game like Pong. And then I used the enhanced prompt to come up with something that was more detailed. So let's just go to the prompt, and I'll show you what I mean. Create a two create a game similar to Pong. And the AI is smart enough to recognize a game like Pong, and then you can click the icon here for enhanced prompt. So you can see there that it really expands on that one line request, and that's the magic sauce right there. So that was my first prompt. So I went ahead and did data for focusing on the left. And then I saw the first version, and that's where I have my second prompt. Allow the ability to add player one and two names and add a profile pick. So this dialog box you see here is what came of that second prompt, and it did a pretty good job exactly what I needed. And yeah, that is it. I deployed the application to this URL, and that's a simple game that we have. I mean, you can use your imagination to make this more complex. You could probably ask it to change some of the colors. Maybe you want to make the paddle longer or give the ability to customize the size of it. So you can use your creativity to make it more interesting, but this is just a basic example of how you can make a pong game, a two D pong game using Bolt Nu. Maybe you want to use this as inspiration to create a similar or even another game using some of the ideas here. So hopefully, this video lesson helps you out and inspires you to create some of your own games using AI coding. 18. How to create space invaders using grok 3: Alright, here's how I made the Space Invaders game using Grock and Bolt on. It's not perfect. There's some bugs. Out. I got a music slider. All right. Let me show you the code from BoltotU Okay, Space Invaders game. So this is an HTML five game, and I got the code from Grock. So I asked to create HTML code for a Space Invaders type of game. And so gave me this code here. And then I simply brought this game in to bolt. Just turn on the volume here. So I asked it created an HML Space Invaders type game using this code, and I pretty much pasted the code in. And then I put some additional prompts. I asked it to create some sounds. So I went to the site opengamear.org, and then I found music. I found sounds for firing. And when you hit when you hit an alien. So I put this prompt chair. Use the sound from the music. Use the sound for firing. And then I asked to put a music slider. Make a volume music control, and then use the sound one hitting the aliens. And then I deployed the application. Let's make it larger. There we go. Now it's working. It's a little bit buggy. There you go. You got the idea. I think there's some potential here. So that's how we use Grock in conjunction with Bolton U to create an HTML five in Space Invaders game. 19. User friendly URL: Okay, now that you've deployed your app, I want to give you some guidance on deploying it with a user friendly URL. So in this example, I've deployed a clone of an AirbME app, and I'm using Go Daddy as my domain manager. So I'm going to show you how I point it using my own subdomain to the URL that gives you with NetLfi. So let's go to NetfiG to the AirBNB site. So in the index, if you go to code, it's on line seven. You want to change this title to what you wanted to display. Otherwise, it's going to display VIT plus React, right? You probably don't want that, so you want to change in the code. Once you hit the ploy, you're going to want to go to the Net Loofy site. And from there, you can go to your sites. So I'm going to go to the BNB one. Just click on there. So you're focusing on step two. So you're going to need an existing domain. If you don't, you can actually just purchase it straight from here. But I have an existing one, so we're going to go to site configuration. So this is where you can actually change the site name to whatever you want. So this is the easiest way to do it. You're going to get something like, for example, B&B six oh four dot netloofy dot app, and it takes a fact right away. So right away, you're going to have a better URL than what they originally gave you. Okay, so then once you have that URL just spook mark, save it somewhere. I'm going to go to Go Daddy, Domain Management. So this is the domain I'm going to use. I've created a forwarding subdomain. So you can add fording, and I could type whatever a B&B. And this is where I would put that net Lafe URL. So if we go back to the site, I would paste this name here. Right in there. And then we would hit Save. So that would then effectively mean airbnb a creative academy.com would then forward to this app. So you can see I've done it with B&B. And so if I type in BNB creative academy.com. Okay. Should then take us straight to our site. Oh, there we go. So BnB dot a creative academy.com, then forwards to the B&B six oh fourntloofe dot dot automatically. So that is your first step to using your own domain that forwards to a Neto L automatically. And I think this is the best way to deploy and share your app. 20. Forward domain name to netlify: But yeah, so let me take you to Net Lafe. So after we deployed it, by default, it goes to this provider, which you can see, and these are my different sites. So I click in here. The easiest low hanging fruit is to click on site configuration. You can change the site name. So I changed it to Trump and Melanin. So I don't want to change this because you'll see I purchased a domain name from Go Daddy, which points to this site. Alright, so I'm going to show you the domain I got. So Trump and Milania coin.com. That's actually the correct spelling. So I purchased this domain from Go Daddy, and I simply use the Ford domain link and forward to any side at the bottom. That's where I pasted in the Netfy URL. 21. The Trumpcoin Landing Page: Hi, and welcome to a tutorial that's going to show you how I created this lining page Trump a millennia coin that has an email opt in at the top, using an email marketing platform called Kit. And we've got an image here, which I created with AI. And we have a buy button that will go to let's say referral to crypto exchange. We've got live pricing of the token, also percentage change, the market cap. And we also have pricing for Trump's wife's token, Milania coin. So yeah, I'm going to take you behind the scenes of how this got created. So let's just start with the top. I use software by ConvertKit, also known as kit now. So they have the ability to create an opt in form. And if you go to grow lining pages, you can create a lining page. You can choose different styles. So this is just one that sits at the top. It's not too intrusive. But I can get reports here. I just set this up last night, so very new. And yeah, this will allow me to capture email addresses to people who fill this in this one over here. So for example, I would sign up here. I would get an email in my inbox to confirm. Okay, and then this buy button will actually go to the site here to purchase the crypto. And now, this pricing, this comes through an API from Coin Gecko, actually. So they offer a free API that allows you to get pricing so if you see here, $50.56, the pricing should be pretty similar here. All right? So that's where the pricing information comes from, all the figures. And now let me just take you behind the actual AI coding. So I started off with this prompt, build a lining page, and it's misspelled, I know. Show the price of Tromcin using this URL with email alert options. So I actually took this URL and then fed it to both. I understood it, even with the spelling mistake. So it created the lining page. Alright, so the next prompt was to integrate the form here. So I tried JavaScript. So this is from my email marketing platform. So they give you this code here to copy and put it on a website. But for bolt, I just said, integrate this opt in form, and then I pasted the code. It said it actually ran it. I implemented it, but I didn't work initially. So then I tried using the HTML then I just basically gave it the same prompt and then pasted it in the HTML. So it just shows you that sometimes you need to just be persistent and try a couple of different options. So eventually, the form worked, and it's at the top. And then I gave it an image. So I created this image using Wix. Wix has an AI image creator. So I was able to create a blog post, actually. All right, so this is my blog site, and I actually gave the direct link copy image address because if you just upload an image, both doesn't seem to like it, so that's how I added the header image. So I gave it the prompt, add this image to the header and pasted the URL, the image address. Okay, so that started to give our project some shape. I had to go a bit of back and forth, and eventually I forked off into another project. And you can see that here in the project Trump coin price tracker landing page forked. Alright, so what I did is just to deploy it. I deployed it to the Netfi UL. And even once you deploy it, you can still make changes. But sometimes you need to deploy it to actually test it out. So I wanted to do things like add a video. I wanted to test the email opt in. Which is still a work in progress, by the way. And then I wanted to add a second token, the Milania coin. And I'm not sure if the prompt is showing here. But I gave it the same URL from the site. So I said, show live pricing for Milania coin, and then I gave it the URL. So that's not showing here. So that's how we got the pricing here. This video tutorial it's a working progress, but since I haven't deployed this forked version yet, it's not showing on the published app. So the published app is at NetfiThis is the underlying site Trump and ManicinNtlaf dot app. Actually realize the domain URL is misspelled. But yeah, so let me take you to Net Lafe. So after we deployed it, by default, it goes to this provider, which you can see, and these are my different sites. So I click in here. The easiest low hanging fruit is to click on site configuration. You can change the site name. So I changed it to Trump and Melancin. So I don't want to change this because you'll see I purchased a domain name from Go Daddy, which points to this site. Alright, so I'm going to show you the domain I got. So Trump and Milania coin.com. That's actually the correct spelling. So I purchased this domain from Go Daddy, and I simply use the Ford domain link. And forward to any side at the bottom. That's where I pasted in the Net Liffe URL. So yeah, that in a nutshell is the full workflow there for this site here. So we've implemented an email opt in. We've added a custom image. We have a call to action button. So that actually was a prompt. I didn't go over. So I basically said, add a buy button with this URL and give it this wording, buy from crypto.com. So that's why I did for the button. And the pricing I got from the coin Gecko site using the URL for that specific asset, which I showed you for tram coin and millennia coin. And then I show you how we can give it a nicer presentation with a proper URL that's forwarded from Netlify, which is the default platform that BalotN publishes too. So that should cover a full working workflow. This is a aligning page that's meant to provide pricing information, purchasing information, and also gather some email addresses. 22. Recap lessons learned: Alright, so I showed you some examples of how we built different apps. We built an app showing the wealthiest individuals. We built a golf scoring app. So you can see how important it is to make sure that your prompt or your input is as specific as possible, or you can just get started, ask it to build a simple app. And reiterate, which means basically enhance your app once you actually see it. I showed you how we can attach a PDF with something of a reference to get started. If you want to copy an existing application or show it something. I've also showed you how you can use the AI icon to enhance your prompt, which is super powerful. You can see how it made my simple prompts a lot more detailed. And I also demonstrated how you can connect your app to existing databases using APIs. I also showed you how in the prompt, you can reiterate by simply seeing what it creates and then seeing any potential enhancements, and then just using plain English to ask it to add additional features. I've also showed you how you can undo your prompt if you somehow manage to break something and you want to revert back to the previous version. Lastly, I showed you if you're happy with your app and you want to create a release, how you can deploy it by clicking the Deploy button, which will make a public link that you can share with friends or colleagues to get some feedback. 23. Ai coding Summary hd: So this concludes our crash course on AI coding for beginners. This is just the beginning, and I'm also continuing my journey. We have learned how we can use Bol Dog New to use our prompts, our ideas, our creativity, to create different types of applications. And I recommend you just play and share your apps with your friends, get some feedback, and see what type of applications you can create. When I took a look at this, I was amazed that I was able to create a golf scoring app and an app that creates a dashboard with different foreign currencies, making it customizable. So anyone that uses this could customize your dashboard top ten livable cities, for example, being able to customize that for different cities or for a golf scoring app, different players. And I think the limit is really your creativity. However, this app is just a starting point. If you want to build complex apps, you may look to different platforms like Cursor. And remember, this is just the beginning, I predict that there'll be more enhancements, different platforms, more competition. But the core skills are going to be your prompts, being able to reiterate your creativity and referencing using different applications to get started with existing ideas and being able to connect to different databases or APIs. So I hope you enjoyed this course, and you'll take a look at some of my other offerings and thanks for taking the course. Hope you learned a lot.