# Project Architecture

This project uses Expo Router and follows a route-first + feature-module structure.

## Directory Design

- `app/`: Routing layer only (Expo Router pages and layouts).
- `features/`: Business modules grouped by domain.
- `providers/`: App-level providers and bootstrap orchestration.
- `components/`: Reusable presentational components.
- `hooks/`: Shared generic hooks (cross-feature).
- `constants/`: Shared constants and theme tokens.

## Current Module Split

- `app/_layout.tsx`
  - Root navigation composition.
  - Theme provider and route stack config.
  - App bootstrap provider wiring.

- `app/index.tsx` and `app/modal.tsx`
  - Route shells only.
  - Delegate screen implementation to `features/*/screens`.

- `providers/app-bootstrap-provider.tsx`
  - Central app bootstrap orchestration.
  - Triggers feature bootstrap hooks.

- `features/im/openim-bootstrap.ts`
  - OpenIM SDK initialization and listener registration.
  - One-time initialization guard.
  - Local data directory creation and reuse.

- `features/im/hooks/use-openim-bootstrap.ts`
  - React lifecycle bridge for IM bootstrap.

- `features/home/screens/home-screen.tsx`
  - Home page UI implementation.

- `features/system/screens/modal-screen.tsx`
  - Modal page UI implementation.

## Why This Structure

- Keeps routing files focused on navigation.
- Moves SDK side effects out of render paths.
- Makes IM bootstrap testable and reusable.
- Scales better when adding `features/chat`, `features/contact`, and `features/conversation`.

## Next Suggested Refactors

1. Move IM API wrappers into `features/im/services/`.
2. Add `features/chat/hooks/use-chat-list.ts` and `features/chat/hooks/use-messages.ts`.
3. Add route groups when chat modules are introduced, for example `app/(chat)` and `app/(auth)`.