{"id":124042,"date":"2025-03-04T11:11:04","date_gmt":"2025-03-04T11:11:04","guid":{"rendered":"\/tutorials\/?p=124042"},"modified":"2025-08-26T08:53:09","modified_gmt":"2025-08-26T08:53:09","slug":"create-budget-tracking-web-app","status":"publish","type":"post","link":"\/tutorials\/create-budget-tracking-web-app","title":{"rendered":"How to create a budget-tracking web app without a single line of code"},"content":{"rendered":"<p>Managing finances is challenging these days, especially with so many ways to pay &ndash; from e-wallets and online banking to tap-to-pay. While convenient, they make it easy to lose track of where our money goes.<\/p><p>After trying several budget-tracking apps, none of them worked for me. I needed a simpler way to manage my spending and savings in one place.<\/p><p>So, I built my own budget-tracking app using Hostinger Horizons. Read on to see how I did it despite having little to no coding knowledge.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-use-hostinger-horizons\"><strong>Why use Hostinger Horizons?<\/strong><\/h2><p>While I&rsquo;m familiar with basic web development languages like <strong>HTML<\/strong>, <strong>CSS<\/strong>, or <strong>PHP<\/strong>, a <a href=\"\/tutorials\/web-app-vs-website\">web app is more than just a static website<\/a>.<\/p><p>Building a web app requires advanced frameworks, with which I have no experience at all. I&rsquo;m also not a UI\/UX expert and have never used design tools like Figma to build a complete project.<\/p><p>But, with <strong>Hostinger Horizons<\/strong>, I could build a web app with <a href=\"\/tutorials\/prompting-with-hostinger-horizons\">simple prompts<\/a> without writing any code or web development experience.<\/p><p>All I had to do was describe the web app I wanted to create, and Hostinger Horizons handled the technical aspects, including the code and framework.<\/p><p>Hostinger Horizons offers various plans starting at <strong>$19.99\/month<\/strong> with a 30-day money-back guarantee. The starter plan includes 100 message credits and a month of hosting. So, you can build, publish, and connect a custom domain to your web app all in one place.<\/p><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img 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=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-planning-and-figuring-out-the-basics\"><strong>Planning and figuring out the basics<\/strong><\/h2><p>Before building my web app, I planned everything to keep the process efficient. Here&rsquo;s what I did:<\/p><h3 class=\"wp-block-heading\" id=\"h-outlining-what-i-needed-the-app-to-do\"><strong>Outlining what I needed the app to do<\/strong><\/h3><p>I started by brainstorming the features that could help me better understand my financial activity and avoid overspending:<\/p><ul class=\"wp-block-list\">\n<li><strong>Expense tracking<\/strong> &ndash; I categorized expenses by common types like <strong>bills<\/strong>, <strong>shopping<\/strong>, <strong>transportation<\/strong>, and <strong>entertainment<\/strong>.<\/li>\n\n\n\n<li><strong>Income tracking<\/strong> &ndash; I organized my income based on their sources, such as <strong>salary<\/strong>, <strong>bonuses<\/strong>, and <strong>interests<\/strong>.<\/li>\n\n\n\n<li><strong>Budgeting<\/strong> &ndash; I wanted to set budgets for each expense category to keep my spending in check.<\/li>\n\n\n\n<li><strong>Savings goals<\/strong> &ndash; I wanted a way to see how much I should save to reach my goal and visualize my progress.<\/li>\n\n\n\n<li><strong>Transaction history <\/strong>&ndash; I needed a detailed record of all my transactions, including the date, amount, category, and any notes I added.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-visualizing-the-user-experience\"><strong>Visualizing the user experience<\/strong><\/h3><p>Next, I thought about how to make the app more visually engaging and user-friendly. I also wanted it to be something I enjoy using, so I added some personal touch:<\/p><ul class=\"wp-block-list\">\n<li><strong>Overview dashboard<\/strong> &ndash; I wanted a clean dashboard that gave me a quick overview of my income, expenses, budget progress, and savings goals.<\/li>\n\n\n\n<li><strong>Spending status<\/strong> &ndash; I wanted an indicator of my overall spending to show if I was <strong>on track<\/strong>, <strong>almost over budget<\/strong>, or <strong>over budget<\/strong>.<\/li>\n\n\n\n<li><strong>Progress bars<\/strong> &ndash; To make tracking my budget easier, I added progress bars in different colors for each expense category.<\/li>\n\n\n\n<li><strong>Transaction grouping by date<\/strong> &ndash; My transactions should be grouped by date. I should also be able to add a new transaction from the past and edit entries if needed.<\/li>\n\n\n\n<li><strong>Buttons for easy actions<\/strong> &ndash; To make the app more user-friendly, I wanted to add separate buttons for <strong>income<\/strong>, <strong>expenses<\/strong>, and <strong>savings goals<\/strong>.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-how-i-built-a-personal-budget-tracking-web-app-with-hostinger-horizons\"><strong>How I built a personal budget-tracking web app with Hostinger Horizons<\/strong><\/h2><p>Now, I will walk you through step-by-step how I created my budget-tracking web app using Hostinger Horizons.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-accessing-hostinger-horizons\"><strong>1. Accessing Hostinger Horizons<\/strong><\/h3><p>After purchasing a Hostinger Horizons plan, I went to the <strong>hPanel<\/strong> dashboard and clicked <strong>Websites<\/strong> &rarr; <strong>Websites list<\/strong> in the left sidebar.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61ac8c9\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"255\" height=\"412\" 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\/websites-list-hpanel.png\/public\" alt=\"websites list under websites menu in the left sidebar of hpanel\n\" class=\"wp-image-124065\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/websites-list-hpanel.png\/w=255,fit=scale-down 255w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/websites-list-hpanel.png\/w=186,fit=scale-down 186w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/websites-list-hpanel.png\/w=93,fit=scale-down 93w\" sizes=\"(max-width: 255px) 100vw, 255px\" \/><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><p>I clicked on the <strong>Add website<\/strong> button and then chose <strong>Hostinger Horizons<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1fb61ad1d5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"2244\" height=\"882\" 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\/choosing-hostinger-horizons-hpanel-1.png\/public\" alt=\"a list of platform options under add website button in hpanel\" class=\"wp-image-124866\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=2244,fit=scale-down 2244w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/choosing-hostinger-horizons-hpanel-1.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 2244px) 100vw, 2244px\" \/><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 was presented with a field where I could enter a prompt to describe my web app and its features.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61adabb\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1121\" 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\/horizons-initial-page.png\/public\" alt=\"hostinger horizons initial page with a field to enter a prompt to start building a web application\n\" class=\"wp-image-124068\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-initial-page.png\/w=1121,fit=scale-down 1121w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-initial-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-initial-page.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-initial-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-initial-page.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1121px) 100vw, 1121px\" \/><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><h3 class=\"wp-block-heading\" id=\"h-2-building-the-web-app-s-core-functionality\"><strong>2. Building the web app&rsquo;s core functionality<\/strong><\/h3><p>To help Hostinger Horizons understand my vision clearly, I wrote a prompt telling the tool about my app&rsquo;s purpose, core features, and UI preferences:<\/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=\"\">Create a personal budget-tracking app that allows me to track my income and expenses, set budgets for different categories, and set and track savings goals.<\/pre><p>Starting with a simple prompt instead of a long and complex one would help Hostinger Horizons focus on the main request and build a solid foundation for my app.<\/p><p>Here&rsquo;s the first version of the app the tool came up with after I entered the prompt:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1fb61ae46a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1509\" height=\"785\" 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\/first-version-of-budget-tracking-app-publish.png\/public\" alt=\"the first version of the budget-tracking web app generated by hostinger horizons\" class=\"wp-image-125197\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/first-version-of-budget-tracking-app-publish.png\/w=1509,fit=scale-down 1509w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/first-version-of-budget-tracking-app-publish.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/first-version-of-budget-tracking-app-publish.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/first-version-of-budget-tracking-app-publish.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/first-version-of-budget-tracking-app-publish.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1509px) 100vw, 1509px\" \/><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>It was still a very basic structure, which was expected since I only entered my first prompt. In the next steps, I began refining it one step at a time &ndash; adding more features and customizing the design until I had the best version of my app.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-customizing-the-look-and-feel\"><strong>3. Customizing the look and feel<\/strong><\/h3><p>Next, I refined the overall design to create a clean, modern look with a user-friendly interface.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Pro tip<\/h4>\n                    <p>To get the best results, focus on refining one section or tab at a time. This way, you can have more control over each change and avoid accidentally messing up other parts of your app.<\/p>\n                <\/div>\n\n\n\n<\/p><p>I entered this prompt to enhance the user experience of my web app, adding the dashboard that I needed:<\/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=\"\">Improve the interface to be more user-friendly. The app should have a dashboard that provides an overview of income, expenses, budget progress, and savings goals. It should also show a spending status indicator and progress bars for each budget category.<\/pre><p>I was expecting the tool to generate only the <strong>Dashboard<\/strong> &ndash; but instead, it also created separate tabs for <strong>Transactions<\/strong>, <strong>Budgets<\/strong>, and <strong>Savings<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1fb61aee7c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1497\" height=\"738\" 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\/budget-tracking-app-with-dashboard-publish.png\/public\" alt=\"the first improved look of the budget-tracking web app with four different tabs\" class=\"wp-image-125198\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracking-app-with-dashboard-publish.png\/w=1497,fit=scale-down 1497w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracking-app-with-dashboard-publish.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracking-app-with-dashboard-publish.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracking-app-with-dashboard-publish.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracking-app-with-dashboard-publish.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1497px) 100vw, 1497px\" \/><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><strong>Dashboard<\/strong><\/p><p>I wanted the dashboard to be more informative. I added a dynamic spending status indicator at the top that would change based on my spending patterns.<\/p><p>Below the top cards, I wanted a visual representation of my <strong>Budget overview<\/strong>, and a card for my <strong>Savings goals<\/strong> which would display a list of my goals and my progress for each of them.<\/p><p>Here&rsquo;s the prompt I gave Hostinger Horizons to make this happen:<\/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=\"\">Refine the dashboard to make it more visual and informative. Include cards at the top that display total income, total expenses, current balance, and a dynamic spending status indicator. Below the cards, add a budget overview section with progress bars for each budget category. Include a section that displays a list of savings goals and progress towards each goal.<\/pre><p>Then, I spent some time experimenting with different colors and layouts to perfect my <a href=\"\/tutorials\/web-app-design-tips-with-hostinger-horizons\">web app design<\/a>. I also added more tooltips to make the dashboard more informative. I was satisfied with the results.<\/p><p>Here is the preview after I tried setting a budget for each expense category:<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61af957\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1040\" height=\"575\" 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\/personal-budget-tracker-dashboard.png\/public\" alt=\"the budget tracker dashboard after adding separate cards for budget overview and saving goals\n\" class=\"wp-image-124072\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracker-dashboard.png\/w=1040,fit=scale-down 1040w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracker-dashboard.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracker-dashboard.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracker-dashboard.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracker-dashboard.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><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><p>The dashboard was now more visually engaging, giving a clear overview of my financial status.<\/p><p><strong>Transactions<\/strong><\/p><p>This tab would display a list of my transactions organized by date.<\/p><p>To add a new transaction, I added a button that would open a pop-up window with the following options:<\/p><ul class=\"wp-block-list\">\n<li>Buttons to select the type of transaction: <strong>Income<\/strong>, <strong>Expense<\/strong>, or <strong>Savings<\/strong>.<\/li>\n\n\n\n<li>A dynamic drop-down menu that would display different categories based on the selected transaction type.<\/li>\n\n\n\n<li>A calendar to select the date of the transaction, restricted to today or past dates only.<\/li>\n\n\n\n<li>A field to add any notes or details about the transaction.<\/li>\n<\/ul><p>Here&rsquo;s the prompt I used to add this functionality:<\/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=\"\">Refine the Transaction tab to display a list of transactions organized by date. Include an 'Add Transaction' button that triggers a pop-up with fields for transaction type (Income, Expense, Savings), date (today and past dates only), category (dynamically populated based on transaction type), and a Note field.<\/pre><p>The first result I got from entering that prompt was a transaction history page with a <strong>+ Add<\/strong> button to add transactions. This button opened a pop-up with three transaction categories: <strong>Income<\/strong>, <strong>Expense<\/strong>, and <strong>Savings<\/strong>.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b02d4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"991\" height=\"692\" 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\/transaction-pop-up.png\/public\" alt=\"the first iteration of the transaction pop up after clicking the add transaction button\n\" class=\"wp-image-124073\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transaction-pop-up.png\/w=991,fit=scale-down 991w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transaction-pop-up.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transaction-pop-up.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/transaction-pop-up.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><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><p>As I tried adding transactions with different dates, they were sorted based on the most recent ones.<\/p><p>However, the transaction category drop-downs included too many entries that I didn&rsquo;t need. I wanted to simplify it, so I entered this 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=\"\">Refine the transaction categories to have fewer choices. For Expense, transaction category drop-down should only include \"Bills\", \"Shopping\", \"Transportation\", \"Entertainment\", and \"Others\". For Income, transaction category drop-down should only include \"Salary\", \"Bonuses\", and \"Interest\", For Savings transactions, the category drop-down should only show existing savings goals or be empty if no goals are set. Also, remove the unnecessary 'Description' field from the transaction pop-up.<\/pre><p>I was happy to see that the result was much closer to what I envisioned. Now, the drop-down only showed <strong>Bills<\/strong>, <strong>Shopping<\/strong>, <strong>Transportation<\/strong>, <strong>Entertainment<\/strong>, and <strong>Others<\/strong>. The <strong>Savings <\/strong>button would also be greyed out when no goal was set under the corresponding tab.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b0aa1\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"379\" height=\"487\" 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\/expense-pop-up-add-transaction.png\/public\" alt=\"the transaction pop-up shows a list of expense categories as requested through the prompt\n\" class=\"wp-image-124074\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/expense-pop-up-add-transaction.png\/w=379,fit=scale-down 379w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/expense-pop-up-add-transaction.png\/w=233,fit=scale-down 233w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/expense-pop-up-add-transaction.png\/w=117,fit=scale-down 117w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><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><p><strong>Budgets<\/strong><\/p><p>The <strong>Budgets<\/strong> tab should display cards for every expense category that I have set earlier. Each card would show the category name, the allocated budget amount, and an <strong>Edit<\/strong> button to adjust it.<\/p><p>The prompt I entered was quite simple:<\/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=\"\">Refine the Budgets tab to display cards for each expense category: Bills, Shopping, Transportation, Entertainment, and Others. Color-code the cards based on the existing colors for each expense category. Include an 'Edit' button on each card to adjust the allocated budget amount, with changes reflected on the main dashboard.<\/pre><p>Here&rsquo;s the result I got. Each budget category was shown in its own card and color code, with an edit button to adjust the amount:<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b13c9\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"937\" height=\"422\" 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\/budgets-tab.png\/public\" alt=\"the budgets tab showing five cards of the expense categories with edit button and budget description\n\" class=\"wp-image-124075\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budgets-tab.png\/w=937,fit=scale-down 937w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budgets-tab.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budgets-tab.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budgets-tab.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 937px) 100vw, 937px\" \/><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><p><strong>Savings<\/strong><\/p><p>This tab manages my savings goals and tracks my progress toward achieving them. Here, I could enter my <strong>savings goal<\/strong> and the target <strong>amount<\/strong>, as well as the target <strong>date<\/strong>.<\/p><p>Each entry would have a <strong>Delete<\/strong> button and an <strong>Edit <\/strong>button to modify the goal, amount, or due date.<\/p><p>Here is the prompt I used to add this functionality:<\/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=\"\">Refine the Savings tab to include a '+ Add Saving' button that triggers a pop-up with fields for goal title, amount, and due date. Display each savings goal with its title, amount, and due date. Add functionality to edit or delete each savings goal.<\/pre><p>Next, I wanted to add logic to this tab so that when I add a savings transaction, it deducts the amount from my total income (like an expense) and adds the amount to the chosen savings goal.<\/p><p>When a savings goal is deleted, all transaction history related to that saving goal should also be deleted. The amount would then be returned to the total income.<\/p><p>So, I entered another prompt in Hostinger Horizons to add this logic:<\/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=\"\">Under the Transactions tab, transactions for Savings should be treated as expenses, deducting the amount of my Total Income but adding the transaction amount to the selected saving goal.<\/pre><p>Here&rsquo;s the result of my <strong>Savings<\/strong> tab when I clicked the <strong>+Add Saving<\/strong> button:<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b1f28\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"925\" height=\"615\" 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\/savings-tab.png\/public\" alt=\"the savings goal pop-up that appears after clicking the add savings button, showing the title, amount, and calendar\n\" class=\"wp-image-124076\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-tab.png\/w=925,fit=scale-down 925w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-tab.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-tab.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-tab.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 925px) 100vw, 925px\" \/><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><p>The <strong>Savings Goals <\/strong>would also be synced to the transaction category drop-down if I wanted to start saving for any of my goals.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b27f6\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"373\" height=\"475\" 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\/savings-goal-drop-down.png\/public\" alt=\"the transaction pop-up to add savings with entries synced from the savings tab\n\" class=\"wp-image-124077\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-goal-drop-down.png\/w=373,fit=scale-down 373w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-goal-drop-down.png\/w=236,fit=scale-down 236w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/savings-goal-drop-down.png\/w=118,fit=scale-down 118w\" sizes=\"(max-width: 373px) 100vw, 373px\" \/><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><h2 class=\"wp-block-heading\" id=\"h-testing-and-deploying-the-web-app\"><strong>Testing and deploying the web app<\/strong><\/h2><p>It was time to test everything out and troubleshoot any errors that might appear.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-troubleshooting-errors-and-first-iteration\"><strong>1. Troubleshooting errors and first iteration<\/strong><\/h3><p>I encountered a few errors as I built my web app. For example, the progress bars on the dashboard didn&rsquo;t display correctly, and the savings goals didn&rsquo;t update as expected.<\/p><p>Thankfully, Hostinger Horizons has built-in mechanisms for fixing issues. I could simply inform the tool of the error through the chat or use the <strong>Ask to fix<\/strong> button to automatically diagnose and fix it.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b339e\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"716\" height=\"362\" 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\/horizons-ask-to-fix.png\/public\" alt=\"runtime error on hostinger horizons when trying to test the web app\n\" class=\"wp-image-124078\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-ask-to-fix.png\/w=716,fit=scale-down 716w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-ask-to-fix.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-ask-to-fix.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 716px) 100vw, 716px\" \/><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><p>The <strong>Revert to this message<\/strong> button also let me roll back to a previous version of my app if an error significantly altered the layout or functionality.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b3d6b\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"676\" height=\"173\" 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\/revert-to-this-message-button.png\/public\" alt=\"the revert to this message button on hostinger horizons to roll back the app to the previous working version\n\" class=\"wp-image-124079\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/revert-to-this-message-button.png\/w=676,fit=scale-down 676w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/revert-to-this-message-button.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/revert-to-this-message-button.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><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><p>After troubleshooting and testing all the features, I was finally satisfied with my web app. Everything worked as expected, and the app functioned exactly as I wanted it to.<\/p><p>Here&rsquo;s how my app looked like after I tried all the functionality, including adding budgets, income, and savings goals:<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b464e\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1090\" height=\"672\" 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\/personal-budget-tracking-web-app-final-result-1.png\/public\" alt=\"the final result of the budget-tracking web app built with hostinger horizons\n\" class=\"wp-image-124080\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracking-web-app-final-result-1.png\/w=1090,fit=scale-down 1090w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracking-web-app-final-result-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracking-web-app-final-result-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracking-web-app-final-result-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/personal-budget-tracking-web-app-final-result-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1090px) 100vw, 1090px\" \/><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><h3 class=\"wp-block-heading\" id=\"h-2-adding-a-login-page\"><strong>2. Adding a login page<\/strong><\/h3><p>Since my app is a personal budget tracker, I needed a login page to prevent unauthorized access to my financial data.<\/p><p>The page should require a password to access the budget-tracking dashboard. To change the password, there should be a button that triggers a pop-up window. This pop-up would require a PIN known only to me to verify the password change.<\/p><p>To add a login page, I entered this prompt to Hostinger Horizons:<\/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=\"\">Create a landing page for my app with password protection. The page should have a field to enter a password and a button to change the password. Clicking the button should open a pop-up window that requires a PIN to verify the password change. Set the password to [password] and the PIN to [PIN].<\/pre><p>I continued to refine it with additional features, such as adding a logout button, adding an image to the login page, fine-tuning the verification process to improve security, and ensuring that the password-changing logic was secure enough.<\/p><figure data-wp-context='{\"imageId\":\"69e1fb61b503e\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"892\" height=\"495\" 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\/budget-tracker-landing-page-with-login.png\/public\" alt=\"the login page to enter the app\n\" class=\"wp-image-124081\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracker-landing-page-with-login.png\/w=892,fit=scale-down 892w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracker-landing-page-with-login.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracker-landing-page-with-login.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/budget-tracker-landing-page-with-login.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 892px) 100vw, 892px\" \/><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><h3 class=\"wp-block-heading\" id=\"h-3-deploying-the-app\"><strong>3. Deploying the app<\/strong><\/h3><p>Finally, it was time to launch my web app. I clicked the <strong>Publish<\/strong> button at the top right, and within moments, my app was live.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1fb61b5b22\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"570\" height=\"94\" 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\/horizons-publish-button-w-feedback-user-guides-1.png\/public\" alt=\"Hostinger Horizons Publish button detail\" class=\"wp-image-125200\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-publish-button-w-feedback-user-guides-1.png\/w=570,fit=scale-down 570w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-publish-button-w-feedback-user-guides-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-publish-button-w-feedback-user-guides-1.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><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 can update and modify my web app anytime, even after deployment. This means it can adapt to my needs over time. All I need to do is describe the changes I want to make to Hostinger Horizons.<\/p><p>Check out the budget-tracking web app I built <a href=\"https:\/\/deepskyblue-pony-390499.hostingersite.com\/\" target=\"_blank\" rel=\"noopener\">here<\/a> by entering the password:<\/p><p><strong>abc_123<\/strong><\/p><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img 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=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Building a personal budget-tracking web app with Hostinger Horizons was a great experience. I created a tool that fits my needs perfectly and makes managing my finances easier.<\/p><p>What surprised me most was how straightforward the process was. Even with minimal coding knowledge, I could turn my idea into a fully functional, clean-looking app.<\/p><p>Hostinger Horizons makes web app development accessible to anyone, no matter their technical background. It allowed me to focus on improving functionality rather than getting stuck on the technical side of things.<\/p><p>So, if you&rsquo;ve ever wanted to build your own budget-tracking app but felt intimidated by coding, Hostinger Horizons is the tool for you. Go ahead and build your first web app today!<\/p><p>Join our <a href=\"https:\/\/discord.com\/invite\/8p8nBUHrZk\" target=\"_blank\" rel=\"noopener\">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>Managing finances is challenging these days, especially with so many ways to pay &ndash; from e-wallets and online banking to [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/tutorials\/create-budget-tracking-web-app\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":124252,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to build a budget-tracking web app without coding","rank_math_description":"Learn how I built a budget-tracking web app without coding using Hostinger Horizons in this easy guide with tips and sample prompts.","rank_math_focus_keyword":"how to create a budget tracking web app","footnotes":""},"categories":[22651,22652],"tags":[],"class_list":["post-124042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-app","category-web-application-blueprints"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-budget-tracking-web-app","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-budget-tracking-web-app","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/124042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/comments?post=124042"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/124042\/revisions"}],"predecessor-version":[{"id":131175,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/124042\/revisions\/131175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media\/124252"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media?parent=124042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/categories?post=124042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/tags?post=124042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}