frontend-architecture

Create a `modules/{feature}/` directory per product capability containing pages, components, hooks, stores, services, and an `index.ts` barrel. Other modules and the routing layer import only from that barrel, never from internal paths.

Server state is data the API owns, like fetched entities and lists, and belongs in a query/cache layer such as TanStack Query or RTK Query. UI state is client-only, like open dialogs or filters, and belongs in a store such as Zustand or Redux Toolkit.

Both map onto the one-store-unit-per-module rule. Zustand uses a `useFeatureUiStore` hook in `{feature}.store.ts`, while Redux Toolkit uses a slice in `{feature}.slice.ts` registered in `shared/store/`. Pick one per project and stay consistent.

Yes. Route files in `src/app/` stay thin and only mount page components imported from module barrels. Server Components are the default, with interactive leaves marked `"use client"` and providers placed in a client boundary.

Yes. Pages become screens using the same directory pattern, routing uses Expo Router or React Navigation with thin screen files, and the query layer, client store, and typed API client work unchanged. Tamagui is recommended for shared web and native styling.

A component moves to `shared/components/` only when a second module consumes it. Components start in the narrowest scope, such as a page's local `components/` folder, and are promoted deliberately rather than pre-placed.