Frontend Development

New Feature Checklist

• Create features/{feature-name}/ directory
• Subdirectories: api/, components/, hooks/, helpers/, types/
• API service file: api/{feature}Api.ts
• TypeScript types in types/
• Route in routes/{feature-name}/index.tsx
• Lazy load feature components with Suspense boundaries
• Export public API from feature index.ts

Data Fetching Pattern

// Preferred: useSuspenseQuery (no loading state needed in component)
const { data } = useSuspenseQuery({
  queryKey: ['resource', id],
  queryFn: () => fetchResource(id),
});

// Wrap page/component in Suspense boundary
<Suspense fallback={<SuspenseLoader />}>
  <MyComponent />
</Suspense>

File Size Rule

Keep files under 200 lines. Split by:

• Component logic vs presentation
• API layer vs UI layer
• Shared hooks vs component-local state

Performance

• Lazy load heavy components with React.lazy
• Memoize expensive computations with useMemo
• Stabilize callbacks with useCallback
• Avoid prop drilling — use context or feature state

References

• references/component-patterns.md — Component architecture
• references/data-fetching.md — TanStack Query patterns
• references/routing.md — TanStack Router setup
• references/styling.md — MUI v7 + theming
• references/performance.md — Optimization techniques
• references/typescript.md — TypeScript best practices