# Disk structure

Below is the general directory structure for the Backstory platform, prioritizing maintainability and developer experience:

```
src/
├── components/           # Reusable UI components
│   ├── common/          # Generic components (Button, Modal, etc.)
│   ├── forms/           # Form-related components
│   ├── layout/          # Layout components (Header, Sidebar, etc.)
│   └── ui/              # MUI customizations and themed components
├── pages/               # Page-level components (route components)
│   ├── auth/
│   ├── dashboard/
│   ├── profile/
│   └── settings/
├── features/            # Feature-specific modules
│   ├── authentication/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── types/
│   ├── user-management/
│   └── analytics/
├── hooks/               # Custom React hooks
│   ├── api/            # API-related hooks
│   ├── ui/             # UI state hooks
│   └── utils/          # Utility hooks
├── services/            # API calls and external services
│   ├── api/
│   ├── auth/
│   └── storage/
├── store/               # State management (Redux/Zustand/Context)
│   ├── slices/         # If using Redux Toolkit
│   ├── providers/      # Context providers
│   └── types/
├── utils/               # Pure utility functions
│   ├── constants/
│   ├── helpers/
│   └── validators/
├── styles/              # Global styles and theme
│   ├── theme/          # MUI theme customization
│   ├── globals.css
│   └── variables.css
├── types/               # TypeScript type definitions
│   ├── api/
│   ├── common/
│   └── components/
├── assets/              # Static assets
│   ├── images/
│   ├── icons/
│   └── fonts/
├── config/              # Configuration files
│   ├── env.ts
│   ├── routes.ts
│   └── constants.ts
└── __tests__/           # Test files mirroring src structure
    ├── components/
    ├── pages/
    └── utils/
```

# Key organizational principles:

1. Feature-Based Architecture
    The features/ directory groups related functionality together, making it easy to find everything related to a specific feature in one place.

2. Clear Separation of Concerns

```
components/ - Pure UI components
pages/ - Route-level components
services/ - Data fetching and external APIs
hooks/ - Reusable logic
utils/ - Pure functions
```

3. Scalable Component Organization
    Components are organized by purpose rather than alphabetically, with subcategories that make sense as the app grows.

4. Centralized Configuration
    All app configuration lives in config/, making it easy to manage environment variables, routes, and constants.
5. Type Safety First
    Dedicated types/ directory with clear categorization helps maintain type definitions as the app scales.

# Naming Conventions

* Use PascalCase for components (UserProfile.tsx)
* Use camelCase for utilities and hooks (formatDate.ts, useLocalStorage.ts)
* Use kebab-case for directories (user-management/)

# Index Files
Create index.ts files in major directories to enable clean imports:

```typescript
// components/common/index.ts
export { Button } from './Button';
export { Modal } from './Modal';

// Import usage
import { Button, Modal } from '@/components/common';
```

# Path Aliases
Configure path aliases in your build tool:

```typescript
// Instead of: ../../../../components/common/Button
import { Button } from '@/components/common/Button';
```

This structure scales well while keeping related code co-located and maintaining clear boundaries between different types of functionality.