Customization Workflow

SaaSStinger Lite is designed to be customized for different SaaS products.

Developers can modify:

• Branding
• Theme
• Navigation
• Features
• Data models
• Permissions
• Application workflows

This guide explains the recommended customization approach.

Customization Principles

Before modifying the starter kit:

1. Understand the existing architecture.
2. Keep changes isolated.
3. Avoid bypassing existing patterns.
4. Preserve security boundaries.

Customization Areas

Common customization areas:

Branding

UI

Features

Authentication

Permissions

Database

Deployment

Branding Customization

Brand-related files should be updated first.

Common locations:

src/app/

src/components/layout/

public/

Examples:

• Logo
• Application name
• Metadata
• Icons

Application Metadata

Update:

src/app/layout.tsx

Common changes:

• Application title
• Description
• Open Graph information

Logo and Assets

Static assets are stored in:

public/

Replace:

logo files

icons

images

while keeping filenames consistent where possible.

Theme Customization

SaaSStinger Lite uses:

• Tailwind CSS
• shadcn/ui
• Theme provider

Theme-related files:

src/components/layout/

src/providers/

Updating Colors

Modify:

globals.css

and Tailwind configuration where applicable.

Avoid hardcoding colors throughout components.

Prefer:

text-primary

bg-background

text-muted-foreground

Navigation Customization

Dashboard navigation is managed through:

src/components/dashboard/

Common customization:

• Add menu items
• Remove sections
• Rename features

Adding a Navigation Item

Example:

Dashboard

Projects

Reports

When adding a new item:

Check:

• Route exists
• Permission requirements
• Mobile navigation behavior

Feature Customization

Features should be modified through their architecture layers.

Example:

Adding a billing feature:

Components

↓

Actions

↓

Services

↓

Repositories

↓

Database

Avoid implementing feature logic only in pages.

Removing Features

Before removing a feature:

Check dependencies:

• Components
• Routes
• Actions
• Services
• Database collections
• Documentation

Remove completely instead of leaving unused code.

Authentication Customization

Authentication logic is located around:

src/providers/

src/components/auth/

src/lib/auth/

Possible changes:

• Add providers
• Change verification requirements
• Modify onboarding flow

Workspace Customization

Workspace behavior involves:

src/services/workspace/

src/server/workspace.server.ts

src/components/dashboard/WorkspaceSwitcher.tsx

Common changes:

• Workspace fields
• Workspace settings
• Workspace onboarding

Adding Workspace Fields

Example:

Adding:

industry

companySize

requires updating:

1. Types
2. Forms
3. Server actions
4. Services
5. Firestore structure
6. Documentation

Permission Customization

RBAC changes should be handled carefully.

Related files:

src/lib/rbac.ts

src/lib/permissions.ts

Before changing permissions:

Define:

• Roles
• Capabilities
• Protected actions

Database Customization

When changing Firestore structure:

Update:

Types

Repositories

Services

Actions

Rules

Never change Firestore documents without reviewing security rules.

Environment Customization

Environment configuration uses:

.env.local

Required variables are documented in:

docs/getting-started/environment-variables.mdx

Safe Customization Workflow

Recommended workflow:

Create Branch

      ↓

Make Changes

      ↓

Run Type Check

      ↓

Run Lint

      ↓

Test Feature

      ↓

Build Application

Commands:

pnpm tsc --noEmit

pnpm lint

pnpm build

Keeping Updates Maintainable

Avoid:

• Editing random files
• Duplicating components
• Bypassing services
• Adding direct database calls

Prefer:

• Existing architecture
• Reusable components
• Typed interfaces
• Documented changes

Customization Checklist

Before release:

• Branding updated
• Navigation reviewed
• Permissions reviewed
• Database changes tested
• Security rules updated
• Documentation updated
• Build successful

Related Documentation

• Adding a Feature
• Creating Components
• Extending RBAC
• Adding Firestore Collections
• Environment Variables
• Deployment