Frontend Architecture
Feature-Sliced Design layers, state management, routing, and UI libraries in the Next.js frontend.
Feature-Sliced Design
The frontend follows Feature-Sliced Design (FSD), organizing code into layers with strict import rules. Each layer may only import from layers below it.
| Layer | Purpose |
|---|---|
app/ | Bootstrap, providers, global styles, layouts |
pages/ | Route-mapped page components |
widgets/ | Composite blocks combining features and entities |
features/ | Reusable user interactions (auth, chat, calendar) |
entities/ | Business domain objects (user, event, contact) |
shared/ | Foundation utilities, UI primitives, route config |
Each slice within a layer is further divided into segments: ui/, api/, model/, lib/, and
config/. Every slice exposes a single index.ts as its public API.
State Management
The frontend uses two complementary state management strategies:
- Zustand stores manage client-side state such as UI preferences, theme, locale selection, and transient form state. Stores live in the segment of their respective feature slices.