Feature-Sliced Design Architecture in React with TypeScript

Feature-Sliced Design Architecture in React with TypeScript

Modern front-end development thrives on scalability and maintainability, especially for complex applications. Feature-Sliced Design (FSD) offers a structured architecture that enhances these qualities. In this article, we will explore how to implement Feature-Sliced Design in a React project using TypeScript.

What is Feature-Sliced Design?

Feature-sliced design is an architectural methodology for front-end applications. It emphasizes dividing an application into meaningful slices based on its functionality and purpose. This approach encourages modularization, readability, and reusability, solving common scaling issues in React projects.

Key principles of FSD include:

1. Feature-First Thinking: Organize code by features rather than by technical concerns (e.g., “components,” “utils,” “hooks”).
2. Separation of Layers: Structure code within each feature into layers like entities, features, and shared modules.
3. Explicit Dependencies: Ensure clear dependencies between layers and features.

Core Layers in FSD

FSD divides the application into several layers:

1. App Layer: Handles application-wide concerns like routing, theming, and state management providers.
2. Processes: Business workflows that combine multiple features, such as authentication flows.
3. Pages: Feature aggregates representing a single route or a complete screen.
4. Features: Encapsulates a specific, independent piece of functionality (e.g., a search bar or user profile).
5. Entities: Domain-level components or state representations (e.g., User, Product).
6. Shared: Reusable utilities, hooks, components, or constants used across the app.

Setting Up FSD in a React Project

Here is an example directory structure for a Feature-Sliced Design architecture:

/src
  /app
    index.tsx
    App.tsx
    /providers
  /processes
    /auth
      index.ts
  /pages
    /home
      index.tsx
      HomePage.tsx
    /product
      index.tsx
      ProductPage.tsx
  /features
    /search
      index.ts
      SearchBar.tsx
      SearchBar.module.css
    /cart
      index.ts
      Cart.tsx
  /entities
    /user
      User.ts
      UserModel.ts
    /product
      Product.tsx
      ProductModel.ts
  /shared
    /ui
      Button.tsx
      Input.tsx
    /lib
      api.ts
      helpers.ts

Implementing a Feature: Search Bar

Let’s build a SearchBar feature as an example. This feature includes a component, styles, and a service.

1. Component

features/search/SearchBar.tsx

import React, { useState } from 'react';
import styles from './SearchBar.module.css';

interface SearchBarProps {
  onSearch: (query: string) => void;
}
export const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
  const [query, setQuery] = useState('');
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };
  const handleSearch = () => {
    onSearch(query);
  };
  return (
    <div className={styles.searchBar}>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="Search..."
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

2. Styles

features/search/SearchBar.module.css

.searchBar {
  display: flex;
  gap: 8px;
}
input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 12px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

3. Export

features/search/index.ts

export { SearchBar } from './SearchBar';

Benefits of FSD

• Scalability: Each feature is self-contained, making it easy to add or modify functionality.
• Maintainability: A clear structure ensures teams can navigate the codebase efficiently.
• Reusability: Shared components and utilities promote code reuse across the app.

Conclusion

Feature-sliced design empowers React developers to build scalable and maintainable applications. By organizing code into meaningful slices and adhering to FSD principles, teams can achieve better modularity and clarity. Start integrating FSD into your projects and experience the benefits of a well-structured architecture.