Tell us about FSD (Feature-Sliced Design) — what agreements were made in the team?

Feature-Sliced Design (FSD) is a methodology for organizing frontend code focused on dividing the application into functional slices (features), which improves scalability and maintainability.

In our team, we agreed on the following principles for FSD:

• Folder structure:

  • app/ — global settings and initialization.
  • pages/ — application pages, each page is a separate slice.
  • features/ — individual functionalities that can be used across different pages.
  • entities/ — business entities with their logic and state.
  • shared/ — reusable components, utilities, styles.

• Isolation principle: each slice contains its own components, logic, and styles, with minimal dependencies on others.

• Communication between slices: through well-defined interfaces and events, avoiding direct imports from deep within other slices.

• Naming: consistent, reflecting the belonging to a slice and the role of the component.

• Documentation: mandatory description of slice APIs and their public interfaces.

• Testing: each slice is covered by unit and integration tests separately.

This approach helped us improve code readability, simplify navigation, and accelerate onboarding of new developers.