Customizing the Application

This guide explains how to customize your SaaS app’s settings and appearance using app.config.ts and global.css. The app is built with Next.js (a web framework), Shadcn (for reusable UI components), Tailwind CSS v4 (for styling), and Supabase (for user authentication and data). We’ll break it down step-by-step for beginners, combining both configuration and styling into one clear guide.

What You’ll Learn

• How to change your app’s name, logo, and colors.
• How to set up SEO (to help your app appear in search engines).
• How to enable or disable features like login options.
• How to style your app with brand colors.

Customizing app.config.ts

The app.config.ts file is the control center for your app. It manages:

• Branding: Your app’s name and logos.
• SEO: Information for search engines.
• Features: Login options (e.g., Google or email).
• Pricing: Subscription plans for users.
• Custom Settings: Add your own settings as needed (with caution).

Example app.config.ts

Below is a sample app.config.ts with explanations for each setting. You’ll edit this file to customize your app.

import type { AppConfigType } from "@/schema/app.config.shema";
import { validateAppConfig } from "@/utils";

const config = {
  // Branding: Sets your app’s identity
  siteName: "MyCoolApp", // Your app’s name, shown in the UI
  siteUrl: "http://localhost:3000", // Your app’s web address (use your live URL later, like "https://mycoolapp.com")
  description: "A fun app to help teams work together.", // A short description for search engines
  websiteLogo: { light: "/logo-light.png", dark: "/logo-dark.png" }, // Logos for light/dark modes
  dashboardLogo: { light: "/logo-light.png", dark: "/logo-dark.png" }, // Logos for the user dashboard

  // SEO: Lump your app show up on Google
  author: "Your Name", // Your name or company (e.g., "Cool Co.")
  keywords: ["teamwork", "productivity", "SaaS"], // Words people might search to find your app
  ogImage: "/social-preview.png", // Image shown when sharing your app on social media

  // Feature Flags: Turn features on or off
  featureFlags: {
    enableMagicLinkSignIn: true, // Allow login with a magic link sent to email
    enablePasswordSignIn: true, // Allow login with email and password
    enableOAuthSignIn: true, // Allow login with Google or other services
  },

  // Validation: Set limits for user uploads
  validation: {
    maxStorageFileLimit: 2 * 1024 * 1024, // Max file size (2MB in bytes)
  },

  // OAuth Providers: Choose login services
  oAuthProviders: ["google"], // Allow Google login (add "github" for GitHub, etc.)

  // Pricing Plans: Set up subscription plans
  paddle: [
    {
      name: "Starter", // Plan name
      description: "Great for solo users.", // What the plan offers
      features: ["1 workspace", "Basic support"], // List of features
      recommended: false, // Highlight this plan in the UI
      priceId: {
        month: "pri_01abc123xyz", // Monthly plan ID from Paddle
        year: "pri_01def456xyz", // Yearly plan ID from Paddle
      },
    },
    {
      name: "Pro",
      description: "Perfect for teams.",
      features: ["Unlimited workspaces", "Priority support"],
      recommended: true,
      priceId: {
        month: "pri_01ghi789xyz",
        year: "pri_01jkl012xyz",
      },
    },
    // ... add more plan
  ],

  //  Add your own configurations
} satisfies AppConfigType;

export const appConfig = validateAppConfig(config);

How to Edit app.config.ts

1. Find the File: Look for app.config.ts in your project folder (usually in the root or src directory).
2. Update Branding:
   • Change siteName to your app’s name (e.g., "TeamFlow").
   • Update siteUrl to your app’s live URL when ready (e.g., "https://teamflow.com").
   • Add your logos to the public folder (e.g., public/logo-light.png), then update websiteLogo and dashboardLogo paths.
3. Improve SEO:
   • Set description to a short, clear sentence about your app.
   • Add relevant keywords (e.g., ["collaboration", "tasks"]).
   • Place a social media image in public (e.g., public/social-preview.png) and update ogImage.
4. Toggle Features:
   • Set featureFlags to true or false to enable or disable login methods.
   • Add providers like "github" to oAuthProviders if needed.
5. Set File Limits:
   • Adjust maxStorageFileLimit (e.g., 5 * 1024 * 1024 for 5MB).
6. Update Pricing:
   • Get plan IDs from your Paddle dashboard and update priceId.
   • Customize plan name, description, and features.

Tip: Never put secret keys (like Paddle or Supabase keys) in app.config.ts. Use a .env file for sensitive data.

Styling with global.css

The global.css file controls your app’s look using Tailwind CSS v4. You can set custom colors to match your brand, which will style Shadcn components (like buttons and forms).

Example global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --radius: 0.65rem; /* Corner roundness for buttons and cards */
  --background: oklch(1 0 0); /* Light mode background (white) */
  --foreground: oklch(0.141 0.005 285.823); /* Light mode text (dark gray) */
  --primary: oklch(0.65 0.2 250); /* Main brand color (e.g., blue) */
  --secondary: oklch(0.7 0.15 150); /* Secondary color (e.g., green) */
  /* ...more  */
}

.dark {
  --background: oklch(
    0.141 0.005 285.823
  ); /* Dark mode background (dark gray) */
  --foreground: oklch(0.985 0 0); /* Dark mode text (white) */
  --primary: oklch(0.7 0.2 250); /* Dark mode main color */
  --secondary: oklch(0.75 0.15 150); /* Dark mode secondary color */
  /* ...more  */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  /* ...more  */
}

How to Edit global.css

1. Find the File: Look for global.css in your project (e.g., /app/global.css).
2. Choose Colors:
   • Pick colors using a tool like OKLCH Color Picker.
   • Update --primary and --secondary in :root (light mode) and .dark (dark mode).
   • Use OKLCH format for colors (e.g., oklch(0.65 0.2 250) for a blue shade).
3. Apply to Tailwind:
   • Add your colors to the @theme inline section so Tailwind can use them (e.g., bg-primary for buttons).
4. Test: Reload your app to see the new colors on buttons, backgrounds, etc.

Tip: Use a consistent color scheme for a professional look. Test both light and dark modes.

Best Practices for Beginners

• Start Small: Change one setting at a time (e.g., siteName) and test it.
• Check Logos: Ensure logo files are in the public folder and paths are correct.
• Test Colors: Preview your app after updating global.css to confirm colors look good.
• Use Paddle Correctly: Copy price IDs exactly from your Paddle dashboard to avoid errors.
• Ask for Help: Check the Next.js docs, Shadcn docs, Tailwind CSS docs, or Supabase docs if stuck.

Troubleshooting

• Config Errors: If app.config.ts breaks, check that all fields match the AppConfigType schema.
• Logo Not Showing: Verify logo files are in public and paths are correct (e.g., /logo-light.png).
• Colors Not Applying: Ensure global.css is imported in your app (usually in layout.tsx).
• Paddle Issues: Double-check price IDs in your Paddle account.

Next Steps

• Test your app locally (npm run dev) to see changes.
• Deploy to a live server (e.g., Vercel) and update siteUrl.
• Explore Shadcn components to customize your UI further.

Happy coding! 🚀