# martin-leo-frontend-developer/shopping-app architecture

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

- Interactive diagram: https://gitdiagram.com/martin-leo-frontend-developer/shopping-app
- Repository: https://github.com/martin-leo-frontend-developer/shopping-app

## Overview

This is a React shopping-cart application: shoppers browse products and manage a cart, while an administrator can sign in and add products; registration and purchase-review pages are also routed. The sampled code shows Firebase Authentication, Firestore, Storage, and messaging usage. The README describes only the Create React App scaffold, and Admin and ViewPurchase implementation details were not sampled, so their internal behavior and data connections are not inferred.

Main entry points: [`src/index.jsx`](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/index.jsx) (Route setup), [`src/pages/Home.jsx`](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Home.jsx) (Catalog and cart), [`src/components/AppLayout.jsx`](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/AppLayout.jsx) (App layout), [`src/pages/SignUp.jsx`](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/SignUp.jsx) (Registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App shell and routing"]
  node_router["Route setup<br/>[index.jsx]"]
  node_layout["App layout<br/>[AppLayout.jsx]"]
  node_header["Header and logout<br/>[Header.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_signup["Registration<br/>[SignUp.jsx]"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_admin_gate["Protected admin gate<br/>[index.jsx]"]
end

subgraph group_shopping["Catalog and cart"]
  node_home["Catalog and cart<br/>[Home.jsx]"]
  node_purchase_view["Purchase review<br/>[ViewPurchase.jsx]"]
end

subgraph group_admin["Administration"]
  node_admin_page["Admin page<br/>[Admin.jsx]"]
  node_add_product["Add product<br/>[AddProduct.jsx]"]
end

subgraph group_services["Firebase services"]
  node_firebase_config["Firebase setup<br/>[config.js]"]
  node_auth_service["Firebase Authentication"]
  node_firestore[("Firestore")]
  node_storage["Firebase Storage"]
  node_messaging["Firebase Messaging"]
end

node_shopper(("Shopper"))
node_admin_actor(("Administrator"))
node_service_worker["Messaging worker"]

node_shopper -->|"opens app"| node_router
node_admin_actor -->|"opens app"| node_router
node_router -->|"renders shell"| node_layout
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_signup
node_router -->|"routes to"| node_login
node_router -->|"guards routes"| node_admin_gate
node_admin_gate -->|"renders"| node_admin_page
node_router -->|"routes to"| node_add_product
node_router -->|"routes to"| node_purchase_view
node_layout -->|"renders"| node_header
node_layout -->|"observes session"| node_auth_service
node_header -->|"signs out"| node_auth_service
node_signup -->|"creates account"| node_auth_service
node_signup -->|"writes profile"| node_firestore
node_login -->|"signs in"| node_auth_service
node_admin_gate -->|"checks session"| node_auth_service
node_home -->|"reads catalog and cart"| node_firestore
node_home -->|"updates cart"| node_firestore
node_add_product -->|"uploads image"| node_storage
node_add_product -->|"saves product"| node_firestore
node_home -->|"requests token and listens"| node_messaging
node_router -->|"registers worker"| node_service_worker
node_service_worker -->|"receives background messages"| node_messaging

click node_router "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/index.jsx"
click node_layout "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/AppLayout.jsx"
click node_header "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/Header.jsx"
click node_signup "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/SignUp.jsx"
click node_login "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Login.jsx"
click node_admin_gate "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/index.jsx"
click node_home "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Home.jsx"
click node_purchase_view "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/ViewPurchase.jsx"
click node_admin_page "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Admin.jsx"
click node_add_product "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/AddProduct.jsx"
click node_firebase_config "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/config.js"
click node_service_worker "https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/public/firebase-messaging-sw.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_router,node_layout,node_header toneBlue
class node_signup,node_login,node_admin_gate toneAmber
class node_home,node_purchase_view toneMint
class node_admin_page,node_add_product,node_service_worker toneRose
class node_firebase_config,node_auth_service,node_firestore,node_storage,node_messaging,node_shopper,node_admin_actor toneIndigo
```

## Components

### App shell and routing

- [Route setup](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/index.jsx): `src/index.jsx`
- [App layout](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/AppLayout.jsx): `src/components/AppLayout.jsx`
- [Header and logout](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/Header.jsx): `src/components/Header.jsx`

### Identity and access

- [Registration](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/SignUp.jsx): `src/pages/SignUp.jsx`
- [Sign in](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Protected admin gate](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/index.jsx): `src/index.jsx`

### Catalog and cart

- [Catalog and cart](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Purchase review](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/ViewPurchase.jsx): `src/pages/ViewPurchase.jsx`

### Administration

- [Admin page](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/Admin.jsx): `src/pages/Admin.jsx`
- [Add product](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/pages/AddProduct.jsx): `src/pages/AddProduct.jsx`

### Firebase services

- [Firebase setup](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/src/components/config.js): `src/components/config.js`
- **Firebase Authentication**
- **Firestore**
- **Firebase Storage**
- **Firebase Messaging**

### Other components

- **Shopper**
- **Administrator**
- [Messaging worker](https://github.com/martin-leo-frontend-developer/shopping-app/blob/main/public/firebase-messaging-sw.js): `public/firebase-messaging-sw.js`

## Connections

- Shopper → Route setup: opens app
- Administrator → Route setup: opens app
- Route setup → App layout: renders shell
- Route setup → Catalog and cart: routes to
- Route setup → Registration: routes to
- Route setup → Sign in: routes to
- Route setup → Protected admin gate: guards routes
- Protected admin gate → Admin page: renders
- Route setup → Add product: routes to
- Route setup → Purchase review: routes to
- App layout → Header and logout: renders
- App layout → Firebase Authentication: observes session
- Header and logout → Firebase Authentication: signs out
- Registration → Firebase Authentication: creates account
- Registration → Firestore: writes profile
- Sign in → Firebase Authentication: signs in
- Protected admin gate → Firebase Authentication: checks session
- Catalog and cart → Firestore: reads catalog and cart
- Catalog and cart → Firestore: updates cart
- Add product → Firebase Storage: uploads image
- Add product → Firestore: saves product
- Catalog and cart → Firebase Messaging: requests token and listens
- Route setup → Messaging worker: registers worker
- Messaging worker → Firebase Messaging: receives background messages