Initial Setup

Learn how to access the admin panel and configure global site settings after installing Prodly.

After successfully installing Prodly, this guide will walk you through the initial setup process inside the admin panel. You’ll learn how to access admin tools, update site branding, and configure essential options such as default credits, plan settings.

Accessing the Admin Panel

To access the admin panel:

Go to your live domain and visit:


https://yourdomain.com/login

Register a new account – the very first user to register automatically becomes the administrator (thanks to the database trigger described in the Local Installation guide).
Once logged in, click the Admin Panel button in the top navigation bar (visible to admin users only) or navigate to /admin.

If you already have multiple users in the database and no admin exists, you can manually promote a user by running the following SQL in your Supabase SQL Editor (replace user@example.com with the actual email):


UPDATE user_profiles
SET is_admin = true
WHERE id = (SELECT id FROM auth.users WHERE email = 'user@example.com');

Option 2: Direct URL

Simply visit:


https://yourdomain.com/admin

If you are already logged in as an administrator, you will be redirected to the admin dashboard. If not, you’ll be redirected to the login page.

If you’ve just installed the script and some admin features are missing or not loading, log out and log back in. This refreshes your session and ensures all admin permissions are properly applied.

Navigating to Settings

After logging in, navigate to:


Admin Panel → Settings

This section allows you to manage every global setting of your platform. Settings are grouped into logical categories for easy access.

Key Sections Available

General Settings

Site Name – The name of your application (displayed in the logo).

Plan Settings

Prodly comes with three subscription plans: Free, Pro, and Enterprise. For each plan you can configure:

Credits – How many credits the user gets per billing cycle.
Stripe Price ID – The Price ID from Stripe (for paid plans). You can obtain this after creating products in Stripe (see Stripe Setup).

Example entries in the Settings table:

free_credits – Credits for Free plan (default 50)
pro_credits – Credits for Pro plan (default 500)
pro_price_id – Stripe Price ID for Pro plan
enterprise_credits – Credits for Enterprise plan (default 5000)
enterprise_price_id – Stripe Price ID for Enterprise plan

If you don’t see these keys in the admin panel, you can insert them manually into the settings table via your database client. After insertion, they will appear and become editable.

SEO & Metadata

Meta Title – The default title for your site (used in search results).
Meta Description – A brief description of your site (used by search engines).
Meta Keywords – Comma‑separated keywords (optional).
Google Analytics ID – Your GA4 measurement ID (starts with G-) to track visitor statistics.

Multilingual Page Metadata

Prodly supports multilingual titles and descriptions for all major pages. The file src/lib/metadata.ts contains the structure for 7 languages (en, ru, and others). You can edit this file to change the text for any page. For example, the file defines titles for the main page, login, signup, dashboard, and admin sections.

How it works:

Each page has a key (e.g., main, login, dashboard).
For every language (en, ru, de, etc.) a title and description are provided.
The placeholder {siteName} is automatically replaced with your site name (set in the admin panel under site_name).

Example from metadata.ts:


export const metadataMap: Record<string, Record<string, { title: string; description: string }>> = {
  en: {
    main: {
      title: "{siteName} - AI Product Description Generator",
      description: "Generate compelling product descriptions in seconds with AI",
    },
    login: {
      title: "Login - {siteName}",
      description: "Sign in to {siteName} to continue generating product descriptions",
    },
    // ... other pages
  },
  ru: {
    main: {
      title: "{siteName} - Генератор описаний товаров ИИ",
      description: "Создавайте продающие описания товаров за секунды с помощью ИИ",
    },
    // ... and so on
  },
};

If you need to add a new page or change the text for an existing one, edit this file. After the change, the titles will automatically apply across all languages.

Logo Customization

The logo is displayed using the component src/components/logo.tsx. It supports separate images for light and dark themes and automatically pulls the site name from the database.

Logo files:

Light theme: /public/logo.png
Dark theme: /public/logoDark.png

Place your own images in the public folder with these exact filenames. Recommended size: 30×30 pixels (you can adjust the width and height props in the component if needed).

The Logo component fetches the site name via the /api/settings endpoint and displays it next to the icon. You can customize spacing, font size, and other styles by passing the appropriate props (textClassName, gap, className).

Example usage anywhere:


import Logo from '@/components/logo';
 
export default function Header() {
  return <Logo width={40} height={40} textClassName="text-3xl font-bold" />;
}

If you want to change the actual logo image, simply replace the logo.png and logoDark.png files in the public folder. The filenames must remain the same so the component can find them.

Final Notes

After completing your initial setup:

Your site branding and SEO metadata will be applied globally.
The credit system will work with the default values you set.
Email functionality (password reset, notifications) will be active if SMTP is correctly configured.

Regularly revisit the Settings panel to update your branding, adjust plan limits, credentials as needed.