How saiphoenix/expo-layered-crud works
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: product.queries.ts Product queries · product-detail-screen.tsx Product detail · _layout.tsx Tab navigation · product-list-screen.tsx Product list
Components 22
App navigation
- Expo Router screens
src/app/_layout.tsx - Tab navigation
src/app/(tabs)/_layout.tsx - Catalog routes
src/modules/catalog/catalog.routes.ts
Catalog features
- Product list
src/modules/catalog/features/product-list/product-list-screen.tsx - Product detail
src/modules/catalog/features/product-detail/product-detail-screen.tsx - Create product
src/modules/catalog/features/create-product/create-product-screen.tsx - Edit product
src/modules/catalog/features/edit-product/edit-product-screen.tsx - Delete product
src/modules/catalog/features/delete-product/delete-product-dialog.tsx - Product form
src/modules/catalog/components/product-form.tsx - Top rated
src/modules/catalog/features/top-rated/top-rated-carousel.tsx
Data and API
- Product queries
src/modules/catalog/data/product.queries.ts - Products service
src/modules/catalog/data/products.service.ts - Product schemas
src/modules/catalog/data/product.schema.ts - HTTP client
src/shared/api/http-client.ts - Query runtime
src/shared/lib/query-client.ts
App experience
- Home dashboard
src/modules/home/features/dashboard/home-screen.tsx - App settings
src/modules/settings/features/app-settings/settings-screen.tsx - UI sandbox
src/modules/settings/features/ui-sandbox/ui-sandbox-screen.tsx - App providers
src/shared/providers/app-providers.tsx - Screen states
src/shared/components/screen-states.tsx
Other components
- User
- DummyJSON API
Connections 22
- User → Expo Router screens: opens screens
README.md - Expo Router screens → Tab navigation: shows tabs
README.md - Tab navigation → Home dashboard: opens dashboard
README.md - Tab navigation → Product list: opens catalog
README.md - Tab navigation → App settings: opens settings
README.md - App settings → UI sandbox: opens sandbox
README.md - Product list → Catalog routes: navigates routes
src/modules/catalog/features/product-list/product-list-screen.tsx - Product detail → Catalog routes: navigates routes
src/modules/catalog/features/product-detail/product-detail-screen.tsx - Product list → Product queries: loads pages
src/modules/catalog/features/product-list/product-list-screen.tsx - Product detail → Product queries: loads details
src/modules/catalog/features/product-detail/product-detail-screen.tsx - Home dashboard → Product queries: loads top rated
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
src/modules/catalog/features/product-detail/product-detail-screen.tsx - Product queries → Products service: fetches data
src/modules/catalog/data/product.queries.ts - Products service → Product schemas: validates responses
src/modules/catalog/data/products.service.ts - Products service → HTTP client: sends requests
src/modules/catalog/data/products.service.ts - HTTP client → DummyJSON API: calls API
src/shared/api/http-client.ts - Top rated → Product queries: loads products
src/modules/catalog/features/top-rated/top-rated-carousel.tsx - App providers → Query runtime: sets up queries
src/shared/providers/app-providers.tsx - Product list → Screen states: renders states
src/modules/catalog/features/product-list/product-list-screen.tsx - Product detail → Screen states: renders states
src/modules/catalog/features/product-detail/product-detail-screen.tsx