frontend-dev-guidelines

React and TypeScript application structuring best practices involve adopting a feature-based development approach. This method provides specific guidelines for file organization, component architecture, and routing to ensure a consistent and maintainable codebase.

Modern data fetching in React is implemented using patterns like Suspense and useSuspenseQuery. These approaches optimize performance by managing asynchronous data loading effectively within your component architecture.

The best way to set up routing in a TypeScript frontend project involves using TanStack Router. This tool provides modern, type-safe routing capabilities that integrate seamlessly with React component architecture and feature-based structures.

Yes, you can use MUI v7 for styling in a feature-based React architecture. The guidelines specifically include MUI v7 styling practices to help developers maintain visual consistency and component reusability across application features.

Optimizing performance in React applications is achieved through techniques like lazy loading and Suspense. These practices reduce initial bundle sizes and defer rendering of non-critical components, significantly improving application load times.

You should adopt these frontend development guidelines when starting a new React/TypeScript project or refactoring an existing codebase. They are designed to solve problems of inconsistent workflows and lack of best practices across a development team.