frontend-engineer

Feature-based modules organize your React codebase by business domain rather than by file type. Each feature contains its own pages, state management, gateways, and tests, improving scalability and maintainability. This approach works well with TanStack Router and Zustand for managing state within feature boundaries.

The gateway pattern separates HTTP communication, business logic, and testability by combining an interface, HTTP implementation, and fake implementation. This decoupling lets you test components without real API calls, swap backends easily, and maintain clean separation of concerns across your React application.

Zustand stores handle local feature state while TanStack Query manages server state and caching. TanStack Router handles navigation. Together they create a cohesive state management layer: Zustand for UI state, Query for async data, and Router for navigation logic, reducing complexity in React components.

Yes, the gateway pattern pairs naturally with Context API. Wrap your feature module with a Context provider that injects gateway instances. Components consume the context to access gateways without direct imports, enabling flexible testing and runtime gateway substitution.

Vitest, React Testing Library, and Playwright form the testing stack for feature modules. Vitest handles unit tests, React Testing Library tests component behavior, and Playwright tests end-to-end workflows. The gateway pattern's fake implementations enable isolated unit testing without external dependencies.

Use TanStack Query's built-in caching and request deduplication to prevent redundant API calls. Pair with Zustand for granular state updates that minimize component re-renders. TanStack Router's code splitting and lazy loading further reduce bundle size and improve load times.