Typorithm · medium

Feature-Sliced Design

feature-slicedarchitecturefsdlayersimport-direction

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Feature-Sliced Design

App Patterns

Feature-Sliced Design organizes a frontend into layers — app > pages > widgets > features > entities > shared — with a strict rule: a layer may only import from layers below it. A feature can use an entity, but an entity must never import a feature.

FSD arranges code into ordered layers: app, pages, widgets, features, entities, and shared, from the most app-specific at the top to the most reusable at the bottom.

The defining rule is import direction: a layer may import only from the layers beneath it. So a feature can import an entity, but an entity must never import a feature.

This one-way dependency flow keeps lower layers reusable and independent, while higher layers compose them into screens — a structure popular in modern frontend apps.

Layers: app > pages > widgets > features > entities > shared.

A layer may import only from layers below it.

Features may use entities; entities must not use features.

// FSD layers (top imports down only):
// app > pages > widgets > features > entities > shared
import { User } from "entities/user"; // feature -> entity: OK

export function followUser(user: User) {
  // entities/user must NOT import from features/follow (upward)
}

Read the implementation

Connect each part of the code to the concept before you type.

1. The layer hierarchy

FSD stacks layers from app at the top to shared at the bottom; this order defines what may import what.

// app > pages > widgets > features > entities > shared

2. Downward import

A feature importing from entities is allowed: layers may only import from layers below them.

import { User } from "entities/user"; // feature -> entity: OK

3. A feature slice

followUser lives in the features layer and builds on the User entity from a lower layer.

export function followUser(user: User) {

4. The strict rule

An entity importing a feature would be an upward import, which FSD forbids.

// entities/user must NOT import from features/follow (upward)

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.