Frontend Engineer

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.

When to Use

• Creating new components or pages
• Building new features
• Fetching data with TanStack Query
• Setting up routing with TanStack Router
• Styling components
• Performance optimization
• Organizing frontend code
• TypeScript best practices

Quick Start

New Component Checklist

• [ ] Use React.FC<Props> pattern with TypeScript
• [ ] Lazy load if heavy component: React.lazy(() => import())
• [ ] Wrap in <SuspenseLoader> for loading states
• [ ] Use useSuspenseQuery for data fetching
• [ ] Import aliases: @/, ~types, ~components, ~features
• [ ] Styles: Inline if <100 lines, separate file if >100 lines
• [ ] Use useCallback for event handlers passed to children
• [ ] Default export at bottom
• [ ] No early returns with loading spinners
• [ ] Use notification system for user feedback

New Feature Checklist

• [ ] Create features/{feature-name}/ directory
• [ ] Create subdirectories: api/, components/, hooks/, helpers/, types/
• [ ] Create API service file: api/{feature}Api.ts
• [ ] Set up TypeScript types in types/
• [ ] Create route in routes/{feature-name}/index.tsx
• [ ] Lazy load feature components
• [ ] Use Suspense boundaries
• [ ] Export public API from feature index.ts

Core Principles

1. Lazy Load Everything Heavy: Routes, DataGrid, charts, editors
2. Suspense for Loading: Use SuspenseLoader, not early returns
3. useSuspenseQuery: Primary data fetching pattern for new code
4. Features are Organized: api/, components/, hooks/, helpers/ subdirs
5. Styles Based on Size: <100 inline, >100 separate
6. Import Aliases: Use @/, ~types, ~components, ~features
7. No Early Returns: Prevents layout shift
8. TypeScript First: Strict mode, no any type

Implementation Workflow

When implementing frontend code:

• Check for existing workflow patterns (spec-first, TDD, etc.) and follow them
• Ensure code passes CI checks (types, tests, lint) before committing
• Group related changes with tests in atomic commits

References

For detailed guidance, see:

• references/component-patterns.md - Modern React component patterns
• references/data-fetching.md - Suspense-based data fetching
• references/file-organization.md - Feature-based organization
• references/styling-guide.md - Styling patterns and best practices
• references/routing-guide.md - TanStack Router patterns
• references/performance.md - Performance optimization
• references/typescript-standards.md - TypeScript best practices