# shivamrawatt/ecommercewebsite architecture

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

- Interactive diagram: https://gitdiagram.com/shivamrawatt/ecommercewebsite
- Repository: https://github.com/shivamrawatt/ecommercewebsite

## Overview

This repository implements a clothing storefront with a customer-facing shop, an admin console, and an Express/MongoDB API. The main customer workflow is browsing and searching products, building a cart, placing an order, and tracking its payment and status; administrators manage products and orders. The graph reflects sampled controllers and context for API and cart behavior. Other product and account subsystems are included based on the route and directory structure, but their internal wiring was not sampled.

Main entry points: [`backend/server.js`](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/server.js) (API server), [`frontend/src/App.jsx`](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/App.jsx) (Storefront routes), [`frontend/src/context/ShopContext.jsx`](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/context/ShopContext.jsx) (Shop state), [`admin/src/App.jsx`](https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/App.jsx) (Admin routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shop["Customer storefront"]
  node_storefront["Storefront routes<br/>[App.jsx]"]
  node_shopctx["Shop state<br/>[ShopContext.jsx]"]
  node_catalogui["Catalog browsing<br/>[Collection.jsx]"]
  node_productui["Product details<br/>[Product.jsx]"]
  node_searchui["Product search<br/>[SearchBar.jsx]"]
  node_cartui["Cart and totals<br/>[Cart.jsx]"]
  node_checkoutui["Checkout<br/>[PlaceOrder.jsx]"]
  node_accountui["Customer account<br/>[Login.jsx]"]
  node_ordersui["Order history<br/>[Orders.jsx]"]
  node_verifyui["Payment result<br/>[Verify.jsx]"]
end

subgraph group_admin["Admin console"]
  node_adminapp["Admin routes<br/>[App.jsx]"]
  node_adminauthui["Admin sign-in<br/>[Login.jsx]"]
  node_productadmin["Product management<br/>[Add.jsx]"]
  node_productlistadmin["Product listing<br/>[List.jsx]"]
  node_orderadmin["Order management<br/>[Orders.jsx]"]
end

subgraph group_api["Backend API"]
  node_server["API server<br/>[server.js]"]
  node_userapi["User operations<br/>[userController.js]"]
  node_productapi["Product operations"]
  node_cartapi["Cart operations<br/>[cartController.js]"]
  node_orderapi["Order and payment<br/>[orderController.js]"]
  node_authmw["Request authorization<br/>[auth.js]"]
  node_adminmw["Admin authorization<br/>[adminAuth.js]"]
end

subgraph group_data["Persistence and integrations"]
  node_userstore[("User records<br/>[userModel.js]")]
  node_productstore[("Product records<br/>[productModel.js]")]
  node_orderstore[("Order records<br/>[orderModel.js]")]
  node_mongodb[("MongoDB connection<br/>[mongodb.js]")]
  node_cloudinary["Image hosting<br/>[cloudinary.js]"]
  node_payments["Payment providers"]
end

node_customer(("Shopper"))
node_adminactor(("Administrator"))

node_customer -->|"browses"| node_storefront
node_storefront -->|"uses state"| node_shopctx
node_storefront -->|"routes to"| node_catalogui
node_storefront -->|"routes to"| node_productui
node_storefront -->|"routes to"| node_cartui
node_storefront -->|"routes to"| node_checkoutui
node_storefront -->|"routes to"| node_accountui
node_storefront -->|"routes to"| node_ordersui
node_storefront -->|"routes to"| node_verifyui
node_searchui -->|"updates query"| node_shopctx
node_shopctx -->|"fetches products"| node_server
node_shopctx -->|"syncs cart"| node_server
node_catalogui -->|"reads products"| node_shopctx
node_productui -->|"reads products"| node_shopctx
node_cartui -->|"updates cart"| node_shopctx
node_checkoutui -->|"places order"| node_server
node_accountui -->|"authenticates"| node_server
node_ordersui -->|"loads orders"| node_server
node_verifyui -->|"verifies payment"| node_server
node_adminactor -->|"manages shop"| node_adminapp
node_adminapp -->|"routes to"| node_adminauthui
node_adminapp -->|"routes to"| node_productadmin
node_adminapp -->|"routes to"| node_productlistadmin
node_adminapp -->|"routes to"| node_orderadmin
node_adminauthui -->|"signs in"| node_server
node_productadmin -->|"submits product"| node_server
node_productlistadmin -->|"loads products"| node_server
node_orderadmin -->|"manages orders"| node_server
node_server -->|"dispatches user"| node_userapi
node_server -->|"dispatches products"| node_productapi
node_server -->|"dispatches cart"| node_cartapi
node_server -->|"dispatches orders"| node_orderapi
node_userapi -->|"reads and writes"| node_userstore
node_cartapi -->|"reads and writes cart"| node_userstore
node_productapi -->|"reads and writes"| node_productstore
node_orderapi -->|"reads and writes"| node_orderstore
node_orderapi -->|"clears cart"| node_userstore
node_productapi -->|"uploads images"| node_cloudinary
node_orderapi -->|"creates and verifies"| node_payments
node_server -->|"connects"| node_mongodb
node_server -->|"connects"| node_cloudinary
node_server -->|"uses token checks"| node_authmw
node_server -->|"uses admin checks"| node_adminmw

click node_storefront "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/App.jsx"
click node_shopctx "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/context/ShopContext.jsx"
click node_catalogui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Collection.jsx"
click node_productui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Product.jsx"
click node_searchui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/components/SearchBar.jsx"
click node_cartui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Cart.jsx"
click node_checkoutui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/PlaceOrder.jsx"
click node_accountui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Login.jsx"
click node_ordersui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Orders.jsx"
click node_verifyui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Verify.jsx"
click node_adminapp "https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/App.jsx"
click node_adminauthui "https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/components/Login.jsx"
click node_productadmin "https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/pages/Add.jsx"
click node_productlistadmin "https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/pages/List.jsx"
click node_orderadmin "https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/pages/Orders.jsx"
click node_server "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/server.js"
click node_userapi "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/userController.js"
click node_productapi "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/productController.js"
click node_cartapi "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/cartController.js"
click node_orderapi "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/orderController.js"
click node_authmw "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/middleware/auth.js"
click node_adminmw "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/middleware/adminAuth.js"
click node_userstore "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/models/userModel.js"
click node_productstore "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/models/productModel.js"
click node_orderstore "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/models/orderModel.js"
click node_mongodb "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/config/mongodb.js"
click node_cloudinary "https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/config/cloudinary.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_storefront,node_shopctx,node_catalogui,node_productui,node_searchui,node_cartui,node_checkoutui,node_accountui,node_ordersui,node_verifyui toneBlue
class node_adminapp,node_adminauthui,node_productadmin,node_productlistadmin,node_orderadmin toneAmber
class node_server,node_userapi,node_productapi,node_cartapi,node_orderapi,node_authmw,node_adminmw toneMint
class node_userstore,node_productstore,node_orderstore,node_mongodb,node_cloudinary,node_payments toneRose
class node_customer,node_adminactor toneIndigo
```

## Components

### Customer storefront

- [Storefront routes](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Shop state](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/context/ShopContext.jsx): `frontend/src/context/ShopContext.jsx`
- [Catalog browsing](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Collection.jsx): `frontend/src/pages/Collection.jsx`
- [Product details](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Product.jsx): `frontend/src/pages/Product.jsx`
- [Product search](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/components/SearchBar.jsx): `frontend/src/components/SearchBar.jsx`
- [Cart and totals](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Cart.jsx): `frontend/src/pages/Cart.jsx`
- [Checkout](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/PlaceOrder.jsx): `frontend/src/pages/PlaceOrder.jsx`
- [Customer account](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Login.jsx): `frontend/src/pages/Login.jsx`
- [Order history](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Orders.jsx): `frontend/src/pages/Orders.jsx`
- [Payment result](https://github.com/shivamrawatt/ecommercewebsite/blob/main/frontend/src/pages/Verify.jsx): `frontend/src/pages/Verify.jsx`

### Admin console

- [Admin routes](https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/App.jsx): `admin/src/App.jsx`
- [Admin sign-in](https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/components/Login.jsx): `admin/src/components/Login.jsx`
- [Product management](https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/pages/Add.jsx): `admin/src/pages/Add.jsx`
- [Product listing](https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/pages/List.jsx): `admin/src/pages/List.jsx`
- [Order management](https://github.com/shivamrawatt/ecommercewebsite/blob/main/admin/src/pages/Orders.jsx): `admin/src/pages/Orders.jsx`

### Backend API

- [API server](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/server.js): `backend/server.js`
- [User operations](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/userController.js): `backend/controllers/userController.js`
- [Product operations](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/productController.js): `backend/controllers/productController.js`
- [Cart operations](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/cartController.js): `backend/controllers/cartController.js`
- [Order and payment](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/controllers/orderController.js): `backend/controllers/orderController.js`
- [Request authorization](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/middleware/auth.js): `backend/middleware/auth.js`
- [Admin authorization](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/middleware/adminAuth.js): `backend/middleware/adminAuth.js`

### Persistence and integrations

- [User records](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/models/userModel.js): `backend/models/userModel.js`
- [Product records](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/models/productModel.js): `backend/models/productModel.js`
- [Order records](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/models/orderModel.js): `backend/models/orderModel.js`
- [MongoDB connection](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/config/mongodb.js): `backend/config/mongodb.js`
- [Image hosting](https://github.com/shivamrawatt/ecommercewebsite/blob/main/backend/config/cloudinary.js): `backend/config/cloudinary.js`
- **Payment providers**

### Other components

- **Shopper**
- **Administrator**

## Connections

- Shopper → Storefront routes: browses
- Storefront routes → Shop state: uses state
- Storefront routes → Catalog browsing: routes to
- Storefront routes → Product details: routes to
- Storefront routes → Cart and totals: routes to
- Storefront routes → Checkout: routes to
- Storefront routes → Customer account: routes to
- Storefront routes → Order history: routes to
- Storefront routes → Payment result: routes to
- Product search → Shop state: updates query
- Shop state → API server: fetches products
- Shop state → API server: syncs cart
- Catalog browsing → Shop state: reads products
- Product details → Shop state: reads products
- Cart and totals → Shop state: updates cart
- Checkout → API server: places order
- Customer account → API server: authenticates
- Order history → API server: loads orders
- Payment result → API server: verifies payment
- Administrator → Admin routes: manages shop
- Admin routes → Admin sign-in: routes to
- Admin routes → Product management: routes to
- Admin routes → Product listing: routes to
- Admin routes → Order management: routes to
- Admin sign-in → API server: signs in
- Product management → API server: submits product
- Product listing → API server: loads products
- Order management → API server: manages orders
- API server → User operations: dispatches user
- API server → Product operations: dispatches products
- API server → Cart operations: dispatches cart
- API server → Order and payment: dispatches orders
- User operations → User records: reads and writes
- Cart operations → User records: reads and writes cart
- Product operations → Product records: reads and writes
- Order and payment → Order records: reads and writes
- Order and payment → User records: clears cart
- Product operations → Image hosting: uploads images
- Order and payment → Payment providers: creates and verifies
- API server → MongoDB connection: connects
- API server → Image hosting: connects
- API server → Request authorization: uses token checks
- API server → Admin authorization: uses admin checks