How to Create a Personalized Productivity Tool with Hostinger Horizons (No Code AI Web App Builder)

What if you could build an entire web app—design,  backend and all—just by describing it in plain   English? No coding, no plugins, no waiting weeks.   In this video, I’ll show you how I did it using   Hostinger Horizons, the AI-powered web app creator  that might just change how we build online. Hi, I'm Jamie from Teachers Tech, and in this  video, I'll show you how to use Hostinger Horizons   to create a fully functional productivity tool  from scratch—no technical experience needed.    Whether it's a Pomodoro timer, task tracker, or  gratitude journal, you'll see how AI makes the   whole process fast, easy, and personalized. I'd  like to thank Hostinger Horizons for sponsoring   today's video. Now head over to this site right  here and you can get started for free. All you

need to do is type in right here what you want to  build or use one of the examples they have right   here. So if I go ahead and click on Landing Page,  you can see how the prompt is created, and when   I click send it off, this is where I can create  my free account—no credit card required. Before   we start building our first productivity web app  here, I just want to point out these options. We   do have the Upload Images, where we can go ahead  and take an image—so maybe like your company   logo—and upload it, and that can be part of the  design. And we also do have a microphone, which   we can enable that will allow us just to talk in  our messages. But let's start with our Pomodoro

app that I mentioned before, and I'm going to  say: “Create a Pomodoro-style productivity app   with customizable intervals, focus tracking, and  sound notifications. ” So pretty simple, but I   did give it a few detailed things. We're going to  create this and then I'm going to show you how you   can tweak it after. Let's go ahead and send this  off. So in about a minute I have this. With this   simple prompt, this is what it created me for my  Pomodoro app. You can even see down here we have   statistics and settings that we can go through.   Up here I want to point out we can switch to Text   Editing Mode. So if I click on this, I can start  editing text right in here. I'm going to go back   and just click on it again—I don't want to make  any changes there. We have a mobile view, so you   want to see what it looks like there. We have our  full screen option, and we have Preview. So let's   go to Preview here and take a look at how it looks  on our full screen. If we go to our settings here,   we have a work duration of 25 minutes. I can  slide this, I can change this, and remember—this   was just created with that one simple message  that I gave it. Let's go back, because I want   to show you how quickly we can even make a change  to this. So if I go back to this down here and I

just want to add a progress bar and allow users  to set daily focus goals, I'm going to send this   off. I haven't published it yet, and I'm going  to come back to this. I just want to show you how   quickly we can make adjustments to it. I really  like how Hostinger Horizons goes that extra   distance to make things better. Just with that  simple message that I had, it responded, “Of   course! I'll add daily focus goals with  a sleek progress bar and reorganize the   app's code for better performance. This will make  tracking your productivity even more satisfying. ”   And I noticed right away—and again, this only  took about another minute—as it went through,   it added these four different types of breaks.   And if I look down here, we have today's progress   bar that will keep track. So I could keep going  through and asking to make more tweaks to it, and   it will just make those adjustments and even do a  better job than what I'm even thinking. Now what I

really like is how quickly you can go live—it's  just one click. You just go up to Publish right   up here. You don't need any third-party tools, you  don't need to know any coding. You just go ahead   and click Publish, and you will be getting ready  to go online. So here we go—the project has been   published successfully. We have our URL that we  can go and view this site on. Now I want to point   out this though right here: you have Manage  Hosting. You can get a domain, emails—this is   an all-in-one solution. If I want to get a domain  for this, I can click on this, go purchase domain,   and so this web app that I just created with  Hostinger Horizons can be connected to that   customized domain. So you can see the applications  here where you can just go build all your own web   apps that you need and customize them exactly the  way you want—without knowing any coding at all.    Let's go ahead and click on the site right here.   This is live. We can go ahead and start testing   this out. We can see that everything's working on  here. We have our settings, we have our statistics   down below, and then we'll have our daily progress  bar as we go through. Again—it was so simple.    Before I move on to my next example, I just want  to point out these numbers here: this 498 out of   500. This shows that I used two messages—so it  was this one and this one—and how many I have   left. Now if you click on the Upgrade, you can see  all the different plan options available to you,   and then you can pick the right one. And it’s  pretty great because it is risk-free. There is   a 30-day money-back guarantee to it. So I'm going  to go over here right now to create a new project.

And the other thing I want to point out is that  if you give it more details, you can get closer to   what you want. My first example was pretty simple,  but I wanted to show you how quickly you could get   started. So this time I wanted to create a web  app called “The Daily Gratitude,” where users   can log one thing they are grateful for each day.   The app should include a clean, calming layout   with soft colors, a date selector, a large text  input box with a character limit, and a button to   submit the entry. Each submission should be saved  and displayed in a chronological list below with   the date. Add a motivational quote at the top that  changes daily. Let's send this off here, and this   won’t take too long at all to create. But I wanted  to point out—with more details—how specific it can   create based on what you tell it to. Alright, so  what do we have so far based on what I asked for?    I find this has very calming colors. We have  our date picker. We have our place where we're   going to put what we're grateful for—0 to 500  characters. So everything’s looking good. But   you know what—I still want to make some changes  to this. So my next idea is this: I want to add

a mood tracker beside the gratitude input. Let  users select from five emoji-based moods—happy,   calm, neutral, stressed out, sad—before submitting  their gratitude entry. Display the selected mood   next to each journal entry. So I want to send this  off just to make some tweaks to this. Alright, it   looks like it made the changes here with my emojis  and just the different expressions and moods that   I asked it to. But you know what—there’s one more  thing I want to do with it. I want something to   kind of keep track of the weekly—to see how many  entries. So this time I'm going to say: “Add a   weekly summary view that shows how many gratitude  entries were made and what moods were selected,   and a simple bar chart. ” So this is going to  be added, and the reason I'm doing this is just   to show you how easy—with whatever web app you  create—you can just simply keep on making changes.    When it finished up, I tried to type on it and I  noticed I couldn’t. There was a little bug in it,   so I just went to it and said: “Why can’t I  type in? ” and it said: “Oh no, it looks like   a sneaky bug was preventing you. ” And then it went  through, and now I can type—it wouldn’t let me do   that. So even with quick fixes, you can just ask  it. If there’s an error, in a few seconds it’s   all fixed. So let’s take a look at our preview  here. What do we have? We have our quote up top,   got a little animation I noticed. We have our  emojis that were added. We have our weekly   summary—everything that I asked for. So we could  go through and pick a date. And you know what I'm   going to be thankful for today? It’s because it’s  raining hard out there today—we haven’t had rain   for a while. I’ll just put in “rain. ” How are we  feeling? I’ll just leave it as this one. I’m going   to save the gratitude, and we have our gratitude  saved. We have our weekly summary. So just like   that, I've created all this customization. And  now, if everything is looking right—remember,   like before—with that one click, you can go ahead  and publish it. With a lot of the websites or web

apps that you create with Hostinger Horizons,  you’re going to need to collect data like email   addresses or reservations. So you're going to  need a database, and this is available for you   as well. Let me show you. So if I go ahead and  we'll just do a simple prompt like this one:   “Create a restaurant reservation app,” I want to  show you how Supabase is available in order to   save this data. I'm also amazed—with just these  simple prompts—what it will create here for me.    It even added the special request of any dietary  restriction. But this isn’t my point. My point   on this one is that the Supabase option right  here—it knew I needed one because it was going   to be asking for reservations, so I would need to  store those. So it’s going to walk me through how   to connect to Supabase, and that’s just up here  in the corner. I already have a project connected,   but you can go ahead and add another organization  if you would like. And then you just go through   and connect it to the API, and you have to  authorize. I connected with my GitHub account.    But then you can just go through, follow the  instructions, and then you're going to have that   database connected. It will save all that  information, and then you can publish it,   go live, and you have a fully functioning website  to store this information through Supabase. I want   to point out a little navigation here for you. If  you go back up here—I was creating new projects   from here. If I go back to the Dashboard, you’re  going to see here all the different projects that

I created. Any of these I can click on the links  like I showed you—this is a live link that we   published—or I can go, at this point, even connect  a domain with any of these ones. I could go back   and edit them as well. So if I wanted to go back  and edit the restaurant app—this last one—I can go   ahead and click on Edit and I'm back in. So just  so you know a little bit about the navigation:   whether it's a productivity tool, a booking  system, or something totally unique—Hostinger   Horizons lets you bring your web app ideas to  life in minutes. With AI-powered creation and   no-code simplicity, you can build something  that's truly your own without touching a   single line of code. You can get an all-in-one  solution for hosting, domains, and emails. Plus,   you can go live with just one click. And if  you ever need help, their 24/7 multilingual   support team has your back. Get started with  Hostinger Horizons today using the link below,   and use my code TEACHERSTECH to get 10% off  your first month. Turn your ideas into reality.