Adding a Feature

SaaSStinger Lite is designed to be extended.

New features should follow the existing application architecture instead of placing all logic inside components or pages.

A complete feature usually contains:

Feature

├── UI Components
├── Pages
├── Hooks
├── Server Actions
├── Services
├── Repositories
└── Types

Feature Development Flow

The recommended flow:

Requirement

      ↓

Data Model

      ↓

Repository

      ↓

Service

      ↓

Server Action

      ↓

UI Component

      ↓

Page

Step 1: Define the Feature

Before writing code, define:

• What problem the feature solves
• Who can access it
• What data it needs
• What permissions are required

Example:

Feature:

Project Comments

Questions:

• Can all workspace members comment?
• Can comments be deleted?
• Should actions appear in audit logs?

Step 2: Define Types

Create feature types.

Location:

src/types/

Example:

src/types/comments.ts

Example:

export interface Comment {
  id: string;
  workspaceId: string;
  userId: string;
  content: string;
}

Types define the expected data shape.

Step 3: Create Firestore Structure

Document the data model before implementation.

Example:

comments/

  commentId

      workspaceId

      userId

      content

      createdAt

Consider:

• Ownership
• Workspace isolation
• Security rules
• Query patterns

Step 4: Add Repository Layer

Repositories handle database access.

Location:

src/server/repositories/

Example:

comment.repository.ts

Responsibilities:

• Firestore reads
• Firestore writes
• Query operations

Repositories should not contain UI logic.

Step 5: Add Service Layer

Services contain business logic.

Location:

src/services/

Example:

src/services/comments/

Services handle:

• Validation rules
• Permission checks
• Business workflows

Example:

Create Comment

        ↓

Check Membership

        ↓

Save Comment

Step 6: Create Server Actions

Server actions connect the UI to backend logic.

Location:

src/actions/

Example:

comments.ts

Responsibilities:

• Receive user input
• Authenticate user
• Call services
• Return results

Flow:

Component

      ↓

Server Action

      ↓

Service

      ↓

Repository

Step 7: Add Components

Create feature components.

Location:

src/components/

Example:

src/components/comments/

Possible structure:

comments/

├── CommentList.tsx
├── CommentCard.tsx
├── CommentForm.tsx
└── CommentActions.tsx

Step 8: Add Pages

Pages belong in:

src/app/

Example:

src/app/dashboard/comments/

Pages should:

• Compose components
• Load required data
• Handle routing

Avoid putting business logic inside pages.

Step 9: Add Permissions

Every feature must define access rules.

Consider:

OWNER

ADMIN

MEMBER

Example:

Create comment:

MEMBER+

Delete comment:

OWNER or creator

Permissions must be enforced:

• Server-side
• Firestore rules where applicable

Step 10: Add Audit Logging

Administrative actions should create audit records.

Example events:

COMMENT_CREATED

COMMENT_DELETED

Audit records should include:

{
  workspaceId,
  userId,
  action,
  targetType,
  targetId,
  createdAt
}

Step 11: Add Documentation

Update documentation for:

• Feature usage
• Architecture
• Permissions
• Configuration

Example Feature Structure

A complete feature:

comments/

components/

    CommentList.tsx

actions/

    comments.ts

services/

    comments.service.ts

server/

    comments.server.ts

repositories/

    comment.repository.ts

types/

    comments.ts

Development Checklist

Before considering a feature complete:

• Data model defined
• Types created
• Repository added
• Service logic added
• Server actions implemented
• Components created
• Permissions reviewed
• Audit requirements checked
• Documentation updated
• TypeScript passes
• Build succeeds

Common Mistakes

Putting Logic in Components

Avoid:

Component

 ↓

Firestore

Skipping Permissions

Every workspace feature must consider:

• Who can view?
• Who can create?
• Who can update?
• Who can delete?

Creating Duplicate Patterns

Before adding:

• New service
• New hook
• New component

check existing examples.

Related Documentation

• Server Actions
• Working With Services
• Repository Pattern
• Extending RBAC
• Adding Firestore Collections
• Adding Components