frontend-dev-guidelines

Organize your React/TypeScript app using feature-based folder structure with strict aliasing for imports, functional components typed with React.FC, and code-splitting via React.lazy and Suspense boundaries. This approach ensures maintainable, scalable frontend code as your application grows.

Use useSuspenseQuery patterns with TanStack Query wrapped in SuspenseLoader components for modern data fetching. This provides optimal loading UX, automatic error handling, and eliminates manual loading state management in your React components.

Apply performance patterns including useMemo, useCallback, and React.memo to prevent unnecessary re-renders. Combined with lazy loading and code-splitting strategies, these techniques significantly reduce slow component render times and improve overall app responsiveness.

Yes. TanStack Router integrates with React/TypeScript to enable folder-based routing with consistent file organization. This provides type-safe route definitions and scalable routing patterns aligned with your feature-based project structure.

Use sx-based styling in MUI v7 for consistent, component-scoped styling across your React app. This approach integrates seamlessly with TypeScript and feature-based project organization while maintaining design system alignment.

Type components with React.FC, enforce strict aliasing for imports across your app, and maintain consistent file organization by feature. These practices catch errors at development time and make your codebase more maintainable and refactorable.