{"id":126146,"date":"2025-03-27T16:52:29","date_gmt":"2025-03-27T16:52:29","guid":{"rendered":"\/tutorials\/?p=126146"},"modified":"2026-03-10T09:26:42","modified_gmt":"2026-03-10T09:26:42","slug":"create-community-web-app","status":"publish","type":"post","link":"\/ca\/tutorials\/create-community-web-app","title":{"rendered":"How to create a community web app"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Community web apps, like Reddit and Discord, bring people together around shared interests or activities. They create spaces for users to discuss ideas, share content, and support each other.<\/p><p>Sure, there are already plenty of platforms out there, and some are quite popular. But if you create your own community web application, you can tailor the features and design to fit your preferences like a glove.<\/p><p>It also lets you build something that meets your community&rsquo;s needs and strengthens users&rsquo; sense of belonging.<\/p><p>It might sound daunting to build one from scratch, especially with all the programming code involved, but it doesn&rsquo;t have to be. With AI tools like <strong>Hostinger Horizons<\/strong>, you can create your app simply by typing prompts &ndash; <strong>no coding needed<\/strong>.<\/p><p>In this guide, I&rsquo;ll show you how I developed my community web app, from the first idea to launching it live. Don&rsquo;t worry if you&rsquo;ve never built an app &ndash; the steps are manageable even for beginners.<\/p><p>Let&rsquo;s jump right in!<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-planning-my-community-web-app\"><strong>Planning my community web app<\/strong><\/h2><p>I&rsquo;ve used many community web apps before, but third-party platforms often had issues. Some prioritized commercial interests over user needs, while others had frustrating restrictions, such as being inaccessible in certain regions.<\/p><p>Then there were the troll accounts &ndash; constant spam, off-topic comments, and heated arguments that moderators couldn&rsquo;t always keep under control.<\/p><p>That&rsquo;s when I realized I needed my own community web application that would focus on what matters to me and the people I want to connect with. Here&rsquo;s what I wanted to include:<\/p><ul class=\"wp-block-list\">\n<li><strong>Discussion forums<\/strong> &ndash; organized by categories so users can participate in threaded conversations.<\/li>\n\n\n\n<li><strong>Media sharing<\/strong> &ndash; users can upload photos and videos to relevant threads, making discussions more engaging.<\/li>\n\n\n\n<li><strong>Polls &ndash; <\/strong>users can add optional polls to threads with a question and multiple options.<\/li>\n\n\n\n<li><strong>Custom design<\/strong> &ndash; elements like a sticky sidebar, a search bar, and dark mode for a better user experience.<\/li>\n\n\n\n<li><strong>User login and registration<\/strong> &ndash; for inviting family, friends, and like-minded people to join quickly.<\/li>\n<\/ul><p>These are just the core functionalities. As the community grows, I plan to expand the app with more features to improve engagement and usability.<\/p><h3 class=\"wp-block-heading\" id=\"h-why-i-chose-hostinger-horizons\"><strong>Why I chose Hostinger Horizons<\/strong><\/h3><p>Since I wanted to bring my idea to life quickly, I went with<a href=\"\/ca\/horizons\"> Horizons AI App Generator<\/a>. It&rsquo;s an AI-powered tool that creates web apps based on simple prompts &ndash; no need to write long, complicated code or deal with frontend and backend logic.<\/p><p>What really stood out to me was how effortless the process was:<\/p><ul class=\"wp-block-list\">\n<li><strong>No coding required<\/strong> &ndash; all I had to do was describe what I wanted, and Hostinger Horizons handled the rest.<\/li>\n\n\n\n<li><strong>Instant refinements<\/strong> &ndash; I could tweak a feature, adjust the design, or fix a bug by updating my prompts. The AI instantly applied the changes and provided a live preview.<\/li>\n\n\n\n<li><strong>Multilingual support<\/strong> &ndash; the tool works in over 80 languages, so I could describe my app in my preferred language without worrying about technical terms.<\/li>\n\n\n\n<li><strong>Seamless hosting integration<\/strong> &ndash; once my web app was ready, I didn&rsquo;t have to set up hosting separately. With one click, I published it instantly on Hostinger&rsquo;s fast and reliable hosting.<\/li>\n<\/ul><p>Hostinger Horizons has different plans, starting at <strong>CA$ 27.89\/month<\/strong>, with message limits of up to <strong>1,000\/month<\/strong>. There&rsquo;s even a <strong>30-day money-back guarantee<\/strong>, so there&rsquo;s no real risk in experimenting with it.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/ca\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder-1024x300.png\" alt=\"\" class=\"wp-image-129223\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-i-built-my-community-web-app-with-hostinger-horizons\"><strong>How I built my community web app with Hostinger Horizons<\/strong><\/h2><p>With my Hostinger Horizons plan set, it was time for the exciting part: developing my community platform. I created one for cat owners, where we can discuss all things feline &ndash; care tips, behavior, health, and everything in between.<\/p><p>If you plan to create a community web app for a different interest group, like book lovers, moviegoers, or pop culture stans, you can easily tweak my prompts to match your vision.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-1-setting-up-the-project\"><strong>Step 1: Setting up the project<\/strong><\/h3><p>To start, I logged in to hPanel with my Hostinger account and went to <strong>Websites &rarr; Websites list &rarr; Add website &rarr; Hostinger Horizons<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af458232\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"391\" 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\/hpanel-websites-hostinger-horizons-highlighted-1-1024x391.png\" alt=\"The Hostinger Horizons feature in hPanel's Websites page\" class=\"wp-image-126149\"  sizes=\"auto, (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><\/div><p>That took me to Hostinger Horizons&rsquo; startup screen, where I typed my first prompt to set the foundation for the app:<\/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 community web app for cat lovers to engage in dynamic discussions on feline-related topics. The app should feature discussion forums organized by various cat breeds and interests, enabling users to participate in threaded conversations. Design the interface with intuitive navigation, incorporating a playful color scheme inspired by calico cats' vibrant orange, black, and white fur tones to reflect a friendly and approachable aesthetic.<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af4597eb\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"641\" 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-startup-screen-1024x641.png\" alt=\"The Hostinger Horizons startup screen\" class=\"wp-image-126150\"  sizes=\"auto, (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><\/div><p>It took a few moments for the tool to process my prompt. As it went to work, the interface split into two panes:<\/p><ul class=\"wp-block-list\">\n<li>The <strong>left pane<\/strong> is where I typed prompts and interacted with the AI.<\/li>\n\n\n\n<li>The <strong>right pane<\/strong> showed a live preview of the app as it was being built.<\/li>\n<\/ul><p>Here&rsquo;s what the first version of my community web app looked like:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af45b05b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" 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-main-interface-1024x576.png\" alt=\"The main interface of Hostinger Horizons\" class=\"wp-image-126151\"  sizes=\"auto, (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><\/div><p>Not bad at all! Hostinger Horizons even came up with a pretty cool name for the community: <strong>Purrfect Discussions<\/strong>, which shows it can help with copy, not just functionality.<\/p><p>But when I tested it, a few things didn&rsquo;t work yet &ndash; like the buttons to add or open discussions. So, I kept iterating and refining my prompts to get everything working as I wanted.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-2-implementing-discussion-functionality\"><strong>Step 2: Implementing discussion functionality<\/strong><\/h3><p>The next thing I wanted to tackle was adding the most important feature: <strong>forum discussions<\/strong>. I used 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=\"\">Implement a full discussion functionality for my web app, so users can start new threads, reply to existing discussions, and upvote or downvote comments. Each thread should have a title, description, and category (e.g., breed-specific, cat care, funny stories, etc.). Ensure threaded replies are easy to follow, with the most recent comments appearing at the top.<\/pre><p>Hostinger Horizons successfully implemented the feature and updated my web app accordingly. I tested it by adding a discussion thread like this:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af45c720\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"795\" 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-community-web-app-create-new-thread-1024x795.png\" alt=\"Creating a new thread in my community web app\" class=\"wp-image-126152\"  sizes=\"auto, (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><\/div><p>It worked! But when I tried posting a comment and upvoting\/downvoting existing ones, none of the changes showed up immediately. I refreshed the page &ndash; and there they were.<\/p><p>That&rsquo;s when I realized the issue: the app wasn&rsquo;t updating in real time. So, I asked the tool to fix it with another 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=\"\">Fix the real-time functionality for upvoting, downvoting, and comment posting in the cat lovers' community web app. When users upvote or downvote a thread or comment, the vote count should automatically update without needing to refresh the page. Similarly, when a new comment is added, it should appear in the thread immediately.<\/pre><p>Hostinger Horizons nailed it. After that, the forum discussion features worked exactly as I wanted.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af45df09\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"781\" 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-community-web-app-thread-1024x781.png\" alt=\"The thread page in my community web app\" class=\"wp-image-126153\"  sizes=\"auto, (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><\/div><h3 class=\"wp-block-heading\" id=\"h-step-3-including-media-sharing\"><strong>Step 3: Including media sharing<\/strong><\/h3><p>What&rsquo;s the one thing people want from a cat-lover community besides sharing tips or asking questions? Yep, they want to see adorable cat photos from other owners.<\/p><p>But my web app didn&rsquo;t have that functionality yet. I used this prompt to add media sharing:<\/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 media upload functionality when creating a new thread. Users should be able to upload images and videos of their cats along with their thread content. The app should support common file formats for images (JPG, PNG, GIF) and videos (MP4, MOV). Ensure the uploaded media is displayed within the thread, and include basic file size limitations and error handling for unsupported file types or large uploads.<\/pre><p>As soon as Hostinger Horizons finished processing the prompt, I created a new thread and uploaded a kitten photo:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af46069d\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"927\" 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-community-web-app-add-media-1024x927.png\" alt=\"Adding an image when creating a thread in my community web app\" class=\"wp-image-126154\"  sizes=\"auto, (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><\/div><p>The picture displayed perfectly when I opened the thread.<\/p><p>That was a great start, but I wanted more. Users should be able to upload media in the comments, too. Also, it would be helpful if they could edit or delete their threads and comments in case they made a mistake or changed their mind.<\/p><p>Here&rsquo;s the prompt I used to upgrade the 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=\"\">Extend the media upload functionality to comments in my web app by allowing users to add images and videos when posting a comment, just like in threads. Also, implement the ability for users to edit or delete their own threads and comments. They should be able to update content, including text and media, or remove it entirely if needed.<\/pre><p>Just like that, the app felt more lively. Users could upload media in both threads and comments, vote on discussions, and update or delete their posts whenever needed.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af462eac\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"824\" 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-community-web-app-images-edit-delete-1024x824.png\" alt=\"The thread page in my community web app with images and edit and delete buttons\" class=\"wp-image-126155\"  sizes=\"auto, (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><\/div><p><div class=\"protip\">\n                    <h4 class=\"title\">Suggested reading<\/h4>\n                    <p>Breaking down complex features into smaller tasks &ndash; like how I first asked Hostinger Horizons to add media sharing, then later prompted it to support uploads in comments &ndash; is just one of many useful strategies when working with the tool. You can find more <a href=\"\/ca\/tutorials\/prompting-with-hostinger-horizons\">prompting tips for Hostinger Horizons<\/a> in my other article.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-step-4-adding-polls-to-threads\"><strong>Step 4: Adding polls to threads<\/strong><\/h3><p>Another common feature in community web apps is the ability to add polls to threads. When other users visit the thread, they can also vote on the poll, in addition to leaving comments and interacting with the content.<\/p><p>So, I asked Hostinger Horizons to implement this feature with the following 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=\"\">Add an optional poll block when creating a new thread. If a user chooses to add a poll, they should be able to input a question and 2&ndash;10 options.<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af464484\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"776\" 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-community-web-app-add-poll-1024x776.png\" alt=\"Adding a new poll when creating a thread in my community web app\" class=\"wp-image-126156\"  sizes=\"auto, (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><\/div><p>It worked when I tested it initially, but there were a few logical issues. For example, users could vote multiple times, and they could also undo their vote by clicking the same option again &ndash; which I didn&rsquo;t want.<\/p><p>From my experience with similar platforms, users can only vote once and can&rsquo;t undo their vote. Also, the results should only be visible after voting.<\/p><p>I asked Hostinger Horizons to address the issue:<\/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=\"\">Voting should be limited to one vote per user. Results should be displayed as bars with percentages. Optionally, users can view the results only after they've voted.<\/pre><p>And here&rsquo;s the result after the fix:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af4658ba\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" 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-community-web-app-thread-poll-1024x565.png\" alt=\"The thread page with a poll in my community web app\" class=\"wp-image-126157\"  sizes=\"auto, (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><\/div><h3 class=\"wp-block-heading\" id=\"h-step-5-revamping-the-design\"><strong>Step 5: Revamping the design<\/strong><\/h3><p>As we saw in the previous steps, the initial design of my community web app was decent. But of course, I wanted to improve it by adding more design elements and refining the layout.<\/p><p>Doing so didn&rsquo;t just make the app look more appealing; it also improved accessibility and overall usability.<\/p><p>So, I turned to the <a href=\"\/ca\/tutorials\/web-app-design-tips-with-hostinger-horizons\">web app design with Hostinger Horizons<\/a> article and started applying what I learned.<\/p><p>First, I focused on typography:<\/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=\"\">Use bold typography for headings (Roboto) and light fonts for body text (Open Sans). Set body text to 18px and headings to 32px for better readability and visual hierarchy.<\/pre><p>Next, I redesigned the layout:<\/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=\"\">Implement a card-based layout for threads and comments. Use light backgrounds, rounded corners, and soft shadows to separate posts. Add color borders\/icons for different thread types.<\/pre><p>Then, I worked on navigation and usability:<\/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=\"\">Implement a sticky sidebar for navigation with categories and recent posts, visible only on the thread page. Ensure the sidebar remains visible while scrolling through threads and comments. Additionally,&nbsp; include a search bar that is always visible across all pages.<\/pre><p>And finally, I added dark mode:<\/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 dark mode with high contrast between text and background. Use dark backgrounds (charcoal\/navy) and bright accents (white\/light blue) for readability in low light. Include a toggle to switch between the modes next to the search bar.<\/pre><p>At this stage, my community web app looked like this:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af466ff8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" 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-community-web-app-thread-night-mode-1024x608.png\" alt=\"The thread page with night mode in my community web app\" class=\"wp-image-126158\"  sizes=\"auto, (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><\/div><h3 class=\"wp-block-heading\" id=\"h-step-6-creating-a-login-and-registration-page\"><strong>Step 6: Creating a login and registration page<\/strong><\/h3><p>Like I said before, I planned to invite friends, family, and fellow cat lovers to join my web app in the future. I needed to add a login and registration page to let everyone create their account and access the platform easily.<\/p><p>Login and registration setups can vary depending on the developer&rsquo;s wants, but I kept things simple. Here&rsquo;s what I went with:<\/p><ul class=\"wp-block-list\">\n<li>Fields to sign up with a username, email, and password.<\/li>\n\n\n\n<li>A login form without the email field.<\/li>\n\n\n\n<li>A toggle to switch between login and sign-up.<\/li>\n\n\n\n<li>A link to reset your password.<\/li>\n\n\n\n<li>A centered error message if something goes wrong.<\/li>\n<\/ul><p>Based on that, here&rsquo;s the prompt I used:<\/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 login\/registration page for my web app. Include the following features:\n\n- Fields for email address, username, and password on the registration page. For the login page, omit the email address field.\n\n- A button for logging in or signing up.\n\n- A link to toggle between the login and sign-up pages.\n\n- A link to prompt the password reset process, with the necessary functionality.\n\n- An error message that appears in the center of the page when invalid data is entered.<\/pre><p>But instead of implementing it, the app threw an error:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af468cb7\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"888\" 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-preview-pane-error-1024x888.png\" alt=\"The preview error in Hostinger Horizons for my community web app\" class=\"wp-image-126159\"  sizes=\"auto, (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><\/div><p>I didn&rsquo;t panic. Hostinger Horizons is still in <strong>early access<\/strong>, so I expected a few hiccups along the way. I clicked the <strong>Ask to fix<\/strong> button and let the tool handle it:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af46bc1f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"629\" 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-prompting-pane-ask-to-fix-highlighted-1024x629.png\" alt=\"The Ask to fix button in Hostinger Horizons\" class=\"wp-image-126160\"  sizes=\"auto, (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><\/div><p>The second time&rsquo;s the charm. The login and registration page worked perfectly once I tested it by creating a new account. After signing in, the app redirected me to the main page, just as expected.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af46da84\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"849\" height=\"1024\" 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-community-web-app-login-849x1024.png\" alt=\"The login page of my community web app\" class=\"wp-image-126161\"  sizes=\"auto, (max-width: 849px) 100vw, 849px\" \/><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>But something was missing &ndash; there was no logout button, meaning users couldn&rsquo;t log out. Not ideal. I typed one more 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=\"\">Add a sign-out button to the main page of the web app, which is visible only after the user logs in. When clicked, the button should log the user out and redirect them to the login page.<\/pre><p>Here&rsquo;s how it turned out:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af46f89e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" 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-community-web-app-search-results-1024x371.png\" alt=\"The search results page of my community web app with the Sign Out button\" class=\"wp-image-126162\"  sizes=\"auto, (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><\/div><h2 class=\"wp-block-heading\" id=\"h-testing-and-publishing-my-community-web-application\"><strong>Testing and publishing my community web<\/strong> application<\/h2><p>Now that the core functionalities of my community platform were in place, it was time to publish it. But before doing that, I wanted to do a final check by <a href=\"\/ca\/tutorials\/web-app-testing\">thoroughly testing my web app<\/a> to catch any issues.<\/p><p>I interacted with it via the right preview pane, clicking every button to ensure it worked, filling in fields to check input validation, testing invalid data to see if it handled errors properly, and checking all features to ensure they worked as expected.<\/p><p>When testing, I recommend creating a checklist of features to test and keeping track of anything that isn&rsquo;t behaving as expected. This way, you&rsquo;ll know what still needs attention.<\/p><p>For example, when I tested how my community web app looked on a mobile device by toggling the viewport in the preview pane, I noticed that the discussion thread card was unresponsive &ndash; it was too wide and didn&rsquo;t adjust properly.<\/p><p>So, I asked Hostinger Horizons to fix it with 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=\"\">Fix the responsiveness of the discussion thread card. Ensure it adjusts properly to smaller screen sizes, especially for mobile devices.<\/pre><p>After ensuring everything was in order, I was ready to launch my app. I clicked the <strong>Publish<\/strong> button, and the app went live on <strong>Hostinger&rsquo;s Business hosting plan<\/strong>, which came bundled with Hostinger Horizons, so I didn&rsquo;t need to purchase separate hosting.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af4710fe\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"928\" 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-publish-highlighted-1024x928.png\" alt=\"The Publish button in Hostinger Horizons\" class=\"wp-image-126163\"  sizes=\"auto, (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><\/div><p>By default, Hostinger Horizons gives you a randomly generated domain for your app. But I wanted to connect a real domain name, so I clicked <strong>Get domain<\/strong> and followed the instructions.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e20af4725a8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" 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-get-domain-highlighted-1024x585.png\" alt=\"The Get domain button in Hostinger Horizons\" class=\"wp-image-126164\"  sizes=\"auto, (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><\/div><p>If you&rsquo;d rather do it later, that&rsquo;s fine. You can add a domain anytime by going to <strong>Websites &rarr; Website list<\/strong> and selecting <strong>Change domain<\/strong> under your Hostinger Horizons project.<\/p><p>And that&rsquo;s it! My community web app for cat lovers is now live and ready for users to enjoy!<\/p><h2 class=\"wp-block-heading\" id=\"h-what-s-next\"><strong>What&rsquo;s next?<\/strong><\/h2><p>In this guide, I&rsquo;ve shown you how I built my own version of a community web app. My app is still far from perfect, but even the most popular community platforms started small, so I&rsquo;m confident it will grow with time.<\/p><p>Creating this app with Hostinger Horizons turned out to be surprisingly easy and fun. I can&rsquo;t wait to add more features to my community platform, including:<\/p><ul class=\"wp-block-list\">\n<li><strong>User profiles<\/strong> &ndash; to let users personalize their accounts and share more about themselves.<\/li>\n\n\n\n<li><strong>Real-time chat<\/strong> &ndash; for instant communication between users, making interactions more immediate and engaging.<\/li>\n\n\n\n<li><strong>Moderation tools<\/strong> &ndash; these will help me manage content, prevent spam, and maintain a friendly and positive environment.<\/li>\n\n\n\n<li><strong>Database integration<\/strong> &ndash; since my app is still growing, I plan to connect it with a database to store user data and enhance security.<\/li>\n<\/ul><p>Now it&rsquo;s your turn to develop your own web app. With Hostinger Horizons, the possibilities are endless.<\/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>Community web apps, like Reddit and Discord, bring people together around shared interests or activities. They create spaces for users to discuss ideas, share content, and support each other. Sure, there are already plenty of platforms out there, and some are quite popular. But if you create your own community web application, you can tailor [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/create-community-web-app\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":411,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How I created my community web app with Hostinger Horizons","rank_math_description":"Check out my experience using Hostinger Horizons to develop a community web app by just writing prompts \u2013 quick and easy without coding!","rank_math_focus_keyword":"community web app with Hostinger Horizons","footnotes":""},"categories":[22706,22707],"tags":[],"class_list":["post-126146","post","type-post","status-publish","format-standard","hentry","category-web-app","category-web-application-blueprints"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-community-web-app","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-community-web-app","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-community-web-app","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-community-web-app","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-community-web-app","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-community-web-app","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-community-web-app","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-community-web-app","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/126146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=126146"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/126146\/revisions"}],"predecessor-version":[{"id":137166,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/126146\/revisions\/137166"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=126146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=126146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=126146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}