Establishing a strict hierarchy of layers and dependency boundaries to ensure horizontal and vertical decoupling.
The FSD methodology allows creating scalable and predictable applications by dividing code into functional layers with clear isolation of responsibility.
Dependency flow is always downward: upper layers use lower ones, but never vice versa.
Each layer has clearly defined import permissions.
Each entity is a self-contained module. We use strict subfolder separation for predictability and maintainability.
api/: API definitions (RTK Query).converters/: Data mappers (DTO <-> Domain).handlers/: MSW mock handlers.mock/: Static fixtures and mocks.schema/: Zod validation schemas.slice/: Redux state management.ui/: Presentation components.types/: Interfaces and types.index.ts: Module entry point.Widgets are "smart" blocks. We separate logic (model) from the visual part (ui) to simplify testing and refactoring.
The model/ folder contains everything that makes the widget functional (Zod schemas, form configs, local types). The ui/ folder contains only display components.
1import { useAuthStore } from "@/entities/session"; // OK: feature -> entity
2import { Button } from "@/shared/ui"; // OK: feature -> shared1import { logoutFeature } from "@/features/auth"; // ERROR: entity -> feature (LAYER VIOLATION)