Documentation
Documentation
Introduction

Getting Started

Getting started
Getting StartedInstallationQuick StartProject Structure

Configuration

Configuration
ConfigurationEnvironment ConfigurationEdge ConfigDatabaseAuth SecretStripeFirebaseStorageGoogle Maps And Cloud Service AccountOAuth ProvidersEmail DeliverySentryFeature Flags

Architecture

Architecture
Architecture OverviewTech StackoRPC MiddlewareDesign Principles

Patterns

Patterns
Code Patterns & ConventionsFeature ModulesError HandlingType Safety

Database

Database
DatabaseSetupSchema DefinitionDatabase OperationsMigrationsCaching
Data Tables

API

oRPCProceduresRoutersoRPC Proxy Setup
APIsOpenAPIREST Endpoints

Auth & Access

AuthenticationConfigurationOAuth ProvidersRolesSession Management
AuthorizationUser RolesPermissions

Routing & i18n

RoutingDeclarative RoutingNavigation
InternationalizationTranslationsLocale Routing

Components & UI

ComponentsButtonsFormsNavigationDialogs
StylesTailwind CSSThemingTypography

Storage

Storage
StorageConfigurationUsageBuckets
Stripe Billing

Extra

Caching

Templates

Templates
Template GuidesCreate New FeatureCreate New PageCreate Database TableCreate oRPC RouterAdd Translations

Development

Development
DevelopmentCommandsAI AgentsBest Practices
Pulling Updates

Configuration

App configuration and settings

All application configuration is centralized in src/config/ using a single Config object pattern.

Configuration Files

src/config/
├── app.ts             # Core app settings (single Config object)
├── color-variants.ts  # Semantic colors + generic component variants
├── company.ts         # Company info and social links
├── fonts.ts           # Font configuration
└── storage.ts         # Storage bucket definitions

Favicon Generation

Generate favicons using RealFaviconGenerator:

  1. Go to realfavicongenerator.net
  2. Upload your source icon (minimum 512x512px recommended)
  3. Customize settings per platform
  4. Download the generated package

File Placement

Generated FilePlace In
favicon.ico, favicon-96x96.pngpublic/
apple-touch-icon.pngpublic/
web-app-manifest-*.pngpublic/
favicon.svg (optional)src/app/

Do not use a static public/site.webmanifest file. The manifest is dynamically generated via src/app/manifest.ts, which Next.js automatically serves at /manifest.webmanifest.

Web App Manifest

The manifest configuration is in src/app/manifest.ts:

import { Company } from "@/config/company";
import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: Company.Name,
    short_name: Company.Name,
    description: Company.Description,
    start_url: "/",
    icons: [
      /* ... */
    ],
    theme_color: "#ffffff",
    background_color: "#ffffff",
    // ...
  };
}

Update this file to customize your app name, theme colors, and icons.

Quick Links

Environment Variables

Environment variable validation with Zod

Feature Flags

Feature flag configuration and usage

Configuration Pattern

All configuration is accessed via a single default export:

import Config from "@/config/app";

// Access via: Config.<Area>.<KEY>
Config.Auth.COOKIE_PREFIX;
Config.Theme.DEFAULT;
Config.Navigation.CALLBACK_SEARCH_PARAM;

This pattern provides type-safe, centralized configuration across the entire application.

Core Configuration Areas

App

Config.APP_VERSION; // App version from process env

PWA

Config.Pwa.STANDALONE; // Run as standalone app (true) or browser tab (false)

Authentication

Config.Auth.COOKIE_PREFIX; // Cookie name prefix
Config.Auth.DISABLE_OPENAPI; // Disable OpenAPI docs
Config.Auth.DISABLE_COOKIE_CACHE; // Disable cookie cache for sessions
Config.Auth.STORE_SESSION_IN_DATABASE; // Store sessions in DB
Config.Auth.DISABLE_SESSION_REFRESH; // Disable session refresh
Config.Auth.SESSION_FRESH_AGE; // Freshness check (0 = disabled)
Config.Auth.DISABLE_ACCOUNT_DELETION; // Disable user account deletion
Config.Auth.SIGN_UP_AUTO_LOGIN; // Auto-login after registration

API

Config.Api.RPC_REQUEST_ID_HEADER; // Header for RPC request IDs
Config.Api.API_KEY_HEADER; // Header for API key auth
Config.Api.DEFAULT_PREFIX; // API key prefix
Config.Api.API_KEY_SKIP_RATE_LIMIT; // Skip rate limits for API key requests
Config.Api.LIST_UNEXPOSED_PROCEDURES_IN_OPENAPI; // Include unexposed procedures in OpenAPI

Rate Limiting

Config.RateLimit.ENABLED; // Enable/disable rate limiting
Config.RateLimit.LOG_VIOLATIONS; // Log rate limit violations
Config.RateLimit.SEND_METRICS; // Send rate limit metrics

Theme

Config.Theme.DEFAULT; // "light" | "dark" | "system"
Config.Theme.ENABLE_SYSTEM; // Allow system theme detection
Config.Theme.FORCE; // Force specific theme (overrides user)

UI

Config.Ui.TABLE_ROW_OPTIONS; // Pagination options [20, 50, 100]
Config.Ui.DEFAULT_TOAST_DURATION; // Toast duration in ms
Config.Ui.AUTH_LAYOUT; // "image-form" | "centered-blank" | "card-over-image"
Config.Ui.NAVIGATION_LAYOUT; // "sidebar" | "floating"

Cookie Banner

Config.CookieBanner.POSITION; // "center" | "bottom-left" | "bottom-right" | "full" | "top-bar"
Config.CookieBanner.ANIMATION_ENABLED; // Enable slide/fade animation

Date / Time

Config.Date.MIN_CALENDAR_DATE; // Earliest calendar date
Config.Date.MAX_CALENDAR_DATE; // Latest calendar date

Navigation

Config.Navigation.CALLBACK_SEARCH_PARAM; // Redirect callback param
Config.Navigation.LOCALE_COOKIE_KEY; // Locale cookie name
Config.Navigation.LOCALE_HEADER_KEY; // Locale header key
Config.Navigation.TIMEZOME_HEADER_KEY; // Timezone header key
Config.Navigation.PATHNAME_HEADER; // Pathname header key
Config.Navigation.DEFAULT_TIMEZONE; // Default timezone

Storage

Config.Storage.STORAGE_PROVIDER; // Storage provider type (see src/config/storage.ts)
Config.Storage.FILENAME_DIVIDER; // Divider for unique filenames
Config.Storage.PRIVATE_FILE_URL_EXPIRATION_HOURS; // Signed URL expiry

Analytics

Config.Analytics.SESSION_ID_COOKIE_NAME; // Session cookie name
Config.Analytics.SESSION_ID_UPDATE_COOKIE_NAME; // Session refresh cookie name

Billing

Config.Billing.DEFAULT_CURRENCY; // Default currency code
Config.Billing.DEFAULT_CURRENCY_FORMAT_LOCALE; // Locale for currency formatting
Config.Billing.ORGANIZATION_BILLING; // Enable organization billing
Config.Billing.USER_BILLING; // Enable user billing
Config.Billing.ENABLED; // Computed billing enabled state

Users

Config.Users.USERNAME_SUFFIX_NUMBERS; // Random username suffix digits

Company Configuration

Company information and social links:

import { Company } from "@/config/company";

Company.Name; // Company name
Company.SupportEmail; // Support email
Company.Socials; // Social media handles

Social Link Utilities

Generate social media URLs from handles:

import { getSocialUrl, type SocialsType } from "@/lib/links";

const url = getSocialUrl("instagram", "mycompany");
// Returns: "https://instagram.com/mycompany"

Best Practices

  1. Always use Config - Never hardcode values - import and use Config
  2. Import default export - import Config from "@/config/app";
  3. Document changes - Update documentation when adding new config values
  4. Use type-safe access - TypeScript will catch invalid config paths

Example

// ✅ Good
import Config from "@/config/app";

if (Config.Auth.SIGN_UP_AUTO_LOGIN) {
  // Auto-login logic
}

// ❌ Bad - hardcoded value
if (false) {
  // Auto-login logic
}

Always use the Config object instead of hardcoding values. This ensures consistent behavior and makes changes easier.

On this page

Configuration Files
Favicon Generation
File Placement
Web App Manifest
Quick Links
Configuration Pattern
Core Configuration Areas
App
PWA
Authentication
API
Rate Limiting
Theme
UI
Cookie Banner
Date / Time
Navigation
Storage
Analytics
Billing
Users
Company Configuration
Social Link Utilities
Best Practices
Example