: Keeping state as local as possible to prevent unnecessary re-renders.
Alan refactored it live:
Most React apps start with folders like components/ , hooks/ , and services/ . While this works for small projects, it falls apart in production. Alickovic recommends a where everything related to a specific domain (e.g., "authentication" or "user profiles") is grouped together. A typical feature folder might include: api/ : API request functions specific to the feature. components/ : UI components used only within this feature. hooks/ : Custom hooks for feature logic. types/ : TypeScript definitions. alan alickovic react application architecture for production
: Full TypeScript integration paired with Zod for schema validation, often in React Hook Form . 3. Scalable Data Fetching & Mocking
: Zustand for simple global state and TanStack Query for robust server state/data fetching. : Keeping state as local as possible to
A critical part of Alickovic's methodology is the ability to develop in isolation. He recommends MSW (Mock Service Worker) to mock API endpoints for prototyping, local development, and testing, ensuring the frontend isn't blocked by backend progress.
The team had been using Context for everything. One giant AppProvider that held user data, UI theme, WebSocket messages, and a forgotten boolean for whether the footer animation had played. Alickovic recommends a where everything related to a
The codebase was riddled with useEffect hooks containing raw fetch calls. Business logic was married to UI components. Alickovic’s pattern demands a strict separation of concerns. Alex implemented a dedicated API Client layer . Instead of fetching data inside a component, Alex created a service layer:
Alickovic’s approach focuses on building enterprise-ready apps that remain maintainable as they scale. The architecture emphasizes a clear separation of concerns, moving away from a flat component structure to a feature-based organization. This ensures that as your codebase grows from 10 components to 1,000, your team can still find and modify code without breaking unrelated parts of the system. 1. Feature-Based Project Structure