How to create an admin panel in Hostinger Horizons

Hostinger Horizons allows you to build a private, login-protected admin panel for your web application. This area enables you to manage dynamic content—such as adding products, writing blog posts, or updating galleries—without writing code. Horizons uses an integrated backend to automatically handle data storage, authentication, and collections based on your prompts.

Step 1: Send the initial application prompt

To establish the foundation of your app, provide a comprehensive overview in your first message.

1. Open the Hostinger Horizons editor.
2. Enter a prompt that describes both the public site and the private admin area.
   Example Prompt: Create a web application with a public-facing website and a private admin panel accessible via email and password login. The admin panel must allow me to add, edit, and delete products (name, price, image, description), blog posts (title, content, cover image), and gallery images. The public site should display this content dynamically.

Step 2: Configure authentication

If the initial prompt does not generate a functional login system, refine the authentication logic.

1. Request a specific login page and route protection.
   Example Prompt: Add a login page for the admin panel with email and password authentication. Ensure only logged-in admins can access the admin area and redirect unauthenticated users to the login page.

Step 3: Build content management sections

Add specific management modules one at a time to ensure stability.

1. 1. Product Management: Prompt Horizons to create a section for inventory.
      Example Prompt: Add a Products section to the admin panel to add new products with a name, price, description, and image. Include a list of existing products with edit and delete options.
   2. Blog and Gallery: Use similar prompts to add sections for blog posts and image galleries, specifying the fields needed for each (e.g., title, date, or cover image).
      Example Prompt:
      Add a Blog Posts section to the admin panel where I can write, edit, and publish articles with a title, content, and cover image.
      Add a Gallery section to the admin panel where I can upload, replace, and delete images that display on the public site.

Step 4: Sync content to the public site

Ensure the data entered in the admin panel appears correctly for your visitors.

1. Ask Horizons to link the backend collections to your homepage or subpages.
   Example Prompt: Connect the public homepage to the admin panel database. The public site must automatically update whenever products, blog posts, or gallery images are added or edited in the admin area.

Once completed, you will have a functional administrative interface to manage your Hostinger Horizons site content in real-time. You can monitor and edit your raw data at any time using the Data toggle at the top of the preview screen.

Troubleshooting common issues

If your admin panel or dynamic content does not behave as expected, use the following prompts and checks to resolve the issue:   

1. Dynamic content is not appearing on the public site: Ensure the public site is configured to fetch data from the exact same database collections the admin panel writes to.
   You can prompt: Make sure the public pages fetch and display the latest data from the [collection name] collection used by the admin panel.   
2. Login redirects back to the login page: This typically indicates a session storage issue.
   Use this prompt: Fix the authentication flow so that after a successful login, the user is redirected to the admin dashboard and remains authenticated.   
3. Admin panel is accessible without authentication: You must ensure all administrative routes are protected.
   Use this prompt: Add route protection to all admin panel pages. Automatically redirect any unauthenticated users to the login page.   
4. Prompted changes are not visible on the live site: In the Hostinger Horizons editor, you must click Publish, then select Publish changes. Changes may take a few minutes to propagate; view the site in an incognito window to bypass local browser cache.  
5. An error message appears after adding a feature:  Provide the specific error details to the AI for analysis.
   Use this prompt: When I [describe exact steps], I get console error ‘[paste error]’. Network tab shows request to [URL] with payload [paste payload], error [paste error code]. Can you fix the issue?