frontend-dev-guidelines

Organize code using a features-based directory structure with `features/` containing subdirectories for `api/`, `components/`, `hooks/`, `helpers/`, and `types/`. This approach isolates functionality, improves maintainability, and scales as your codebase grows while supporting import aliases for cleaner imports.

Use `useSuspenseQuery` with React Suspense for declarative data fetching that prevents layout shifts and loading spinners. Combine with lazy loading via `React.lazy()` to defer component rendering until data arrives, improving perceived performance and user experience.

Use the `sx` prop for styling with MUI v7, which supports responsive grids and component-level customization. This approach ensures consistent styling across your application while maintaining type safety with TypeScript.

Yes, TanStack Router provides type-safe, folder-based routing that integrates seamlessly with TypeScript. It enables compile-time route validation and better IDE support compared to traditional React routing solutions.

Use `React.FC` (Functional Component) with TypeScript for strongly-typed component props and better IntelliSense. This pattern aligns with modern React best practices and ensures type safety throughout your component hierarchy.

Feature-based organization co-locates related logic—components, hooks, types, and API calls—reducing imports across folders and making features self-contained. This structure simplifies refactoring, improves team collaboration, and reduces bugs from scattered dependencies.