​
Introduction

Our codebase follows a modular architecture with two primary organizational units:
  1. UI Components: Reusable components in the modules/ui/components directory
  2. Feature Modules: Domain-specific functionality organized by feature in the modules directory

​
Module Organization

​
Core Module Structure

Modules are organized by feature and can be found in the modules directory. Each module typically includes: 
modules/
└── feature-name/
   ├── components/ # Feature-specific components
   ├── lib/ # Business logic and utilities
   ├── types/ # TypeScript types
   ├── actions.ts # Server actions
   └── route.ts # API routes (if needed)

​
Enterprise Edition (EE) Modules

Enterprise features are organized in a dedicated modules/ee directory: 
modules/
└── ee/
├── insights/
│ ├── components/
│ ├── experience/
│ └── types/
└── contacts/
├── segments/
└── components/

​
Component Organization

​
UI Component Structure

UI components are centralized in modules/ui/components and follow a consistent structure: 
modules/ui/components/
└── component-name/
   ├── index.tsx # Main component implementation
   ├── stories.tsx # Storybook stories
   └── components/ # Sub-components (if needed)

​
Component Types

  1. Base Components: Fundamental UI elements like Button, Input, Modal
  2. Composite Components: More complex components that combine base components
  3. Feature-Specific Components: Components tied to specific features

​
Feature Module Example

A feature module with its components and business logic: 
modules/survey/
├── components/
│ ├── question-form-input/
│ └── template-list/
├── editor/
│ └── components/
├── lib/
│ └── utils.ts
└── types/
└── index.ts

​
Best Practices

  1. Component Organization
    • Keep components focused and single-purpose
    • Use proper TypeScript interfaces for props
    • Implement Storybook stories for UI components
  2. Module Structure
    • Organize by feature domain
    • Separate business logic from UI components
    • Use proper type definitions
  3. Code Sharing
    • Share common utilities through the ui/lib directory
    • Maintain clear boundaries between modules
    • Use proper imports with aliases (@/modules/…)