frontend-dev-guidelines

Organizing React and TypeScript projects uses a feature-based file structure to group components, routes, and logic by domain rather than file type. This approach improves maintainability, speeds up onboarding, and ensures consistent patterns across cross-team collaboration.

Implementing Suspense and lazy loading in React involves using useSuspenseQuery for data fetching and wrapping route components in Suspense boundaries. This standardizes data fetching patterns, defers loading non-critical assets, and improves overall frontend performance.

Yes, these frontend guidelines specifically support styling with MUI v7 and routing with TanStack Router. Integrating these libraries promotes a scalable frontend architecture by providing standardized component design and type-safe routing templates.

Standardizing component design and routing requires applying consistent templates and tooling references like folder aliases across your codebase. Establishing a standardized React and TypeScript development guide ensures all team members follow identical patterns for creating components and pages.

A feature-based folder structure improves React onboarding by grouping all related files—components, styles, and data fetching logic—into single feature directories. This reduces context switching, makes code boundaries clear, and helps new developers locate relevant code faster.

Apply standardized templates for frontend architecture when struggling with inconsistent patterns, slow onboarding, or brittle codebases. Using clear templates and example implementations ensures consistency and performance across all frontend work, especially during cross-team collaboration.