# devmonzer/online-shopping-store architecture

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

- Interactive diagram: https://gitdiagram.com/devmonzer/online-shopping-store
- Repository: https://github.com/devmonzer/online-shopping-store

## Overview

This is a React storefront: shoppers browse and search products, inspect details, add items to a persistent cart, and proceed to checkout and payment. Separate workflows cover account authentication and contact messages. The graph reflects the routes, Redux/Saga structure, and sampled components; Firebase/Firestore and Stripe are documented capabilities, but unsampled implementation details limit some integration links.

Main entry points: [`src/routes/navigation/navigation.component.jsx`](https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/navigation/navigation.component.jsx) (Navigation), [`src/store/user/user.saga.js`](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/user/user.saga.js) (User workflows), [`src/store/cart/cart.reducer.js`](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/cart/cart.reducer.js) (Cart state), [`src/App.js`](https://github.com/devmonzer/online-shopping-store/blob/main/src/App.js) (App routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["App routes<br/>[App.js]"]
  node_navigation["Navigation"]
  node_shop["Shop browsing<br/>[shop.component.jsx]"]
  node_categories["Category views"]
  node_product["Product details<br/>[card-details.jsx]"]
  node_search["Product search<br/>[SearchBar.jsx]"]
  node_contact["Contact form"]
  node_category_saga["Category workflows<br/>[category.saga.js]"]
end

subgraph group_commerce["Cart and checkout"]
  node_cart["Cart state<br/>[cart.reducer.js]"]
  node_checkout["Checkout"]
  node_payment["Payment form"]
  node_payment_intent["Payment intent"]
end

subgraph group_identity["Accounts and state"]
  node_auth_forms["Sign-in and signup"]
  node_user_saga["User workflows<br/>[user.saga.js]"]
  node_user_state["User state<br/>[user.reducer.js]"]
  node_store["Redux store<br/>[store.js]"]
end

subgraph group_services["External services"]
  node_firebase[("Firebase / Firestore")]
  node_stripe["Stripe"]
  node_emailjs["EmailJS"]
end

node_shopper(("Shopper"))

node_shopper -->|"opens"| node_app
node_app -->|"routes to"| node_navigation
node_navigation -->|"opens"| node_shop
node_shop -->|"shows"| node_categories
node_navigation -->|"renders"| node_search
node_search -->|"navigates to"| node_product
node_categories -->|"opens"| node_product
node_product -->|"dispatches add"| node_cart
node_navigation -->|"reads"| node_cart
node_shopper -->|"opens"| node_checkout
node_checkout -->|"reads"| node_cart
node_checkout -->|"renders"| node_payment
node_payment -.->|"processes payment"| node_stripe
node_payment_intent -.->|"creates intent"| node_stripe
node_shopper -->|"submits credentials"| node_auth_forms
node_auth_forms -->|"dispatches actions"| node_user_saga
node_app -->|"checks session"| node_user_saga
node_user_saga -.->|"authenticates user"| node_firebase
node_user_saga -->|"dispatches results"| node_user_state
node_category_saga -.->|"loads categories"| node_firebase
node_category_saga -->|"updates state"| node_store
node_store -->|"persists cart"| node_cart
node_shopper -->|"sends message"| node_contact
node_contact -.->|"sends form"| node_emailjs

click node_app "https://github.com/devmonzer/online-shopping-store/blob/main/src/App.js"
click node_navigation "https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/navigation/navigation.component.jsx"
click node_shop "https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/shop/shop.component.jsx"
click node_categories "https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/category/category.component.jsx"
click node_product "https://github.com/devmonzer/online-shopping-store/blob/main/src/components/card-details/card-details.jsx"
click node_search "https://github.com/devmonzer/online-shopping-store/blob/main/src/components/search-bar/SearchBar.jsx"
click node_contact "https://github.com/devmonzer/online-shopping-store/blob/main/src/components/contact-us/contact-us.component.jsx"
click node_cart "https://github.com/devmonzer/online-shopping-store/blob/main/src/store/cart/cart.reducer.js"
click node_checkout "https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/checkout/checkout.component.jsx"
click node_payment "https://github.com/devmonzer/online-shopping-store/blob/main/src/components/payment-form/payment-form.component.jsx"
click node_payment_intent "https://github.com/devmonzer/online-shopping-store/blob/main/netlify/functions/create-payment-intent.js"
click node_auth_forms "https://github.com/devmonzer/online-shopping-store/blob/main/src/components/sign-in-form/sign-in-form.component.jsx"
click node_user_saga "https://github.com/devmonzer/online-shopping-store/blob/main/src/store/user/user.saga.js"
click node_user_state "https://github.com/devmonzer/online-shopping-store/blob/main/src/store/user/user.reducer.js"
click node_store "https://github.com/devmonzer/online-shopping-store/blob/main/src/store/store.js"
click node_category_saga "https://github.com/devmonzer/online-shopping-store/blob/main/src/store/categories/category.saga.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_app,node_navigation,node_shop,node_categories,node_product,node_search,node_contact,node_category_saga toneBlue
class node_cart,node_checkout,node_payment,node_payment_intent toneAmber
class node_auth_forms,node_user_saga,node_user_state,node_store toneMint
class node_firebase,node_stripe,node_emailjs toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [App routes](https://github.com/devmonzer/online-shopping-store/blob/main/src/App.js): `src/App.js`
- [Navigation](https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/navigation/navigation.component.jsx): `src/routes/navigation/navigation.component.jsx`
- [Shop browsing](https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/shop/shop.component.jsx): `src/routes/shop/shop.component.jsx`
- [Category views](https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/category/category.component.jsx): `src/routes/category/category.component.jsx`
- [Product details](https://github.com/devmonzer/online-shopping-store/blob/main/src/components/card-details/card-details.jsx): `src/components/card-details/card-details.jsx`
- [Product search](https://github.com/devmonzer/online-shopping-store/blob/main/src/components/search-bar/SearchBar.jsx): `src/components/search-bar/SearchBar.jsx`
- [Contact form](https://github.com/devmonzer/online-shopping-store/blob/main/src/components/contact-us/contact-us.component.jsx): `src/components/contact-us/contact-us.component.jsx`
- [Category workflows](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/categories/category.saga.js): `src/store/categories/category.saga.js`

### Cart and checkout

- [Cart state](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/cart/cart.reducer.js): `src/store/cart/cart.reducer.js`
- [Checkout](https://github.com/devmonzer/online-shopping-store/blob/main/src/routes/checkout/checkout.component.jsx): `src/routes/checkout/checkout.component.jsx`
- [Payment form](https://github.com/devmonzer/online-shopping-store/blob/main/src/components/payment-form/payment-form.component.jsx): `src/components/payment-form/payment-form.component.jsx`
- [Payment intent](https://github.com/devmonzer/online-shopping-store/blob/main/netlify/functions/create-payment-intent.js): `netlify/functions/create-payment-intent.js`

### Accounts and state

- [Sign-in and signup](https://github.com/devmonzer/online-shopping-store/blob/main/src/components/sign-in-form/sign-in-form.component.jsx): `src/components/sign-in-form/sign-in-form.component.jsx`
- [User workflows](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/user/user.saga.js): `src/store/user/user.saga.js`
- [User state](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/user/user.reducer.js): `src/store/user/user.reducer.js`
- [Redux store](https://github.com/devmonzer/online-shopping-store/blob/main/src/store/store.js): `src/store/store.js`

### External services

- **Firebase / Firestore**
- **Stripe**
- **EmailJS**

### Other components

- **Shopper**

## Connections

- Shopper → App routes: opens
- App routes → Navigation: routes to
- Navigation → Shop browsing: opens
- Shop browsing → Category views: shows
- Navigation → Product search: renders
- Product search → Product details: navigates to
- Category views → Product details: opens
- Product details → Cart state: dispatches add
- Navigation → Cart state: reads
- Shopper → Checkout: opens
- Checkout → Cart state: reads
- Checkout → Payment form: renders
- Payment form → Stripe: processes payment
- Payment intent → Stripe: creates intent
- Shopper → Sign-in and signup: submits credentials
- Sign-in and signup → User workflows: dispatches actions
- App routes → User workflows: checks session
- User workflows → Firebase / Firestore: authenticates user
- User workflows → User state: dispatches results
- Category workflows → Firebase / Firestore: loads categories
- Category workflows → Redux store: updates state
- Redux store → Cart state: persists cart
- Shopper → Contact form: sends message
- Contact form → EmailJS: sends form