Hostinger Horizons is an AI-powered tool that lets you create web applications without writing a single line of code. Whether you need a fitness app for personalized workout plans or a volunteer management tool for a nonprofit, simply enter your prompts, and Hostinger Horizons will handle the rest.
It’s an excellent choice for first-time web app creators without coding experience. Solopreneurs on a limited budget can also benefit, as they can create fully functional apps without hiring developers.
In this guide, you’ll learn how to create a web app using Hostinger Horizons, from setting up your first project to launching it for public access. You’ll find out how to refine your prompts for better results, use key features effectively, and optimize your app’s functionality to suit your needs.
Join Hostinger Horizons Community
Connect, collaborate, and celebrate with fellow creators.
Create a web app in seven steps with Hostinger Horizons
To better illustrate the process of creating a web app with Hostinger Horizons, in this tutorial, we’ll create a fitness web app that generates personalized workout and diet plans based on user data (such as age, height, weight, activity level, and existing health conditions).
If you’re working on a different type of web app, feel free to adjust the prompts and features accordingly.
1. Sign up and start a new project
Begin by visiting Hostinger Horizons’ official page and choosing a plan that fits your needs. Starting at 0/month, all our plans offer the same web app-building features and one month of free hosting. The difference lies in the monthly message limits, which go up to 1,000 messages.
Please note that Hostinger Horizons is currently in its early access stage, so you may occasionally encounter errors while using it. But don’t worry – there’s a 30-day money-back guarantee, which lets you cancel anytime if you change your mind.
After completing your payment, head to the hPanel dashboard and select Websites → Websites list in the left sidebar. Then, click Add Website and choose Hostinger Horizons.
2. Navigate the tool’s interface
It’s time to get started with Hostinger Horizons.
You’ll see a text field where you can write your prompt in more than 80 languages. After describing your web app, press Enter.
Hostinger Horizons will take a few moments to process your prompt. Once ready, the dashboard will split into two panes:
Left pane – enter additional prompts here to add more features or refine your web app. Underneath the prompt field, you can find the number of message credits left in your plan.
Right pane – shows a real-time preview of your app as you make adjustments. You can interact with the elements to test their functionality.
In the top-right corner of the dashboard, you’ll find the Publish button to launch your web app and make it publicly accessible.
3. Define your web app’s purpose
Hostinger Horizons relies on well-structured prompts to generate the web app you envision. So, the more precise your prompts, the better the results.
When defining your web app’s purpose, include these key details so that Hostinger Horizons understands your idea:
App purpose – clearly state the problem your web app solves, for example, “helping users track fitness progress.”
Core features – list essential functions you want to include, such as user login, forms, dashboards, or reports.
UI preferences – be specific about design elements like layout, color scheme, and overall aesthetics.
Here’s a prompt example for a fitness platform that generates personalized workout and diet plans:
Create a fitness platform that provides personalized workout and diet plans based on user data. The app should let users enter their age, height, weight, activity level, and health conditions. Based on this data, it should generate tailored fitness routines and meal recommendations. Include a user-friendly dashboard with input forms, a progress tracker, and a visually appealing interface with a clean, modern layout and a teal-and-violet color scheme.
Like any other AI tool, Hostinger Horizons’s first output might not be perfect regardless of how detailed your initial prompt was. We can build upon this first iteration of the app by entering follow-up prompts.
4. Customize your project’s design
The next step is customizing the application’s design. In addition to making your app more visually appealing, this process involves adding important elements for navigation and functionality.
Here are some of the important front-end components to include in your application:
Menus – areas like a sidebar, tab, or drop-down menu that contain shortcuts to different pages.
Forms – fields that let users input data, such as an email address or image.
Pages – full-screen windows containing different settings and information.
Buttons – elements that will perform certain actions, like submitting data or navigating to another page.
If you have a wireframe detailing the application’s layout and element placements, you can upload it to Hostinger Horizons as a prompt. This will result in a more accurate output.
Otherwise, use a text-based prompt, like this example:
Create a login page where users can access their account. Here, include a button that redirects users to the sign-up page where they can create a new account if they don’t have one.
Remember to add more details about your application design, such as colors, text size, and font style. For inspiration and guidance, check out our web design tips tutorial.