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.tsoruseEntityStore.ts) - Types: PascalCase (
Entity.ts) - DataSources: PascalCase with DS suffix (
EntityDS.ts)
Store Aliases
| Pattern | Use Case | Example |
|---|---|---|
{module}-list | List pages | users-list |
{module}-edit | Edit pages | user-edit |
{module}-dialog | Dialogs | user-dialog |
{module}-combobox | Lookups | user-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
- Best Practices Overview - General best practices
- Performance - Performance optimization