Build Full-Stack Apps in Minutes with Hostinger Horizons

--- type: transcript date: 2025-05-31 youtube_id: yJdEkJL0LhI --- # Transcript: Build Full-Stack Apps in Minutes with Hostinger Horizons In this video, I'm going to be showing you Hosting or Horizons, which is a platform that allows you to build out full stack applications completely with natural language. One thing that I often find myself doing is finding these one-off tools for things like converting SVGs to PGs or maybe even downloading different videos from different sites. And oftent times, you'll land on these sort of random websites where there's a bunch of ads and what have you where you can upload your file and it might do the task. But I thought it'd be interesting showing you how you could build and deploy something like this for it to be completely your own tool. So, a personal use case that I often have is I'm often looking for logos in a JPEG or a PNG format. One of the tools that I use to edit my thumbnails, for instance, doesn't accept SVGs, at least not easily. Something that I'll often do is I'll find a site where I can paste in the code for an SVG and then I'll ultimately convert that to something like a PNG or JPEG. What I'm going to say in this application is I want to build out an SVG conversion tool. I want to be able to download it as either PNG or JPEG. I want it to have four different qualities. I want 1x, 2x, 3x, as well as 4x. And then additionally, I want a sidebar where it will store the original SVG that I can load up at any point in local storage so that clients can see their previous images when they revisit the site. The nice thing with the platform is you can really start at different portions. You can dive into the idea and then refine things like the design or you can alternatively start with the design that you have in mind and work outwards towards the idea. Now, one thing that I find with the platform is while you can put quite a bit of context in terms of what you want within one prompt, the thing that I would definitely encourage is try and iterate on your idea. Because the nice thing with this is once you have a visual of what your application looks like, you can go and refine from there what you want your application to be. Now that we have this starting point of our application, we have this history sidebar. We have the ability to drop our SVG here. We can click between JPEG or the different quality. We basically have all those component pieces of our application. Now, I'm going to try and make it a little bit more professional. So, I'm going to say I want a simple footer with a privacy policy as well as a terms of service. And I also want a simple header where that text of SVG converter is at the top. And for the overall theme of the website, I want the site to be black, but I also want the accents and the primary color to be purple with a linear gradient towards a light blue. All right. So, here is the second iteration. So, we have a header, we have a footer, and we have this overall dark theme. Now, I'm going to say instead of dropping in an SVG, I want to be able to paste in the code for an SVG and be able to select the different image styles from then. And I also want this sidebar to always be showing. And I want it to be on the left side. As you can see with the platform, it is really straightforward to use. You can send in your request. What it's going to do is it's going to break down the task and then it's going to go through the project and it's going to find all of those various pieces and update the code for us. The one thing that I did find is it is relatively quick considering the quality of the designs and the quality itself actually does seem to give quite good front-end UI components. Say if I'm looking for the anthropic logo, what I can do is I can go over to the header of the website. Typically speaking, most websites will have an SVG for their header icon. And what I can do is I can go and I can paste that in. And I can go and I can click this download and convert button. Now that we have the image, I can go and I can select the quality and then I can click to download it. So now here is our converted SVG to a PNG. And then the neat thing with this is since we did ask for local storage, if I go and I test that out and I refresh the page, I can see that the history is still there. Now I'm going to try and change up the design a little bit. I don't quite like that purple as well as that blue with the linear gradients. I'm going to say I want the font to be professional and a bit thinner, but I also want to remove that purple and blue gradient style. I want the dark theme to have white text as well as white borders. But I also want to add in a dark mode toggle in the left hand corner. Now we have this dark mode as well as this light mode toggle. And if I go and I try out another logo like the logo for instance and I go back to our application, I can go in and I can paste it here. I can try and improve the quality and I can click to download it. Now, within this, I'll try and download the OpenAI logo. The one thing that I noticed is for the 4x quality, I still don't think that's high enough quality. So, I'm going to say I want the quality to be considerably higher for each multiple of an increase. I notice the 4x quality still to be quite low quality. And also on the left hand side in the history sidebar, I want the sidebar to be top to bottom. But I also want the width of the SVGs to be 100% and then the height only to fill the ratio of how tall that images. Now we see the images spanning 100%. It also looks like the height is relative to however tall they are. Now the really great thing with the platform is you can also launch your application with just one click. As soon as you click publish, you can go and you can link to this site. For instance, if I go and I open this up, I can see what our application looks like. Maybe for instance, I want to add in the container so the history doesn't overflow to the full width on larger monitors. And I can overall see what the application looks like. But at this point, you can go ahead and share this link. This is a live link of the working application. If I demonstrate that here, we have the saved icons. And also the way that it's set up is when I go and I refresh the page, we also have that SVG being stored in local storage. When you come back to this website, local storage can hold, I believe it's up to about 5 megabytes of storage, so long as you don't actually clear the storage and what have you. You should be able to see the history at least of the recent conversions. And where that's helpful for someone like me is I might often reference these same logos again and again and not to go through the same process of having to try and get SVGs and convert them to PGs each time. This is just a tool that I know I will personally find helpful for things that I do. I can imagine you likely have had to do similar one-off things like this. And the great thing with the platform is you can go ahead and create these tools in just a number of prompts. We can basically just instruct the model. In less than half a dozen prompts, we have a working application. And from this point, we can just go and polish it to however we want it to look. The other great thing with this is if you're not familiar with Hostinger, Hostinger is a place where you can manage your hosting, domains, and email all in one place. From here, what I can do is search for a domain that I have in mind for my application. In this case, I can call it something like SVG Converter. Within here, I can see there's a number of different domains. Here, I'll select SVGconverter.io. I'll submit this. And then from there, I can go ahead and register the domain. And then once you fill out your application, it's going to get the domain registration. You're going to be able to associate that domain with the application that we built. In just a number of minutes, we can have an all-in-one solution that goes from idea to managed hosting. We have our domain. We can also set up the email all within one place. This is arguably one of the fastest ways where you can go from idea to a deployed application with a working URL in just a number of minutes. From here, I'll just make a few different tweaks to our application. I think I'll move this to the right side. And then maybe I'll add in a container. What I'm going to say is I want the history sidebar to be adjacent to the SVG code section, but I want there to be a container so everything from the header through down to the footer. All is uniform and doesn't overflow on particularly large screens. And I also want to move the toggle for the dark mode to be on the right hand side. One other thing worth calling out with Hostinger is they do have user guides that you can check out for more information. Additionally, there is customer support, so you can reach out to them if you do have issues. Alternatively, there's also a Discord community, which might be one of the better and quicker ways to potentially get a response. They'll show you things like live application builds and some of the new features. Now, additionally, you can tie in your Superbase account. Once you've authenticated through superbase, you can create a new project where you can leverage those different services directly within hostinger. So another thing that you can do within here is you can quickly check the mobile view. I can see the responsive view isn't quite set up and I can just again ask with natural language. I can say something like I want to make sure that this looks great on mobile. I want to make sure that the history has a foldable section where it's not showing all of the history. And then the main portion is going to be the SVG code section. We can see we have this foldable section here for history. I can also toggle on and off just like I can on desktop. And then within here I have a relatively simple web app. But the main thing with this is it does have a responsive view. Now if I click publish it's going to take this environment and push it live. And then we'll have the site where we can go and visit. This is the domain that we just set up. And if I show you my URL bar, we have svgconverter.io. And we have the starting point of these types of tools. arguably a cleaner, simpler version of some of those tools that you might Google. So, we don't have any ads on here. We just have a simple front-end application where what it's going to do is it's going to take those SVG codes and it's going to convert it to the type of file. And additionally, like I mentioned, since we are using local storage, we are going to be able to store these where we can just go and have the history of those commonly used images and we can go ahead and just convert those and download those in the respective format that we need on the fly. That's it for this video. You can go and get a free trial today with Hostinger or Horizons and use my code, which I'll link within the description of the video, where you can also get 10% off your first month. It's risk-free with a 30-day money back guarantee. If you found this video useful, please comment, share, and subscribe. Otherwise, until the next