112 lines
3.9 KiB
Markdown
112 lines
3.9 KiB
Markdown
# 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. |