frontend-dev-guidelines

Organize your React/TypeScript project using a features-based folder structure that separates feature directories from shared components, apply import aliases for cleaner paths, and follow naming conventions for consistency. This approach reduces import depth, improves maintainability, and scales as your codebase grows.

Use useSuspenseQuery with SuspenseLoader boundaries to fetch data efficiently without layout shifts. This pattern combines TanStack Query's data management with React Suspense, enabling declarative loading states and cleaner component code compared to traditional useEffect patterns.

Use the MUI sx styling prop for inline responsive styles in your React.FC components, combining sx with TypeScript's strict typing for type-safe, maintainable styling. This approach keeps styles colocated with components while supporting theme tokens and media queries.

Yes. Use React.lazy for code-splitting heavy components and wrap them in SuspenseLoader boundaries to defer loading until needed. Combined with TanStack Router's folder-based routing, this reduces initial bundle size and improves time-to-interactive for users.

TanStack Router with folder-based file organization provides type-safe, scalable routing for React/TypeScript apps. This pattern integrates with feature-based project structure, supports nested routes, and works seamlessly with Suspense-based data fetching and lazy-loaded components.

Yes. Enforce strict TypeScript typings with React.FC<Props> pattern to catch type errors at development time, improve IDE autocomplete, and ensure maintainability. Combined with useSuspenseQuery's typed queries, this prevents runtime errors in data fetching and component props.