# saiphoenix/expo-layered-crud architecture

> Architecture diagram of the GitHub repository saiphoenix/expo-layered-crud, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/saiphoenix/expo-layered-crud
- Repository: https://github.com/saiphoenix/expo-layered-crud

## Overview

Expo Layered CRUD is a React Native product-catalog app organized around vertical feature slices. Users browse and search a paginated catalog, open cached product details, and create, edit, or delete products; the app also provides a dashboard, settings, theme controls, and a UI sandbox. Catalog reads flow through React Query, a service layer, and a shared HTTP client to DummyJSON. Several feature hooks and screens were not sampled, so their mutation links are shown only as unverified where needed.

Main entry points: [`src/modules/catalog/data/product.queries.ts`](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/product.queries.ts) (Product queries), [`src/modules/catalog/features/product-detail/product-detail-screen.tsx`](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/product-detail/product-detail-screen.tsx) (Product detail), [`src/app/(tabs)/_layout.tsx`](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/app/(tabs)/_layout.tsx) (Tab navigation), [`src/modules/catalog/features/product-list/product-list-screen.tsx`](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/product-list/product-list-screen.tsx) (Product list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_router["Expo Router screens<br/>[_layout.tsx]"]
  node_tabs["Tab navigation<br/>[_layout.tsx]"]
  node_catalog_routes["Catalog routes<br/>[catalog.routes.ts]"]
end

subgraph group_catalog["Catalog features"]
  node_product_list["Product list"]
  node_product_detail["Product detail"]
  node_create_product["Create product"]
  node_edit_product["Edit product"]
  node_delete_product["Delete product"]
  node_product_form["Product form<br/>[product-form.tsx]"]
  node_top_rated["Top rated"]
end

subgraph group_data["Data and API"]
  node_queries["Product queries<br/>[product.queries.ts]"]
  node_service["Products service"]
  node_schema["Product schemas<br/>[product.schema.ts]"]
  node_http["HTTP client<br/>[http-client.ts]"]
  node_query_runtime["Query runtime<br/>[query-client.ts]"]
end

subgraph group_experience["App experience"]
  node_home["Home dashboard<br/>[home-screen.tsx]"]
  node_settings["App settings"]
  node_sandbox["UI sandbox"]
  node_providers["App providers<br/>[app-providers.tsx]"]
  node_screen_states["Screen states<br/>[screen-states.tsx]"]
end

node_user(("User"))
node_dummyjson{{"DummyJSON API"}}

node_user -->|"opens screens"| node_router
node_router -->|"shows tabs"| node_tabs
node_tabs -->|"opens dashboard"| node_home
node_tabs -->|"opens catalog"| node_product_list
node_tabs -->|"opens settings"| node_settings
node_settings -->|"opens sandbox"| node_sandbox
node_product_list -->|"navigates routes"| node_catalog_routes
node_product_detail -->|"navigates routes"| node_catalog_routes
node_product_list -->|"loads pages"| node_queries
node_product_detail -->|"loads details"| node_queries
node_home -->|"loads top rated"| node_queries
node_create_product -.->|"renders form"| node_product_form
node_edit_product -.->|"renders form"| node_product_form
node_product_detail -->|"opens delete"| node_delete_product
node_queries -->|"fetches data"| node_service
node_service -->|"validates responses"| node_schema
node_service -->|"sends requests"| node_http
node_http -->|"calls API"| node_dummyjson
node_top_rated -->|"loads products"| node_queries
node_providers -->|"sets up queries"| node_query_runtime
node_product_list -->|"renders states"| node_screen_states
node_product_detail -->|"renders states"| node_screen_states

click node_router "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/app/_layout.tsx"
click node_tabs "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/app/(tabs)/_layout.tsx"
click node_catalog_routes "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/catalog.routes.ts"
click node_home "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/home/features/dashboard/home-screen.tsx"
click node_settings "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/settings/features/app-settings/settings-screen.tsx"
click node_sandbox "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/settings/features/ui-sandbox/ui-sandbox-screen.tsx"
click node_product_list "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/product-list/product-list-screen.tsx"
click node_product_detail "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/product-detail/product-detail-screen.tsx"
click node_create_product "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/create-product/create-product-screen.tsx"
click node_edit_product "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/edit-product/edit-product-screen.tsx"
click node_delete_product "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/delete-product/delete-product-dialog.tsx"
click node_product_form "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/components/product-form.tsx"
click node_top_rated "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/top-rated/top-rated-carousel.tsx"
click node_queries "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/product.queries.ts"
click node_service "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/products.service.ts"
click node_schema "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/product.schema.ts"
click node_http "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/api/http-client.ts"
click node_query_runtime "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/lib/query-client.ts"
click node_providers "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/providers/app-providers.tsx"
click node_screen_states "https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/components/screen-states.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_router,node_tabs,node_catalog_routes,node_user toneBlue
class node_product_list,node_product_detail,node_create_product,node_edit_product,node_delete_product,node_product_form,node_top_rated toneAmber
class node_queries,node_service,node_schema,node_http,node_query_runtime,node_dummyjson toneMint
class node_home,node_settings,node_sandbox,node_providers,node_screen_states toneRose
```

## Components

### App navigation

- [Expo Router screens](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/app/_layout.tsx): `src/app/_layout.tsx`
- [Tab navigation](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/app/(tabs)/_layout.tsx): `src/app/(tabs)/_layout.tsx`
- [Catalog routes](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/catalog.routes.ts): `src/modules/catalog/catalog.routes.ts`

### Catalog features

- [Product list](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/product-list/product-list-screen.tsx): `src/modules/catalog/features/product-list/product-list-screen.tsx`
- [Product detail](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/product-detail/product-detail-screen.tsx): `src/modules/catalog/features/product-detail/product-detail-screen.tsx`
- [Create product](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/create-product/create-product-screen.tsx): `src/modules/catalog/features/create-product/create-product-screen.tsx`
- [Edit product](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/edit-product/edit-product-screen.tsx): `src/modules/catalog/features/edit-product/edit-product-screen.tsx`
- [Delete product](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/delete-product/delete-product-dialog.tsx): `src/modules/catalog/features/delete-product/delete-product-dialog.tsx`
- [Product form](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/components/product-form.tsx): `src/modules/catalog/components/product-form.tsx`
- [Top rated](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/features/top-rated/top-rated-carousel.tsx): `src/modules/catalog/features/top-rated/top-rated-carousel.tsx`

### Data and API

- [Product queries](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/product.queries.ts): `src/modules/catalog/data/product.queries.ts`
- [Products service](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/products.service.ts): `src/modules/catalog/data/products.service.ts`
- [Product schemas](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/catalog/data/product.schema.ts): `src/modules/catalog/data/product.schema.ts`
- [HTTP client](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/api/http-client.ts): `src/shared/api/http-client.ts`
- [Query runtime](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/lib/query-client.ts): `src/shared/lib/query-client.ts`

### App experience

- [Home dashboard](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/home/features/dashboard/home-screen.tsx): `src/modules/home/features/dashboard/home-screen.tsx`
- [App settings](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/settings/features/app-settings/settings-screen.tsx): `src/modules/settings/features/app-settings/settings-screen.tsx`
- [UI sandbox](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/modules/settings/features/ui-sandbox/ui-sandbox-screen.tsx): `src/modules/settings/features/ui-sandbox/ui-sandbox-screen.tsx`
- [App providers](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/providers/app-providers.tsx): `src/shared/providers/app-providers.tsx`
- [Screen states](https://github.com/saiphoenix/expo-layered-crud/blob/main/src/shared/components/screen-states.tsx): `src/shared/components/screen-states.tsx`

### Other components

- **User**
- **DummyJSON API**

## Connections

- User → Expo Router screens: opens screens (evidence: `README.md`)
- Expo Router screens → Tab navigation: shows tabs (evidence: `README.md`)
- Tab navigation → Home dashboard: opens dashboard (evidence: `README.md`)
- Tab navigation → Product list: opens catalog (evidence: `README.md`)
- Tab navigation → App settings: opens settings (evidence: `README.md`)
- App settings → UI sandbox: opens sandbox (evidence: `README.md`)
- Product list → Catalog routes: navigates routes (evidence: `src/modules/catalog/features/product-list/product-list-screen.tsx`)
- Product detail → Catalog routes: navigates routes (evidence: `src/modules/catalog/features/product-detail/product-detail-screen.tsx`)
- Product list → Product queries: loads pages (evidence: `src/modules/catalog/features/product-list/product-list-screen.tsx`)
- Product detail → Product queries: loads details (evidence: `src/modules/catalog/features/product-detail/product-detail-screen.tsx`)
- Home dashboard → Product queries: loads top rated (evidence: `src/modules/home/features/dashboard/home-screen.tsx`)
- Create product → Product form: renders form
- Edit product → Product form: renders form
- Product detail → Delete product: opens delete (evidence: `src/modules/catalog/features/product-detail/product-detail-screen.tsx`)
- Product queries → Products service: fetches data (evidence: `src/modules/catalog/data/product.queries.ts`)
- Products service → Product schemas: validates responses (evidence: `src/modules/catalog/data/products.service.ts`)
- Products service → HTTP client: sends requests (evidence: `src/modules/catalog/data/products.service.ts`)
- HTTP client → DummyJSON API: calls API (evidence: `src/shared/api/http-client.ts`)
- Top rated → Product queries: loads products (evidence: `src/modules/catalog/features/top-rated/top-rated-carousel.tsx`)
- App providers → Query runtime: sets up queries (evidence: `src/shared/providers/app-providers.tsx`)
- Product list → Screen states: renders states (evidence: `src/modules/catalog/features/product-list/product-list-screen.tsx`)
- Product detail → Screen states: renders states (evidence: `src/modules/catalog/features/product-detail/product-detail-screen.tsx`)