# seven742/e-commerce-app architecture

> Architecture diagram of the GitHub repository seven742/e-commerce-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/seven742/e-commerce-app
- Repository: https://github.com/seven742/e-commerce-app

## Overview

This is an Expo Router shopping app. The main customer workflow is browsing or searching a local product catalog, opening a product, and managing cart and favorites; account, address, order, payment, and support screens provide adjacent shopping flows. Authentication screens lead into the shop. Cart and favorite state are held in React context at the app root. Source excerpts and the SOURCE INDEX support the shown dependencies; several screen implementations and routing details were not sampled, so those links are omitted.

Main entry points: [`src/app/(main)/Home.js`](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Home.js) (Home storefront), [`src/context/CartContext.js`](https://github.com/seven742/e-commerce-app/blob/main/src/context/CartContext.js) (Cart state), [`src/context/FavoriteContext.js`](https://github.com/seven742/e-commerce-app/blob/main/src/context/FavoriteContext.js) (Favorite state), [`src/app/(main)/Search.js`](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Search.js) (Product search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_root_layout["Root layout<br/>[_layout.js]"]
  node_shop_tabs["Shop navigation<br/>[_Layout.js]"]
end

subgraph group_shopping["Shopping experience"]
  node_shop_home["Home storefront<br/>[Home.js]"]
  node_search["Product search<br/>[Search.js]"]
  node_product_detail["Product details<br/>[Detailscreen.js]"]
  node_orders["Cart and orders<br/>[Order.js]"]
  node_favorites_screen["Favorites screen<br/>[Favorites.js]"]
  node_other_shop_screens["Shopping support screens"]
end

subgraph group_state_data["State and catalog"]
  node_catalog["Product catalog<br/>[items.js]"]
  node_favorite_catalog["Favorite sample data<br/>[favoriteitems.js]"]
  node_cart_state["Cart state<br/>[CartContext.js]"]
  node_favorite_state["Favorite state<br/>[FavoriteContext.js]"]
  node_featured_data["Featured products<br/>[Featured_item.js]"]
end

subgraph group_account["Account and access"]
  node_auth_routes["Auth screens"]
  node_login["Login screen<br/>[index.js]"]
  node_account_screens["Account screens<br/>[Account.js]"]
  node_profile_edit["Profile editor<br/>[Edit_profile.js]"]
  node_profile_field["Profile field<br/>[ProfileField.js]"]
  node_custom_button["Shared button<br/>[CustomButton.js]"]
end

node_customer(("Customer"))

node_customer -->|"signs in"| node_login
node_login -->|"routes to"| node_shop_tabs
node_root_layout -->|"provides state"| node_cart_state
node_root_layout -->|"provides state"| node_favorite_state
node_shop_tabs -->|"routes to"| node_shop_home
node_shop_home -->|"reads products"| node_catalog
node_shop_home -->|"reads cart"| node_cart_state
node_shop_home -->|"toggles favorites"| node_favorite_state
node_search -->|"filters products"| node_catalog
node_search -->|"reads cart"| node_cart_state
node_search -->|"toggles favorites"| node_favorite_state
node_product_detail -->|"looks up products"| node_catalog
node_product_detail -->|"adds to cart"| node_cart_state
node_orders -->|"reads cart"| node_cart_state
node_orders -->|"reads favorites"| node_favorite_state
node_favorites_screen -->|"reads favorites"| node_favorite_state
node_auth_routes -->|"uses button"| node_custom_button
node_login -->|"uses button"| node_custom_button
node_profile_edit -->|"renders fields"| node_profile_field
node_shop_tabs -->|"routes among"| node_other_shop_screens
node_shop_home -->|"opens account"| node_account_screens

click node_root_layout "https://github.com/seven742/e-commerce-app/blob/main/src/app/_layout.js"
click node_auth_routes "https://github.com/seven742/e-commerce-app/tree/main/src/app/(auth)"
click node_login "https://github.com/seven742/e-commerce-app/blob/main/src/app/(auth)/index.js"
click node_shop_tabs "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/_Layout.js"
click node_shop_home "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Home.js"
click node_search "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Search.js"
click node_product_detail "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Detailscreen.js"
click node_orders "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Order.js"
click node_favorites_screen "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Favorites.js"
click node_catalog "https://github.com/seven742/e-commerce-app/blob/main/src/data/items.js"
click node_favorite_catalog "https://github.com/seven742/e-commerce-app/blob/main/src/data/favoriteitems.js"
click node_cart_state "https://github.com/seven742/e-commerce-app/blob/main/src/context/CartContext.js"
click node_favorite_state "https://github.com/seven742/e-commerce-app/blob/main/src/context/FavoriteContext.js"
click node_account_screens "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Account.js"
click node_profile_edit "https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Edit_profile.js"
click node_profile_field "https://github.com/seven742/e-commerce-app/blob/main/src/components/ProfileField.js"
click node_other_shop_screens "https://github.com/seven742/e-commerce-app/tree/main/src/app/(main)"
click node_featured_data "https://github.com/seven742/e-commerce-app/blob/main/src/data/Featured_item.js"
click node_custom_button "https://github.com/seven742/e-commerce-app/blob/main/src/components/CustomButton.js"

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_root_layout,node_shop_tabs toneBlue
class node_shop_home,node_search,node_product_detail,node_orders,node_favorites_screen,node_other_shop_screens toneAmber
class node_catalog,node_favorite_catalog,node_cart_state,node_favorite_state,node_featured_data toneMint
class node_auth_routes,node_login,node_account_screens,node_profile_edit,node_profile_field,node_custom_button toneRose
class node_customer toneIndigo
```

## Components

### App navigation

- [Root layout](https://github.com/seven742/e-commerce-app/blob/main/src/app/_layout.js): `src/app/_layout.js`
- [Shop navigation](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/_Layout.js): `src/app/(main)/_Layout.js`

### Shopping experience

- [Home storefront](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Home.js): `src/app/(main)/Home.js`
- [Product search](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Search.js): `src/app/(main)/Search.js`
- [Product details](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Detailscreen.js): `src/app/(main)/Detailscreen.js`
- [Cart and orders](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Order.js): `src/app/(main)/Order.js`
- [Favorites screen](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Favorites.js): `src/app/(main)/Favorites.js`
- [Shopping support screens](https://github.com/seven742/e-commerce-app/tree/main/src/app/(main)): `src/app/(main)`

### State and catalog

- [Product catalog](https://github.com/seven742/e-commerce-app/blob/main/src/data/items.js): `src/data/items.js`
- [Favorite sample data](https://github.com/seven742/e-commerce-app/blob/main/src/data/favoriteitems.js): `src/data/favoriteitems.js`
- [Cart state](https://github.com/seven742/e-commerce-app/blob/main/src/context/CartContext.js): `src/context/CartContext.js`
- [Favorite state](https://github.com/seven742/e-commerce-app/blob/main/src/context/FavoriteContext.js): `src/context/FavoriteContext.js`
- [Featured products](https://github.com/seven742/e-commerce-app/blob/main/src/data/Featured_item.js): `src/data/Featured_item.js`

### Account and access

- [Auth screens](https://github.com/seven742/e-commerce-app/tree/main/src/app/(auth)): `src/app/(auth)`
- [Login screen](https://github.com/seven742/e-commerce-app/blob/main/src/app/(auth)/index.js): `src/app/(auth)/index.js`
- [Account screens](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Account.js): `src/app/(main)/Account.js`
- [Profile editor](https://github.com/seven742/e-commerce-app/blob/main/src/app/(main)/Edit_profile.js): `src/app/(main)/Edit_profile.js`
- [Profile field](https://github.com/seven742/e-commerce-app/blob/main/src/components/ProfileField.js): `src/components/ProfileField.js`
- [Shared button](https://github.com/seven742/e-commerce-app/blob/main/src/components/CustomButton.js): `src/components/CustomButton.js`

### Other components

- **Customer**

## Connections

- Customer → Login screen: signs in (evidence: `src/app/(auth)/index.js`)
- Login screen → Shop navigation: routes to (evidence: `src/app/(auth)/index.js`)
- Root layout → Cart state: provides state (evidence: `src/app/_layout.js`)
- Root layout → Favorite state: provides state (evidence: `src/app/_layout.js`)
- Shop navigation → Home storefront: routes to (evidence: `src/app/(main)/_Layout.js`)
- Home storefront → Product catalog: reads products (evidence: `src/app/(main)/Home.js`)
- Home storefront → Cart state: reads cart (evidence: `src/app/(main)/Home.js`)
- Home storefront → Favorite state: toggles favorites (evidence: `src/app/(main)/Home.js`)
- Product search → Product catalog: filters products (evidence: `src/app/(main)/Search.js`)
- Product search → Cart state: reads cart (evidence: `src/app/(main)/Search.js`)
- Product search → Favorite state: toggles favorites (evidence: `src/app/(main)/Search.js`)
- Product details → Product catalog: looks up products (evidence: `src/app/(main)/Detailscreen.js`)
- Product details → Cart state: adds to cart (evidence: `src/app/(main)/Detailscreen.js`)
- Cart and orders → Cart state: reads cart (evidence: `src/app/(main)/Order.js`)
- Cart and orders → Favorite state: reads favorites (evidence: `src/app/(main)/Order.js`)
- Favorites screen → Favorite state: reads favorites (evidence: `src/app/(main)/Favorites.js`)
- Auth screens → Shared button: uses button (evidence: `src/app/(auth)/SendCode.js`)
- Login screen → Shared button: uses button (evidence: `src/app/(auth)/index.js`)
- Profile editor → Profile field: renders fields (evidence: `src/app/(main)/Edit_profile.js`)
- Shop navigation → Shopping support screens: routes among (evidence: `src/app/(main)/_Layout.js`)
- Home storefront → Account screens: opens account (evidence: `src/app/(main)/Home.js`)