{"id":124211,"date":"2025-03-04T11:42:12","date_gmt":"2025-03-04T11:42:12","guid":{"rendered":"\/tutorials\/?p=124211"},"modified":"2026-03-09T19:16:47","modified_gmt":"2026-03-09T19:16:47","slug":"create-travel-organizer-web-app","status":"publish","type":"post","link":"\/ng\/tutorials\/create-travel-organizer-web-app","title":{"rendered":"How to create a travel organizer web app"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>I love visiting new places and trying local food, but planning my trips is often a headache.<\/p><p>I save my trip details in different notes, emails, or even chat windows. It can be a mess trying to keep everything in one place, so I thought, why not build something to make it easier?<\/p><p>In this article, I&rsquo;ll walk you through how I built my own travel planner web app with Hostinger Horizons. The best part is you don&rsquo;t need to know how to code. Let&rsquo;s go!<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-i-decided-to-build-a-travel-planner-web-app\"><strong>Why I decided to build a travel planner web app<\/strong><\/h2><p>It all started with the need to organize my trips. I wanted somewhere to save all my upcoming trip details and itinerary in one place.<\/p><p>Here are the key features I imagined:<\/p><p>&#9989; Trip itinerary planner.<\/p><p>&#9989; Budget and expense tracker.<\/p><p>&#9989; Packing and to-do list checklist with reminders.<\/p><p>&#9989; Mobile-friendly interface.<\/p><p>With Hostinger Horizons, I knew it could bring my travel planner idea to life.<\/p><p>If this is your first time hearing about Hostinger Horizons, it&rsquo;s a tool for creating <a href=\"\/ng\/tutorials\/custom-web-applications\">custom web apps<\/a> through prompting. No coding skills required &ndash; just big ideas.<\/p><p>Even better, the tool provides everything you need to quickly publish your web app. It includes hosting, easy domain connection, and free email. Plus, it&rsquo;s risk-free with a<strong> 30-day money-back guarantee<\/strong>.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/ng\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/public\" alt=\"\" class=\"wp-image-129223\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-the-blueprint-of-my-travel-planner-web-app\"><strong>The blueprint of my travel planner web app<\/strong><\/h2><p>Setting a clear goal is one of the <a href=\"\/ng\/tutorials\/avoid-common-mistakes-with-hostinger-horizons\">best practices when using Hostinger Horizons<\/a>.<\/p><p>To help me <a href=\"\/ng\/tutorials\/prompting-with-hostinger-horizons\">write prompts effectively<\/a>, I created a blueprint for my web app. As this is a personal project, I kept it simple by listing the four pages I want and their contents:<\/p><p>&#9989; <strong>Dashboard<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Clean user interface with a welcome message.<\/li>\n\n\n\n<li>&ldquo;Add new trip&rdquo; button.<\/li>\n\n\n\n<li>A preview widget of my saved trips.<\/li>\n\n\n\n<li>Upcoming trip reminder.<\/li>\n\n\n\n<li>Reminders<strong> <\/strong>widget.<\/li>\n<\/ul><p>&#9989; <strong>Itinerary<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Left sidebar: List of trips and days.<\/li>\n\n\n\n<li>Main section:\n<ul class=\"wp-block-list\">\n<li>Drag-and-drop itinerary timeline according to the hours of the day.<\/li>\n\n\n\n<li>An edit button to add or manage activities.<\/li>\n<\/ul>\n<\/li>\n<\/ul><p>&#9989; <strong>Bookings<\/strong><\/p><p>Create separate tabs:<\/p><ul class=\"wp-block-list\">\n<li><strong>Transport<\/strong> &ndash; show the flight or train schedules.<\/li>\n\n\n\n<li><strong>Hotels<\/strong> &ndash; hotel name, check-in, and check-out time.<\/li>\n\n\n\n<li><strong>Activities<\/strong> &ndash; list of booked activities, timetable, ticket files.<\/li>\n\n\n\n<li><strong>Expenses<\/strong> &ndash; input the total budget of the trip. It&rsquo;ll be reduced gradually with every expense I add. The progress bar and total amount will also show up.<\/li>\n<\/ul><p>&#9989; <strong>Checklist<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Editable packing items list with checkboxes.<\/li>\n\n\n\n<li>Editable to-do list with checkboxes.<\/li>\n<\/ul><p>I didn&rsquo;t have any interface design preferences, so I let the tool surprise me. If you have a specific design in mind, it&rsquo;s best to have a wireframe that you can recreate.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Pro tip<\/h4>\n                    <p> Check out our <a href=\"\/ng\/tutorials\/web-app-design-tips-with-hostinger-horizons\">web app design tips<\/a> to create a next-level user interface.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-i-built-my-travel-planner-web-app-with-hostinger-horizons\"><strong>How I built my <\/strong><strong>travel planner<\/strong><strong> web app with Hostinger Horizons<\/strong><\/h2><p>The first step was to access Hostinger Horizons.<\/p><p>If you have an active Hostinger hosting plan, Hostinger Horizons is accessible for free with a daily limit of five messages. To unlock more messages, <a href=\"\/ng\/horizons\">Hostinger Horizons<\/a> plans start at <strong>\u20a630900.00\/month<\/strong>.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Pro tip<\/h4>\n                    <p> Read our guide on <a href=\"\/ng\/tutorials\/hostinger-horizons-getting-started\">getting started with Hostinger Horizons<\/a> to learn how to set it up and its features.<\/p>\n                <\/div>\n\n\n\n<\/p><p>Since I already had an active hosting plan, I simply logged in to <strong>hPanel<\/strong> and went to <strong>Websites<\/strong> &rarr; <strong>Websites list<\/strong> &rarr; <strong>Add website <\/strong>&rarr; <strong>Hostinger Horizons<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974e2475\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"634\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/public\" alt=\"The Hostinger Horizons option is highlighted on hPanel\" class=\"wp-image-124213\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-option-highlighted-on-hpanel.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Once I got to the Hostinger Horizons page, I entered my first prompt:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">I want to create a travel organizer app with four main pages: Dashboard, Itinerary, Bookings, and Checklist. For now, please create the basic pages and I'll refine each page one by one. I want the user interface to have a clean design with a touch of blue sky color.<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974e3d2c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1038\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/public\" alt=\"Hostinger Horizons' initial page with a prompt example\" class=\"wp-image-124214\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-horizons-initial-page-with-a-prompt-example.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>After a few moments, the web app preview appeared on the right pane of the screen. On the left side, I can interact with the AI chatbot to refine the web app.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974e5378\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1017\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/public\" alt=\"A travel custom web app dashboard first iterated with Hostinger Horizons\" class=\"wp-image-125209\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-generated-with-hostinger-horizons-publish.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-designing-the-dashboard\"><strong>Designing the Dashboard<\/strong><\/h3><p>The first version of my web app was very plain, but it was expected, given the lack of details I added to the prompt.<\/p><p>Remember my web app blueprint? For my second prompt, I included my requirements for the <strong>Dashboard<\/strong>. Then, I gave follow-up instructions to refine it.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974e6b23\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1988\" height=\"916\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/public\" alt=\"A travel custom web app's second iteration with Hostinger Horizons\" class=\"wp-image-125213\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/w=1988,fit=scale-down 1988w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-web-app-second-iteration-with-hostinger-horizons-2.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1988px) 100vw, 1988px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Still, I wasn&rsquo;t fully satisfied with the navigation bar. So, I asked the tool to change it by adding a reference image in my prompt. I did this by dragging and dropping the image into the prompt box and entering another prompt.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974e82a8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"998\" height=\"448\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/example-prompt-with-an-image.png\/public\" alt=\"An AI prompt example with a reference image\" class=\"wp-image-124217\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/example-prompt-with-an-image.png\/w=998,fit=scale-down 998w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/example-prompt-with-an-image.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/example-prompt-with-an-image.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/example-prompt-with-an-image.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Next, I checked my web app&rsquo;s mobile version by clicking the change preview display icon.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974e9a05\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1009\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/public\" alt=\"The mobile view button on Hostinger Horizons preview is highlighted\" class=\"wp-image-125210\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/mobile-icon-on-hostinger-horizons-preview-highlighted-publish.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>The main action button and navigation menu didn&rsquo;t fit on the screen, so I asked the tool to fix it for me.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974eb08e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1988\" height=\"920\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/public\" alt=\"A mobile version of a travel custom web app's dashboard interface\" class=\"wp-image-125214\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/w=1988,fit=scale-down 1988w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-dashboard-mobile-version-2.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1988px) 100vw, 1988px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-designing-the-itinerary-page\"><strong>Designing the Itinerary page<\/strong><\/h3><p>Like in the previous step, I copied and pasted the <strong>Itinerary<\/strong> page features into the prompt. But I wanted it to be more intuitive, so I tweaked the prompt to make my request clearer:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">I want to have a drop-down menu to select saved trips. Once a trip is selected, users will see the list of trip days in the left sidebar. The main area will show the hours of the day with a drag-and-drop functionality to arrange activities. Please use dummy data so I can visualize it better, too.<\/pre><p>I got better results this time around, but I couldn&rsquo;t input or edit activities. The AI chatbot asked if I wanted to add this feature in its response.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974ec865\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1995\" height=\"914\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/public\" alt=\"A travel custom web app's Itinerary page interface\" class=\"wp-image-125215\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/w=1995,fit=scale-down 1995w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-itinerary-page-interface-2.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1995px) 100vw, 1995px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>I followed the suggestion while also iterating my preferred layout.<\/p><h3 class=\"wp-block-heading\" id=\"h-designing-the-bookings-page\"><strong>Designing the Bookings page<\/strong><\/h3><p>With <strong>Itinerary<\/strong> done, I moved on to the <strong>Bookings <\/strong>page. Just like the other two, I copied and pasted my requirements for this page into the prompt box.<\/p><p>This time, I got the interface design I imagined, but the action buttons were yet to work.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974edd81\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1996\" height=\"913\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/public\" alt=\"A custom web app's transport booking tab interface\" class=\"wp-image-125216\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/w=1996,fit=scale-down 1996w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transport-booking-tab-interface-2.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1996px) 100vw, 1996px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>So, I asked the tool to make the buttons function as I wanted them to. This was the prompt I used for fixing the <strong>Add Transport<\/strong> button:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">For the Add Transport button, I want options for train, bus, and flight with relevant details like schedule, ticket number, etc. Also, please add a field to upload the ticket file.<\/pre><p>Next, I asked the AI to add a progress bar to the <strong>Expenses<\/strong> tab so I could easily see how much of the budget was left for the trip.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974ef1d4\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1992\" height=\"902\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/public\" alt=\"A travel custom web app's Expenses page interface\" class=\"wp-image-125217\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/w=1992,fit=scale-down 1992w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/travel-custom-web-app-expenses-interface-2.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1992px) 100vw, 1992px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><div class=\"protip\">\n                    <h4 class=\"title\">Pro tip<\/h4>\n                    <p>If you want to integrate third-party apps (like Google Maps, Weather, or OpenAI), you can ask the tool to connect with the APIs. However, you'll need to generate the required API key yourself. How to do this will depend on each app, so check its documentation.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-designing-the-checklist-page\"><strong>Designing the Checklist page<\/strong><\/h3><p>The last page on the app is <strong>Checklist<\/strong>. I decided to be more specific with my description this time:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">On the Checklist page, I want two tables: Packing and To-Do. Each will have a pencil icon for adding and editing items, along with checkboxes to mark completed activities. Additionally, every checklist item should have edit and delete functionality.<\/pre><p>I got exactly what I was hoping for on the first try:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974f097e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1992\" height=\"918\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/public\" alt=\"A travel custom web app's Checklist page interface\" class=\"wp-image-125218\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/w=1992,fit=scale-down 1992w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/checklist-page-custom-web-app-example-2.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1992px) 100vw, 1992px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-publishing-and-testing\"><strong>Publishing and testing<\/strong><\/h2><p>Finally, I <a href=\"\/ng\/tutorials\/web-app-testing\">tested my web app<\/a> by adding some mock data. I also had a friend try it out and share their feedback.<\/p><p>I ended up doing a few more tweaks, like adding confirmation pop-ups to let the user know their data was saved and refining things to work better on mobile.<\/p><p>After making the final changes, I hit the <strong>Publish<\/strong> button. And just like that, my web app was live with a temporary domain name.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974f201d\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1014\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/public\" alt=\"A travel custom web app's dashboard interface in the final iteration with Hostinger Horizons\" class=\"wp-image-125212\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/custom-web-app-dashboard-final-iteration-with-hostinger-horizons-publish.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>I decided to connect a custom domain name to make my web app more easily accessible. From <strong>hPanel<\/strong>, I went to <strong>Websites<\/strong> &rarr; <strong>Websites list<\/strong> and clicked<strong> Change domain<\/strong> under my web app.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b974f35dc\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1754\" height=\"306\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/public\" alt=\"The Change domain button is highlighted on hPanel\" class=\"wp-image-124225\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/w=1754,fit=scale-down 1754w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/change-domain-button-highlighted-on-hpanel.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1754px) 100vw, 1754px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>I entered the domain name I wanted to connect and clicked <strong>Next<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e2b9750078a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1014\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/public\" alt=\"Hostinger's custom domain name selection page\" class=\"wp-image-124226\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/hostinger-domain-name-selection-page.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>After finishing the rest of the steps, I got a pop-up saying my domain was successfully registered. As with websites, it can take up to 24 hours for the domain to fully propagate.<\/p><h3 class=\"wp-block-heading\" id=\"h-what-s-next\"><strong>What&rsquo;s next?<\/strong><\/h3><p>This was my first time building a web app from scratch, and it was a fun experience. Hostinger Horizons made the process very easy for someone who doesn&rsquo;t know how to code like me.<\/p><p>That said, I realized my prompts could have been clearer, as I had to repeat my requests a few times before getting exactly what I wanted. Learning about<a href=\"\/ng\/tutorials\/ai-prompt-engineering\"> AI prompt engineering<\/a> should be super helpful if you want to get the best results with this tool.<\/p><p>All in all, I&rsquo;m happy with the features I was able to implement in my app, and I&rsquo;m planning to improve them. Who knows? Maybe someday I can monetize it and build success online with it. You can do the same.<\/p><p>Join our <a href=\"https:\/\/discord.com\/invite\/8p8nBUHrZk\">Discord channel<\/a> for more tips and inspiration on making the most of Hostinger Horizons. Connect with the community, get expert advice, and stay updated on the latest features!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I love visiting new places and trying local food, but planning my trips is often a headache. I save my trip details in different notes, emails, or even chat windows. It can be a mess trying to keep everything in one place, so I thought, why not build something to make it easier? In this [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/create-travel-organizer-web-app\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":257,"featured_media":143428,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to build a travel planner web app with Hostinger Horizons","rank_math_description":"With Hostinger Horizons, you can build a travel planning web app without coding. This article shows you how.","rank_math_focus_keyword":"how to create a travel organizer web app","footnotes":""},"categories":[22652],"tags":[],"class_list":["post-124211","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-application-blueprints"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-travel-organizer-web-app","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-travel-organizer-web-app","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/124211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/257"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=124211"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/124211\/revisions"}],"predecessor-version":[{"id":143427,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/124211\/revisions\/143427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media\/143428"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=124211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=124211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=124211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}