Best Practices

Code Organization

Organize your codebase for maintainability and scalability.

Directory Structure

Standard Page Structure

src/app/(secure)/module/feature/
├── page.tsx                    # Entry point
├── page-content.tsx            # Main content
├── hooks/
│   ├── use-store.ts           # Store hook
│   ├── use-table-columns.tsx  # Table columns
│   └── smart-search-columns.ts # Search columns
└── components/
    ├── edit-form.tsx          # Edit form
    └── other-components.tsx    # Page-specific components

DataSource Structure

src/lib/server/ds/defs/
├── defaults.ts                 # Default configurations
├── index.ts                    # All DataSources
└── module/
    ├── EntityDS.ts            # DataSource definition
    └── index.ts               # Module exports

Type Definitions

src/lib/common/ds/types/
└── module/
    └── Entity.ts              # TypeScript interface

Server Actions

src/lib/server/actions/
└── module/
    ├── index.ts               # Action registry
    └── entity-actions.ts      # Action definitions

Naming Conventions

Files

  • Components: PascalCase (EntityForm.tsx)
  • Hooks: camelCase (use-entity-store.ts or useEntityStore.ts)
  • Types: PascalCase (Entity.ts)
  • DataSources: PascalCase with DS suffix (EntityDS.ts)

Store Aliases

PatternUse CaseExample
{module}-listList pagesusers-list
{module}-editEdit pagesuser-edit
{module}-dialogDialogsuser-dialog
{module}-comboboxLookupsuser-combobox

Functions

  • Hooks: use{Entity}Store, use{Entity}TableColumns
  • Actions: get{Entity}Stats, update{Entity}Status
  • Components: {Entity}Form, {Entity}Dialog

Module Organization

Group related features by module:

src/app/(secure)/work/
├── config/
│   ├── customers/
│   ├── projects/
│   └── timesheet-periods/
├── invoices/
└── reports/

Shared Components

Place shared components in:

src/components/
├── core/           # Core application components
├── ui/             # Reusable UI components
└── layout/         # Layout components

Type Definitions

Keep types close to their DataSources:

src/lib/common/ds/types/
├── work/
│   ├── WKCustomers.ts
│   └── WKProjects.ts
└── vm/
    └── VMSows.ts

Next Steps

Previous
Performance