{"id":124010,"date":"2025-03-04T11:17:31","date_gmt":"2025-03-04T11:17:31","guid":{"rendered":"\/tutorials\/?p=124010"},"modified":"2026-03-10T10:04:30","modified_gmt":"2026-03-10T10:04:30","slug":"create-time-tracking-web-app","status":"publish","type":"post","link":"\/my\/tutorials\/create-time-tracking-web-app","title":{"rendered":"How to create a time-tracking web app"},"content":{"rendered":"<p>Tracking time efficiently is essential for freelancers, teams, and businesses looking to improve productivity. A time-tracking web app allows users to log their work hours, track ongoing projects, and generate reports &ndash;ideally from a simple and accessible interface.<\/p><p>Traditionally, building such an app would require coding knowledge, database setup, and UI design. However, with Hostinger Horizons, an AI-powered web app builder, you can create a fully functional custom time tracker without writing a single line of code.<\/p><p>In this guide, I&rsquo;ll show you how I built a time-tracking web app using Hostinger Horizons, from planning and design to publishing and testing.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-time-tracker-web-app-p-lanning-and-design\"><strong>Time tracker web app p<\/strong><strong>lanning and design<\/strong><\/h2><p>As a freelancer, keeping track of billable hours was always a hassle. Most third-party tools felt too complex or came with features I didn&rsquo;t need.<\/p><p>I wanted something simple &ndash; just a way to log my time, organize tasks by project, and generate quick reports to see where my hours were going.<\/p><p>So, instead of settling for another bulky app, I built my own, following some <a href=\"\/my\/tutorials\/web-app-design-tips-with-hostinger-horizons\">best practices for web app design<\/a>. Here&rsquo;s what I knew my time tracker needed:<\/p><p>&#9989; Start\/stop timers to track time spent on different tasks<\/p><p>&#9989; Manual time entries for users who forget to start the timer<\/p><p>&#9989; Project categories to organize tasks efficiently<\/p><p>&#9989; Basic reporting to review logged hours<\/p><p>&#9989; User authentication to keep entries private<\/p><p>Since I wanted a quick and easy way to develop my app, I decided to use <a href=\"\/my\/horizons\/web-application-development\">Hostinger Horizons<\/a>. Here&rsquo;s why:<\/p><ul class=\"wp-block-list\">\n<li><strong>No coding required<\/strong>. Just describe the app you want, and the AI will generate it.<\/li>\n\n\n\n<li><strong>Instant updates<\/strong>. You can tweak features, improve UI, and fix bugs directly in the chat.<\/li>\n\n\n\n<li><strong>One-click deployment<\/strong>. Once you&rsquo;re happy with your app, you can publish it instantly.<\/li>\n<\/ul><p>Getting started is easy, too: Hostinger Horizons comes with a free plan (5 messages\/day) for all hosting users, and paid plans start at <strong>RM86.99\/month<\/strong> for more flexibility.<\/p><p>If you&rsquo;re new, check out our guide on <a href=\"\/my\/tutorials\/hostinger-horizons-getting-started\">getting started with Hostinger Horizons<\/a> to explore features and setup options.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/my\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/EN_Horizons_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-124045\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-1024x300.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-1536x450.png 1536w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-i-created-a-time-tracker-web-app-with-hostinger-horizons\"><strong>How I created a time tracker web app with Hostinger Horizons<\/strong><\/h2><p>With my plan purchased, it was time to bring my time-tracking web app to life.<\/p><p>Using Hostinger Horizons, I could build and refine my app in real-time, making adjustments as needed &ndash;\n without writing a single line of code. Here&rsquo;s how I did it.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-1-setting-up-the-project\"><strong>Step 1: Setting up the project<\/strong><\/h3><figure data-wp-context='{\"imageId\":\"69e0419d6449a\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"550\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Hostinger-Horizons-start-screen-1024x550.png\" alt=\"Hostinger Horizons start screen\n\" class=\"wp-image-124028\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Hostinger-Horizons-start-screen-1024x550.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Hostinger-Horizons-start-screen-300x161.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Hostinger-Horizons-start-screen-150x81.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Hostinger-Horizons-start-screen-768x413.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Hostinger-Horizons-start-screen-1536x825.png 1536w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Hostinger-Horizons-start-screen.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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>To start, I went to <strong>hPanel &rarr; Websites &rarr; Websites List &rarr; Add Website &rarr; Hostinger Horizons<\/strong>. This opened the project&rsquo;s start screen, where I described my app idea.<\/p><p><strong>Prompt example:<\/strong><\/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 simple time-tracking web app where users can start and stop timers, manually log time entries, and generate reports. The app should have a login system and allow users to organize time logs by project.<\/pre><p>The tool instantly generated a basic interface with start\/stop buttons, and a time log for recent entries:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e0419d6505a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-editing-interface-with-preview-of-the-final-app-publish-1024x552.png\" alt=\"Hostinger Horizons interface with app displayed and publish button\" class=\"wp-image-125179\"><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-step-2-refining-the-app-logic\"><strong>Step 2: Refining the app logic<\/strong><\/h3><p>The initial version worked, but I wanted to enhance its functionality and user experience before publishing it. I also wanted to make sure to avoid <a href=\"\/my\/tutorials\/avoid-common-mistakes-with-hostinger-horizons\">common mistakes<\/a> first-time web app builders make.<\/p><p>Key improvements I made included:<\/p><p>&#9989; <strong>Added project categories<\/strong>. Users can now assign tasks to specific projects.<\/p><p>&#9989; <strong>Improved timer accuracy<\/strong>. Ensured that tracking continues even if the page is refreshed.<\/p><p>&#9989; <strong>Better UI design<\/strong>. Adjusted button placement and text fields for a cleaner look.<\/p><p>&#9989; <strong>Implemented user authentication<\/strong>. Enabled login functionality so each user could have their own time logs.<br>&#9989; <strong>Optimized reporting<\/strong>. Added a summary feature to track the total hours worked per day and week.<\/p><p>With these refinements, my app was now fully functional for tracking time, managing multiple users, and generating reports.<\/p><p><strong>Prompt example:<\/strong><\/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 UI by making the start\/stop button larger and adding a dropdown to select project categories.<\/pre><p>This is what the AI came up with:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d66be3\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"548\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/First-version-of-my-time-tracking-app-1024x548.png\" alt=\"First version of my time tracking app\n\" class=\"wp-image-124030\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/First-version-of-my-time-tracking-app-1024x548.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/First-version-of-my-time-tracking-app-300x160.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/First-version-of-my-time-tracking-app-150x80.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/First-version-of-my-time-tracking-app-768x411.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/First-version-of-my-time-tracking-app-1536x821.png 1536w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/First-version-of-my-time-tracking-app.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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>Next, I wanted to add the user login functionality and enhance the reporting further.<\/p><p>I asked the tool to add login functionality, and in a few moments, it became possible for users to sign up for an account:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d68d2d\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"838\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Time-tracker-app-login-page-1024x838.png\" alt=\"Time tracker app login page\n\" class=\"wp-image-124032\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Time-tracker-app-login-page-1024x838.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Time-tracker-app-login-page-300x245.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Time-tracker-app-login-page-150x123.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Time-tracker-app-login-page-768x628.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Time-tracker-app-login-page.png 1208w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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>Hostinger Horizons is great at suggesting other things that I might find useful to add to my app next:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d6a6b4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1010\" height=\"390\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Closeup-of-Horizons-suggesting-what-to-add-next-to-my-app.png\" alt=\"Closeup of Horizons suggesting what to add next to my app\n\" class=\"wp-image-124033\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Closeup-of-Horizons-suggesting-what-to-add-next-to-my-app.png 1010w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Closeup-of-Horizons-suggesting-what-to-add-next-to-my-app-300x116.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Closeup-of-Horizons-suggesting-what-to-add-next-to-my-app-150x58.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Closeup-of-Horizons-suggesting-what-to-add-next-to-my-app-768x297.png 768w\" sizes=\"(max-width: 1010px) 100vw, 1010px\" \/><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>In my prompt, I told it to add all of these, so I could work on getting the reporting features up and running.<\/p><p>Now, my app was fully functional for tracking how much time was spent on different tasks. I could also invite other team members and create reports to get a better idea of how we were spending our time:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d6c038\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"730\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Refined-time-tracking-app-homepage-1024x730.png\" alt=\"Refined time tracking app homepage\n\" class=\"wp-image-124034\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Refined-time-tracking-app-homepage-1024x730.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Refined-time-tracking-app-homepage-300x214.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Refined-time-tracking-app-homepage-150x107.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Refined-time-tracking-app-homepage-768x547.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Refined-time-tracking-app-homepage-1536x1095.png 1536w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Refined-time-tracking-app-homepage.png 1740w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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-step-3-testing-and-debugging\"><strong>Step 3: Testing and debugging<\/strong><\/h3><p>Once my app was functional, I followed key <a href=\"\/my\/tutorials\/web-app-testing\">web app testing<\/a> steps to make sure everything worked properly.<\/p><p>I tested different scenarios, such as:<\/p><ul class=\"wp-block-list\">\n<li>Starting\/stopping timers across multiple sessions.<\/li>\n\n\n\n<li>Manually logging time entries.<\/li>\n\n\n\n<li>Checking if time logs were saved correctly.<\/li>\n<\/ul><p>When I found a small bug in the manual entry logging, I asked the tool to fix it.<\/p><p><strong>Troubleshooting prompt example:<\/strong><\/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=\"\">Manual entry doesn't work,can you fix it?<\/pre><p>The AI analyzed the problem and provided a fix instantly:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d6d9fd\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"602\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-response-to-a-troubleshooting-prompt-1024x602.png\" alt=\"Horizons response to a troubleshooting prompt\n\" class=\"wp-image-124035\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Horizons-response-to-a-troubleshooting-prompt-1024x602.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Horizons-response-to-a-troubleshooting-prompt-300x176.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Horizons-response-to-a-troubleshooting-prompt-150x88.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Horizons-response-to-a-troubleshooting-prompt-768x452.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Horizons-response-to-a-troubleshooting-prompt.png 1102w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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>And after the AI had finished working, I was able to manually add entries in a pop-up:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d6f48c\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"577\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Manual-time-entry-popup-1024x577.png\" alt=\"Manual time entry popup\n\" class=\"wp-image-124036\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Manual-time-entry-popup-1024x577.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Manual-time-entry-popup-300x169.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Manual-time-entry-popup-150x85.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Manual-time-entry-popup-768x433.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Manual-time-entry-popup.png 1182w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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>Once, the preview stopped working, but the tool was clever enough to suggest how to fix it:<\/p><figure data-wp-context='{\"imageId\":\"69e0419d70f6f\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"516\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Preview-error-code-in-Horizons-1024x516.png\" alt=\"Preview error code in Horizons\n\" class=\"wp-image-124037\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Preview-error-code-in-Horizons-1024x516.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Preview-error-code-in-Horizons-300x151.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Preview-error-code-in-Horizons-150x76.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Preview-error-code-in-Horizons-768x387.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/Preview-error-code-in-Horizons.png 1112w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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-time-tracker-web-app-publishing-and-testing\"><strong>Time tracker web app publishing and testing<\/strong><\/h2><p>After refining my app, I published it with one click from the editing interface. It could now be accessed by others online:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e0419d7195b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/horizons-published-with-url-1024x324.png\" alt=\"Horizons interface with successfully published app notification\" class=\"wp-image-125146\"><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>To give my app a custom domain, I simply connected it to one &ndash; directly through Hostinger Horizons. You can also do this through <strong>hPanel &rarr; Websites List<\/strong> for full control.<\/p><p>If you want to <a href=\"https:\/\/blanchedalmond-capybara-222030.hostingersite.com\/\" target=\"_blank\" rel=\"noopener\">try my tracker<\/a>, feel free to create an account and take it for a spin.<\/p><p>Testing it in real-world scenarios helped me identify further improvements, and thanks to Hostinger Horizons&rsquo; instant updates, I could tweak features on the fly.<\/p><p>For example, after using the tracker for a few days, I realized I needed a summary report feature. Instead of starting from scratch, I simply asked:<\/p><p><strong>Prompt example:<\/strong><\/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=\"\">Add a daily and weekly summary of total tracked hours.<\/pre><p>Within seconds, the AI updated my app with a dashboard showing total hours per day and week.<\/p><h3 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h3><p>Building a time-tracking web app from scratch would normally take weeks of coding &ndash; but with Hostinger Horizons, I had a working version within minutes.<\/p><p>Now, I use this app daily to track my work, and I can easily update it anytime I need new features.<\/p><p>If you&rsquo;re looking for a custom time-tracking solution, give Hostinger Horizons a try and build your own in minutes. It&rsquo;s risk-free, too &ndash; if you&rsquo;re not happy with the result, we offer a 30-day money-back guarantee.<\/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><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/my\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/EN_Horizons_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-124045\" srcset=\"https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-1024x300.png 1024w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner-1536x450.png 1536w, https:\/\/www.hostinger.com\/my\/tutorials\/wp-content\/uploads\/sites\/45\/2025\/03\/EN_Horizons_in-text-banner.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tracking time efficiently is essential for freelancers, teams, and businesses looking to improve productivity. A time-tracking web app allows users to log their work hours, track ongoing projects, and generate reports &ndash;ideally from a simple and accessible interface. Traditionally, building such an app would require coding knowledge, database setup, and UI design. However, with Hostinger [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/my\/tutorials\/create-time-tracking-web-app\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":357,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to create a time-tracking web app with Hostinger Horizons","rank_math_description":"Build a custom time-tracking web app without coding. Learn how to use Hostinger Horizons to create, refine, and publish your app in minutes.","rank_math_focus_keyword":"how to create a time tracking web app","footnotes":""},"categories":[22647],"tags":[],"class_list":["post-124010","post","type-post","status-publish","format-standard","hentry","category-web-application-blueprints"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-time-tracking-web-app","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-time-tracking-web-app","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/124010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/users\/357"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/comments?post=124010"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/124010\/revisions"}],"predecessor-version":[{"id":127577,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/posts\/124010\/revisions\/127577"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/media?parent=124010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/categories?post=124010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/my\/tutorials\/wp-json\/wp\/v2\/tags?post=124010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}