Frontend Development Guidelines

Structure scalable React projects by separating domain logic into a features/ directory and shared UI into a components/ directory, applying feature-driven architecture to reduce architectural drift and simplify team onboarding.

Implement Suspense-based data fetching by wrapping lazy-loaded components in Suspense boundaries to improve UX and performance, standardizing centralized API service patterns to simplify data access and mutations across your React application.

Set up routing and styling by standardizing your React application with TanStack Router for navigation and MUI for styling, applying consistent performance and design guidelines across all feature-driven UI components.

Yes, these React frontend patterns require strict TypeScript standards and import alias usage to enforce type-safe contracts, simplify data access, and enable consistent, safe, and scalable UI development across the project.

Separate domain logic from shared UI when scaling React applications, placing domain-specific modules in a features/ directory and reusable UI elements in a components/ directory to maintain a clean, modular architecture.