frontend-dev-guidelines

The best way to structure a React and TypeScript project is using feature-based organization, grouping files into features/{feature}/api, components, hooks, helpers, and types directories to ensure consistent architecture and maintainability.

To implement Suspense-based loading, create components using React.FC, lazy-load heavy components, and wrap them in a Suspense boundary to handle loading states gracefully while enforcing strict TypeScript usage.

Yes, TanStack Query supports Suspense for data fetching by utilizing the useSuspenseQuery hook alongside cache-first strategies to manage asynchronous data loading in React applications.

Yes, you can use TanStack Router for per-route lazy loading, allowing you to split your route definitions and load route components dynamically to improve initial application performance.

The recommended approach for styling React components with MUI v7 is using the sx prop and theme-aware styling to maintain visual consistency and leverage the theme configuration across the application.

You should use alias imports like @/ and ~components in a TypeScript project to establish clean imports, avoid deeply nested relative paths, and simplify file referencing across feature directories.