Frontend Architecture Rules (SaaS Standard)

Core Principles

• Use server-first architecture; prefer server components unless client-side behavior is required.
• Maintain strict separation of concerns across UI, business logic, and data layers.
• Ensure all code is scalable, modular, and maintainable.

Data Fetching Rules

• Do not call fetch() directly inside components.
• All API communication must be handled through a centralized HTTP client.
• API logic must exist only in the services layer.
• UI components must access data only through hooks.

Component Rules

• Each component must have a single responsibility.
• Component files must not exceed 150 lines.
• Target component size should be between 50–80 lines.
• Large components must be split into smaller reusable components.

State Management Rules

• Use a centralized state management solution (e.g., Zustand or Redux Toolkit).
• Do not use useContext for global state management.
• Keep global state minimal and domain-specific.

Forms & Validation Rules

• All forms must use a structured form library (e.g., React Hook Form).
• All validation must be schema-based (e.g., Zod).
• Validation schemas must be reusable and stored separately.

TypeScript Rules

• Strict TypeScript is mandatory.
• Do not use any type.
• All API responses must use a generic structure (e.g., ApiResponse<T>).
• Types must be defined and reused across the application.

Routing Rules

• All routes must be centralized in a constants file.
• Do not hardcode route paths inside components or navigation logic.

Enums & Constants Rules

• Do not hardcode strings such as roles, statuses, or API identifiers.
• All enums must be defined in a centralized location.
• Reuse enums across all features.

Directory Structure Rules

• Follow feature-based architecture:

src/  features/    [feature]/      components/      services/      hooks/      types/      schemas/
  components/ui/  store/  lib/  constants/  types/enums/

Layer Responsibilities

• UI layer must handle rendering only.
• Hooks must handle business logic and data orchestration.
• Services must handle API communication.
• Store must handle global state only.
• Schemas must handle validation.
• Types must define contracts and interfaces.

Prohibited Practices

• Do not call APIs directly inside UI components.
• Do not use fetch() directly.
• Do not hardcode routes or static strings.
• Do not create large monolithic components.
• Do not use any in TypeScript.

Architecture Philosophy

• Build systems, not pages.
• Prioritize consistency over flexibility.
• Ensure every module is reusable and replaceable.
• Maintain clear boundaries between layers.

Compatibility

• This rule set is designed for modern frontend stacks (React, Next.js, TanStack, etc.).
• Aligns with standardized rule-sharing ecosystems like Airuleshub .