frontend-dev-guidelines

Structure React components using React.FC with TypeScript types, implement data fetching with useSuspenseQuery wrapped in Suspense boundaries, and organize files by feature. This ensures type safety, efficient loading states, and maintainable code across your application.

Use MUI v7 styling with the sx prop for component-level styles, maintaining consistency across your design system. This approach provides type-safe styling, responsive design support, and integrates seamlessly with React component patterns.

Optimize performance by implementing lazy loading for routes, using useMemo and useCallback to prevent unnecessary re-renders, applying Suspense boundaries for data fetching, and maintaining strict TypeScript typing to catch bugs early.

Yes, TanStack Router integrates with React/TypeScript projects to provide type-safe routing with file organization patterns. It enables feature-based directory structures and works with Suspense-based data fetching for consistent navigation architecture.

Use useSuspenseQuery when you want declarative data fetching integrated with React Suspense boundaries, enabling cleaner loading and error handling. It's ideal for building responsive applications with predictable data flow and strict loading state management.

Organize by feature using feature-based file structures, separate components and pages logically, apply consistent styling with MUI v7, use TanStack Router for routing, and enforce strict TypeScript typing. This structure scales across teams and simplifies onboarding.