Feature Components

Feature components represent application-specific functionality.

Unlike UI components, feature components understand:

• Business context
• Application workflows
• User interactions

They are organized by feature.

Location:

src/components/

Feature Component Structure

The general pattern:

Feature

├── Components
├── Hooks
├── Actions
├── Services
└── Types

Example:

Projects

components/projects/

hooks/useProject.ts

actions/project.ts

services/project/

types/project.ts

Component Responsibilities

Feature components should handle:

• Displaying data
• User interactions
• Calling hooks
• Managing local UI state

They should not handle:

• Direct Firestore queries
• Authentication logic
• Complex business rules

Dashboard Components

Location:

src/components/dashboard/

Dashboard components provide the application shell.

Important components:

DashboardSidebar.tsx

DashboardNavbar.tsx

WorkspaceSwitcher.tsx

UserMenu.tsx

DashboardSidebar

Responsible for:

• Main navigation
• Dashboard layout navigation
• Feature access links

Example navigation areas:

Dashboard

Projects

Members

Invitations

Activity

Settings

WorkspaceSwitcher

Responsible for:

• Displaying current workspace
• Switching between workspaces

It works with workspace context provided by:

WorkspaceProvider

Authentication Components

Location:

src/components/auth/

Authentication components protect application access.

Important components:

ProtectedRoute.tsx

WorkspaceGate.tsx

EmailVerificationGuard.tsx

RoleGuard.tsx

ProtectedRoute

Ensures:

Authenticated User
        |
        ↓
Protected Content

Unauthenticated users are redirected.

EmailVerificationGuard

Controls access based on email verification status.

Flow:

Login

 ↓

Email Verified?

 ↓

Dashboard Access

WorkspaceGate

Ensures users have workspace access.

Flow:

Authenticated User

        ↓

Workspace Exists?

        |

        ├── Yes → Dashboard

        |

        └── No → Onboarding

RoleGuard

Controls UI visibility based on permissions.

Example:

OWNER

ADMIN

MEMBER

Important:

UI guards improve user experience.

They do not replace:

• Server validation
• Firestore security rules

Member Components

Location:

src/components/members/

Used for workspace member management.

Important components:

MembersTable.tsx

MemberRow.tsx

MemberActions.tsx

MemberRoleBadge.tsx

MembersTable

Displays:

• Workspace users
• Roles
• Membership status

MemberActions

Handles actions such as:

• Changing roles
• Removing members

Actions must still be validated server-side.

Invitation Components

Location:

src/components/invites/

Used for workspace invitation workflows.

Important components:

InviteDialog.tsx

InviteTable.tsx

InviteActions.tsx

InviteDialog

Responsible for:

• Collecting invite information
• Triggering invitation actions

InviteTable

Displays:

• Pending invitations
• Status
• Available actions

Project Components

Location:

src/components/projects/

Project components handle project-related interfaces.

Important components:

ProjectList.tsx

ProjectCard.tsx

ProjectDialog.tsx

ProjectList

Displays workspace projects.

ProjectCard

Displays project summaries.

Typical usage:

Project List

    ↓

Project Card

    ↓

Project Details

Settings Components

Location:

src/components/settings/

Used for:

• User settings
• Workspace settings
• Account management

Examples:

ProfileForm.tsx

WorkspaceForm.tsx

DangerZoneCard.tsx

Component Data Flow

Recommended:

Component

    ↓

Hook

    ↓

Server Action

    ↓

Service

    ↓

Repository

    ↓

Firestore

Example:

MembersTable

    ↓

useMembers()

    ↓

member action

    ↓

team service

    ↓

membership repository

Adding a New Feature Component

Recommended steps:

1. Create Feature Folder

Example:

src/components/new-feature/

2. Add Components

Example:

NewFeatureCard.tsx

NewFeatureDialog.tsx

3. Add Supporting Logic

Related files:

src/actions/

src/services/

src/server/

src/types/

4. Connect Through Existing Patterns

Follow:

• Server actions
• Services
• Repository layer
• Type definitions

Common Mistakes

Avoid:

Direct Database Access

Incorrect:

Component

 ↓

Firestore

Correct:

Component

 ↓

Server Action

 ↓

Service

 ↓

Repository

Large Components

Avoid:

One 1000-line component

Prefer:

Small focused components

Related Documentation

• Components Overview
• UI System
• Creating Components
• Server Actions
• Working With Services
• Repository Pattern