Hostinger Horizons Tutorial – Build Web App with AI (No Code!)

Key Takeaways

If you want to build an entire website or a web application, you know it takes months to complete. But in today's video, I'll teach you how to build your own fully functional web app that's ready to launch in just a few minutes. Yes, all you need is the right AI tool and the right prompts. So without any further ado, I'm Brian and let's begin. So we're going to do this in just four simple steps and the first step is to create an account in Hosting a Horizons. And to do that, just click the link below this video and it'll take you to this page. So here, I just click on start for free. Sign up with your Google account. And that's it. We have successfully created the account and this is the Hosting a Horizon dashboard. Now this is the place where we can chat with the AI and type in and tell the AI what kind of web app or website that we want to build. So let's say I want to build a financial tracker application and if I give it a one-liner like this, which is create a personal finance tracker web app that helps people manage their money easily and if I send this message to the AI, it'll create a very basic and a generic web application and we don't want that. We need a unique, full-fledged working web application that is ready to launch. So instead of this one-liner, we have to provide the AI with something called as a product requirement document. Now a product requirement document is nothing but a file which has all the information about how the app should look, what all features it has and how it should function. And creating a product requirement document from scratch can again take a lot of time. So instead of that, I've already prepared a detailed prompt, which is in the description below. So just click on that and you will get this prompt, which will help you build a product requirement document. Now before we could use this prompt, we need to add three things here. First is the basic idea for your web app. So, let me paste that here. Next is the name of your web app. Let me type that. And finally, the build type. I'm building a web app, so let me mention that. And done. The prompt is ready. Now, in order to create the product requirement document, we need to copy this prompt and put it on an AI chatbot. So, I'm going to use ChatGPT for that. So, let me just copy the entire prompt. I'll go to ChatGPT. Paste the prompt here. And hit enter. And there you go. ChatGPT has built the complete product requirement document from our prompt, and with that, step two is done. So, let's go to step three, which is to build the app. So, to build the app, first let's copy the product requirement document. Now, go back to Hostinger. Now, paste the document here and press enter. Okay, now Hostinger is asking a few questions about the app. It's asking me which currency I should be using and what are the date format that I prefer. So, I'll just mention US dollars and date, month, and year. And just hit send. Perfect. As you can see, the dashboard has changed. We have our chat on the left side of the screen, and on the right side, we can see the preview of the app. And Hostinger has completed the first phase of building the app, and next, it's asking me whether it can proceed to phase two. Now, before we move on to the next phase, first let's second see if this app is working fine. So, to do that, let's create an account by clicking on get started for free. Let's type our name, the email address, and the password. And click on create account. And there you go. We got to and it's working fine. Now, when a user logs into your app, you want to know where the data goes, right? So, here you can see a tab called data, and if you click on it, you can see the login data that I just entered right now. So, let's go back to preview again. But right now, I can see a visual glitch right here. There seems to be two headers right here, and we're going to solve this by prompting in the chat box. Okay, I'll just tell Hostinger there seems to be two headers, and maybe remove one of the headers and keep the main header here. And just click on send. Perfect. Hostinger fixed the bug, and right now we only have one header, and the app looks really well. One thing to note is that you can also resolve bugs that you see here by sending a screenshot to the same chat, and Hostinger will recognize that screenshot, and it will resolve the bugs for you. So, the first phase of the app is done, and likewise, you can follow the same steps to build the remaining phases of the app, and check for bugs if there are any. So, guys, with that, we have successfully built the app, and let's go to the final step, which is to publish the app on our own domain. So, to do that, let's go back. Now, click on publish, and you can see a lot of plans right here. So, I'm going to choose the popular plan, the startup plan, because with this plan, you get to have 70 plus AI credits, with which you can build around 25 websites, and along with that, you get a domain for free for one whole year. So, that's a good deal. So, I'll just select this plan. Okay. It's already selected as 12 months. And from WL, we are providing you an offer, a coupon code, so you can add it here by clicking here, and typing WL20, and if you click on apply, you immediately get a 20% discount on the entire total. So, my total right now is just $158.47 after the discount. So, let me just click on continue. Let's fill in these details. Now, click on continue. Perfect. Let's fill in the card details and click on submit payment. And there you go, guys. We have made the payment and our site is live. Now, let's publish our site. Just click here. Click on publish changes. Our site is now published and if we click on view site and here's our site. It's looking really well. And let's test and see if it's still working. Click on get started for free. Let's create an account again. Click on create account. And here's our dashboard. As you can see every single page is now active and live and they are working really well. So, guys, if you see here, our domain name is filled with random numbers and letters and it doesn't look good. We want our own unique domain name. So, to get your own domain name, just go back to Hostinger. And if you click on connect to a custom domain you can just type in the domain name you want here and connect to it. And if you go back to your website and click on refresh, you'll notice the change in the domain name. So, that's it, guys. We have successfully built an entire web application in just minutes with the help of Hostinger Horizons. So, if you have any thoughts, do leave them in the comments below. And if you want to see more videos like this one, make sure you like and subscribe to Website Learners. And until next time, take care. Bye-bye.