Skip to content
SlideSpeak Docs

Feature Based Organization

We organize code by feature rather than by technical layer (components, utils, services). This approach scales better and makes changes easier by keeping code scoped to specific features. When working on a feature, you only need to navigate within that feature’s directory instead of searching across the entire codebase.

Frontend Structure

Section titled “Frontend Structure”

Features live in src/features/ and contain everything related to that feature: components, state, hooks, actions, and types.

Example: Outline Generation Feature

Section titled “Example: Outline Generation Feature”
  • Directorysrc/
    • Directoryfeatures/
      • Directoryoutline/
        • Directorygenerate/
          • Directorycomponents/
            • Directorychat/
              • …
            • Directoryscreens/
              • …
            • Directorysettings/
              • …
          • Directoryhooks/
            • use-create-presentation.ts
            • use-character-limit.ts
          • Directorystate/
            • outline-generate-store.ts
            • Directoryactions/
              • chat.ts
              • generate.ts
              • settings.ts
          • config.ts
          • Directoryconstants/
            • …

All imports from this feature use the feature path prefix:

import { useOutlineGenerateStore } from '@/features/outline/generate/state/outline-generate-store';
import { ChatScreen } from '@/features/outline/generate/components/screens/chat-screen';

Example: Presentation Editor Feature

Section titled “Example: Presentation Editor Feature”
  • Directorysrc/
    • Directoryfeatures/
      • Directorypresentation/
        • Directoryedit/
          • Directorycomponents/
            • …
          • Directoryhooks/
            • …
          • Directorypage/
            • Directoryassistant/
              • …
            • Directoryfloating-bar/
              • …
            • Directoryside-bar/
              • …
            • Directorytop-bar/
              • …
          • Directorystate/
            • editor-store.ts
            • Directoryactions/
              • text.ts
              • shape.ts
              • slide.ts
          • Directoryhelpers/
            • …

Backend Structure

Section titled “Backend Structure”

Backend features are organized as top-level packages in app/. Each feature contains its API routes, business logic, workflows, and related code.

Example: Document Ingestion Feature

Section titled “Example: Document Ingestion Feature”
  • Directoryapp/
    • Directorydocument/
      • Directoryingestion/
        • api.py
        • config.py
        • models.py
        • workflow.py
        • validation.py
        • exceptions.py
        • Directorytext/
          • …

The router registry automatically discovers api.py files and registers them:

router = APIRouter(prefix="/document/ingestion", tags=["Document, Ingestion"])
registry.register(router)

Example: Presentation Generation Feature

Section titled “Example: Presentation Generation Feature”
  • Directoryapp/
    • Directorypresentation/
      • Directorygeneration/
        • api.py
        • core.py
        • Directoryai/
          • …
        • Directorylayer/
          • …
        • Directoryworkflows/
          • …
        • tasks.py

Key Principles

Section titled “Key Principles”
  • Self-contained: Each feature contains everything it needs (components, state, API routes, business logic)
  • Clear boundaries: Features import from each other only when necessary, avoiding circular dependencies
  • Scoped changes: When modifying a feature, you work within its directory, reducing the chance of affecting unrelated code
  • Easy to find: Code location follows feature names, making it intuitive to locate functionality