frontend-dev-guidelines

The best way to structure React and TypeScript projects is organizing code under features/ and components/ directories with clear subdirectories for API, hooks, components, and types. This enforces strict TypeScript conventions and consistent import aliases for scalable feature organization.

Handle data fetching in React by implementing useSuspenseQuery alongside suspense boundaries to simplify loading states. This approach wraps heavy UI components with SuspenseLoader to manage asynchronous data fetching without manual loading state tracking.

Implement code-splitting by using React.lazy and Suspense boundaries to lazy load heavy routes and components. This promotes performance optimization by wrapping dynamically imported UI sections with SuspenseLoader to defer loading until needed.

Yes, these frontend guidelines support TanStack Router by enforcing folder-based routes and createFileRoute patterns. This routing approach integrates with the React and TypeScript project structure to manage page composition effectively.

Apply consistent styling in React using MUI v7 by utilizing the sx prop for styling and ensuring proper Grid usage. This enforces a unified styling approach across component development without relying on external stylesheets.

Use useSuspenseQuery instead of standard hooks when you want to simplify loading states by leveraging React Suspense boundaries. This enforces a suspense-based data fetching pattern that integrates seamlessly with lazy-loaded components.