Frontend Engineer

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