frontend-dev-guidelines

Organize your React TypeScript codebase using feature-oriented file structure with dedicated feature folders, separate component directories, and strict typing conventions. This approach improves scalability, reduces merge conflicts, and ensures consistent patterns across components, pages, data fetching, styling, and routing layers.

Use Suspense-based data fetching by leveraging useSuspenseQuery from TanStack Query to handle asynchronous data loading with built-in error boundaries and loading states. This pattern eliminates callback hell, simplifies component logic, and provides automatic request management with proper TypeScript typing.

Apply React.memo, useMemo, and useCallback hooks alongside debouncing techniques to prevent unnecessary re-renders. Combined with Suspense-based lazy loading and proper component structure, these patterns significantly reduce computational overhead and improve application responsiveness.

Use MUI v7's sx prop for component styling with full TypeScript support, maintaining consistent theming and responsive design patterns. This approach ensures type-safe styling, reduces CSS-in-JS boilerplate, and integrates seamlessly with your feature-oriented React architecture.

TanStack Router provides full TypeScript support for type-safe route definitions, navigation, and parameter passing in React applications. This eliminates routing-related runtime errors and integrates cleanly with your React component hierarchy and lazy-loaded features.

Follow a checklist covering component creation with useSuspenseQuery, proper file organization under feature folders, MUI v7 styling with sx, TanStack Router navigation, and strict TypeScript typing. These guidelines ensure consistency, performance, and maintainability from initial development.