# khushi-saraswat/ecommerce architecture

> Architecture diagram of the GitHub repository khushi-saraswat/ecommerce, 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/khushi-saraswat/ecommerce
- Repository: https://github.com/khushi-saraswat/ecommerce

## Overview

This is the React frontend for ShopEase, a multi-vendor artisan marketplace. Shoppers browse products and categories, manage a cart and wishlist, check out, and view orders; account authentication gates protected flows. Separate admin and artisan areas support marketplace management, seller products and profiles, and category requests. The README describes backend capabilities such as per-artisan order splitting and payment tracking, but backend source is not present in this tree, so those internals are represented only at the API boundary. Some page and store wiring is inferred from route declarations and API wrappers; unsampled calls are omitted.

Main entry points: [`frontend/src/App.jsx`](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/App.jsx) (Route application), [`frontend/src/services/api.js`](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/services/api.js) (Marketplace API client), [`frontend/src/store/cartStore.js`](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/cartStore.js) (Cart state), [`frontend/src/pages/Products.jsx`](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Products.jsx) (Product catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shop["Storefront"]
  node_home["Home and categories<br/>[Home.jsx]"]
  node_catalog["Product catalog<br/>[Products.jsx]"]
  node_details["Product details<br/>[ProductDetails.jsx]"]
  node_productcard["Product card<br/>[ProductCard.jsx]"]
end

subgraph group_customer["Customer commerce"]
  node_authpages["Sign-in and registration<br/>[Login.jsx]"]
  node_cart["Cart state<br/>[cartStore.js]"]
  node_wishlist["Wishlist state<br/>[wishlistStore.js]"]
  node_checkout["Checkout<br/>[Checkout.jsx]"]
  node_orders["Customer orders<br/>[Orders.jsx]"]
  node_profile["Customer profile<br/>[Profile.jsx]"]
end

subgraph group_admin["Admin operations"]
  node_adminpages["Admin management<br/>[Dashboard.jsx]"]
end

subgraph group_artisan["Artisan workspace"]
  node_artisanpanel["Artisan workspace<br/>[ArtisanPanel.jsx]"]
  node_artisanapi["Artisan API client<br/>[api.js]"]
end

subgraph group_client["Client infrastructure"]
  node_app["Route application<br/>[App.jsx]"]
  node_authstate["Authentication state<br/>[authStore.js]"]
  node_api["Marketplace API client<br/>[api.js]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

node_shopper(("Shopper"))
node_backend["Marketplace backend"]

node_shopper -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_catalog
node_app -->|"routes"| node_details
node_app -->|"routes"| node_checkout
node_app -->|"routes"| node_orders
node_app -->|"routes"| node_authpages
node_app -->|"routes"| node_adminpages
node_app -->|"routes"| node_artisanpanel
node_home -->|"loads catalog data"| node_api
node_catalog -->|"requests products"| node_api
node_details -->|"requests product"| node_api
node_catalog -->|"renders products"| node_productcard
node_details -->|"adds items"| node_cart
node_productcard -->|"adds items"| node_cart
node_productcard -->|"updates wishlist"| node_wishlist
node_authpages -->|"authenticates"| node_authstate
node_authstate -->|"calls auth and user APIs"| node_api
node_navbar -->|"loads cart"| node_cart
node_navbar -->|"loads wishlist"| node_wishlist
node_checkout -->|"reads and clears"| node_cart
node_checkout -->|"places order"| node_api
node_orders -->|"requests order history"| node_api
node_profile -->|"reads profile state"| node_authstate
node_adminpages -->|"manages marketplace"| node_api
node_artisanpanel -->|"dispatches seller actions"| node_artisanapi
node_artisanapi -->|"sends seller requests"| node_backend
node_api -->|"sends API requests"| node_backend

click node_app "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Home.jsx"
click node_catalog "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Products.jsx"
click node_details "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/ProductDetails.jsx"
click node_productcard "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/components/product/ProductCard.jsx"
click node_authpages "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Login.jsx"
click node_authstate "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/authStore.js"
click node_cart "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/cartStore.js"
click node_wishlist "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/wishlistStore.js"
click node_checkout "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Checkout.jsx"
click node_orders "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Orders.jsx"
click node_profile "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Profile.jsx"
click node_adminpages "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/admin/Dashboard.jsx"
click node_artisanpanel "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/artisan/ArtisanPanel.jsx"
click node_artisanapi "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/artisan/api.js"
click node_api "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/services/api.js"
click node_navbar "https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/components/layout/Navbar.jsx"

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_home,node_catalog,node_details,node_productcard toneBlue
class node_authpages,node_cart,node_wishlist,node_checkout,node_orders,node_profile toneAmber
class node_adminpages toneMint
class node_artisanpanel,node_artisanapi toneRose
class node_app,node_authstate,node_api,node_navbar,node_shopper,node_backend toneIndigo
```

## Components

### Storefront

- [Home and categories](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Home.jsx): `frontend/src/pages/Home.jsx`
- [Product catalog](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Products.jsx): `frontend/src/pages/Products.jsx`
- [Product details](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/ProductDetails.jsx): `frontend/src/pages/ProductDetails.jsx`
- [Product card](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/components/product/ProductCard.jsx): `frontend/src/components/product/ProductCard.jsx`

### Customer commerce

- [Sign-in and registration](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Login.jsx): `frontend/src/pages/Login.jsx`
- [Cart state](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/cartStore.js): `frontend/src/store/cartStore.js`
- [Wishlist state](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/wishlistStore.js): `frontend/src/store/wishlistStore.js`
- [Checkout](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Checkout.jsx): `frontend/src/pages/Checkout.jsx`
- [Customer orders](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Orders.jsx): `frontend/src/pages/Orders.jsx`
- [Customer profile](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/Profile.jsx): `frontend/src/pages/Profile.jsx`

### Admin operations

- [Admin management](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/admin/Dashboard.jsx): `frontend/src/pages/admin/Dashboard.jsx`

### Artisan workspace

- [Artisan workspace](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/artisan/ArtisanPanel.jsx): `frontend/src/pages/artisan/ArtisanPanel.jsx`
- [Artisan API client](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/pages/artisan/api.js): `frontend/src/pages/artisan/api.js`

### Client infrastructure

- [Route application](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Authentication state](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/store/authStore.js): `frontend/src/store/authStore.js`
- [Marketplace API client](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`
- [Navigation](https://github.com/khushi-saraswat/ecommerce/blob/main/frontend/src/components/layout/Navbar.jsx): `frontend/src/components/layout/Navbar.jsx`

### Other components

- **Shopper**
- **Marketplace backend**

## Connections

- Shopper → Route application: opens
- Route application → Home and categories: routes
- Route application → Product catalog: routes
- Route application → Product details: routes
- Route application → Checkout: routes
- Route application → Customer orders: routes
- Route application → Sign-in and registration: routes
- Route application → Admin management: routes
- Route application → Artisan workspace: routes
- Home and categories → Marketplace API client: loads catalog data
- Product catalog → Marketplace API client: requests products
- Product details → Marketplace API client: requests product
- Product catalog → Product card: renders products
- Product details → Cart state: adds items
- Product card → Cart state: adds items
- Product card → Wishlist state: updates wishlist
- Sign-in and registration → Authentication state: authenticates
- Authentication state → Marketplace API client: calls auth and user APIs
- Navigation → Cart state: loads cart
- Navigation → Wishlist state: loads wishlist
- Checkout → Cart state: reads and clears
- Checkout → Marketplace API client: places order
- Customer orders → Marketplace API client: requests order history
- Customer profile → Authentication state: reads profile state
- Admin management → Marketplace API client: manages marketplace
- Artisan workspace → Artisan API client: dispatches seller actions
- Artisan API client → Marketplace backend: sends seller requests
- Marketplace API client → Marketplace backend: sends API requests