# shubhamdutta2000/eshop-ecommerce-site architecture

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

- Interactive diagram: https://gitdiagram.com/shubhamdutta2000/eshop-ecommerce-site
- Repository: https://github.com/shubhamdutta2000/eshop-ecommerce-site

## Overview

eShop is a MERN storefront with customer shopping and checkout, account management, and admin catalog/order/user workflows. The principal journey is browsing/searching products, adding items to a cart, entering shipping and payment details, placing an order, and viewing its status. The React app communicates with an Express API; controllers use MongoDB models for product, user, and order data. Stripe, PayPal, and image uploads support checkout and administration. The README also documents reviews, pagination, and offline/PWA behavior; several corresponding source files were not sampled, so uncertain internal links are omitted.

Main entry points: [`frontend/src/App.js`](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/App.js) (App routes), [`server.js`](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/server.js) (Express server), [`frontend/src/redux/store.js`](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/redux/store.js) (Redux actions and state), [`backened/routes/OrderRoutes.js`](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/OrderRoutes.js) (Order routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Storefront client"]
  node_app["App routes<br/>[App.js]"]
  node_catalog["Catalog screens<br/>[HomeScreen.js]"]
  node_product["Product details<br/>[ProductScreen.js]"]
  node_cart["Cart and checkout<br/>[CartScreen.js]"]
  node_checkout["Order placement"]
  node_clientstate["Redux actions and state<br/>[store.js]"]
end

subgraph group_api["Backend API"]
  node_server["Express server<br/>[server.js]"]
  node_productroutes["Product routes<br/>[productRoutes.js]"]
  node_orderroutes["Order routes<br/>[OrderRoutes.js]"]
  node_userroutes["User routes<br/>[userRouter.js]"]
  node_productcontroller["Product operations"]
  node_ordercontroller["Order operations<br/>[orderController.js]"]
  node_usercontroller["Account operations<br/>[userController.js]"]
  node_auth["Authentication checks<br/>[authMiddleware.js]"]
end

subgraph group_commerce["Commerce data"]
  node_products[("Product records<br/>[productsModel.js]")]
  node_orders[("Order records<br/>[orderModel.js]")]
  node_users[("User records<br/>[userModel.js]")]
end

subgraph group_integrations["Payments and uploads"]
  node_stripe["Stripe payment"]
  node_stripeclient["Stripe checkout UI<br/>[StripeCheckout.js]"]
  node_paypalclient["PayPal checkout UI<br/>[PayPalCheckout.js]"]
  node_paypal["PayPal service"]
  node_uploadroute["Local image upload<br/>[uploadRoutes.js]"]
  node_multer["Upload client<br/>[multerStorage.js]"]
  node_firebase["Firebase image storage<br/>[firebaseStorage.js]"]
  node_firebasecloud[("Firebase Storage")]
end

subgraph group_experience["Account and offline"]
  node_profiles["Profile and admin screens<br/>[ProfileScreen.js]"]
  node_pwa["Offline service worker<br/>[serviceworker.js]"]
end

node_shopper(("Shopper or admin"))

node_shopper -->|"uses"| node_app
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_product
node_app -->|"routes to"| node_cart
node_app -->|"routes to"| node_checkout
node_app -->|"routes to"| node_profiles
node_app -->|"checks auth"| node_clientstate
node_catalog -->|"dispatches"| node_clientstate
node_product -->|"dispatches"| node_clientstate
node_cart -->|"dispatches"| node_clientstate
node_checkout -->|"dispatches"| node_clientstate
node_profiles -->|"dispatches"| node_clientstate
node_clientstate -->|"API requests"| node_server
node_server -->|"mounts"| node_productroutes
node_server -->|"mounts"| node_orderroutes
node_server -->|"mounts"| node_userroutes
node_productroutes -->|"dispatches"| node_productcontroller
node_orderroutes -->|"dispatches"| node_ordercontroller
node_userroutes -->|"dispatches"| node_usercontroller
node_productroutes -->|"guards"| node_auth
node_orderroutes -->|"guards"| node_auth
node_userroutes -->|"guards"| node_auth
node_productcontroller -->|"reads and writes"| node_products
node_ordercontroller -->|"reads and writes"| node_orders
node_usercontroller -->|"reads and writes"| node_users
node_stripeclient -->|"requests payment"| node_server
node_server -->|"mounts payment route"| node_stripe
node_stripe -->|"updates payment"| node_orders
node_paypalclient -.->|"processes payment"| node_paypal
node_checkout -->|"submits order"| node_orderroutes
node_profiles -->|"loads orders"| node_orderroutes
node_multer -->|"uploads image"| node_uploadroute
node_server -->|"mounts"| node_uploadroute
node_firebase -.->|"uploads image"| node_firebasecloud
node_app -.->|"registers offline support"| node_pwa

click node_app "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/App.js"
click node_catalog "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/HomeScreen.js"
click node_product "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/ProductScreen.js"
click node_cart "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/CartScreen.js"
click node_checkout "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/PlaceOrderScreen.js"
click node_clientstate "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/redux/store.js"
click node_server "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/server.js"
click node_productroutes "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/productRoutes.js"
click node_orderroutes "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/OrderRoutes.js"
click node_userroutes "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/userRouter.js"
click node_productcontroller "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/productController.js"
click node_ordercontroller "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/orderController.js"
click node_usercontroller "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/userController.js"
click node_auth "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/middleware/authMiddleware.js"
click node_products "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/models/productsModel.js"
click node_orders "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/models/orderModel.js"
click node_users "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/models/userModel.js"
click node_stripe "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/stripePaymentController.js"
click node_stripeclient "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/components/StripeCheckout.js"
click node_paypalclient "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/components/PayPalCheckout.js"
click node_uploadroute "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/uploadRoutes.js"
click node_multer "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/imageUpload/multerStorage.js"
click node_firebase "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/imageUpload/firebaseStorage.js"
click node_profiles "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/ProfileScreen.js"
click node_pwa "https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/public/serviceworker.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_catalog,node_product,node_cart,node_checkout,node_clientstate toneBlue
class node_server,node_productroutes,node_orderroutes,node_userroutes,node_productcontroller,node_ordercontroller,node_usercontroller,node_auth toneAmber
class node_products,node_orders,node_users toneMint
class node_stripe,node_stripeclient,node_paypalclient,node_paypal,node_uploadroute,node_multer,node_firebase,node_firebasecloud toneRose
class node_profiles,node_pwa,node_shopper toneIndigo
```

## Components

### Storefront client

- [App routes](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Catalog screens](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/HomeScreen.js): `frontend/src/screen/HomeScreen.js`
- [Product details](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/ProductScreen.js): `frontend/src/screen/ProductScreen.js`
- [Cart and checkout](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/CartScreen.js): `frontend/src/screen/CartScreen.js`
- [Order placement](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/PlaceOrderScreen.js): `frontend/src/screen/PlaceOrderScreen.js`
- [Redux actions and state](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/redux/store.js): `frontend/src/redux/store.js`

### Backend API

- [Express server](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/server.js): `server.js`
- [Product routes](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/productRoutes.js): `backened/routes/productRoutes.js`
- [Order routes](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/OrderRoutes.js): `backened/routes/OrderRoutes.js`
- [User routes](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/userRouter.js): `backened/routes/userRouter.js`
- [Product operations](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/productController.js): `backened/controllers/productController.js`
- [Order operations](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/orderController.js): `backened/controllers/orderController.js`
- [Account operations](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/userController.js): `backened/controllers/userController.js`
- [Authentication checks](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/middleware/authMiddleware.js): `backened/middleware/authMiddleware.js`

### Commerce data

- [Product records](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/models/productsModel.js): `backened/models/productsModel.js`
- [Order records](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/models/orderModel.js): `backened/models/orderModel.js`
- [User records](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/models/userModel.js): `backened/models/userModel.js`

### Payments and uploads

- [Stripe payment](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/controllers/stripePaymentController.js): `backened/controllers/stripePaymentController.js`
- [Stripe checkout UI](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/components/StripeCheckout.js): `frontend/src/components/StripeCheckout.js`
- [PayPal checkout UI](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/components/PayPalCheckout.js): `frontend/src/components/PayPalCheckout.js`
- **PayPal service**
- [Local image upload](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/backened/routes/uploadRoutes.js): `backened/routes/uploadRoutes.js`
- [Upload client](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/imageUpload/multerStorage.js): `frontend/src/imageUpload/multerStorage.js`
- [Firebase image storage](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/imageUpload/firebaseStorage.js): `frontend/src/imageUpload/firebaseStorage.js`
- **Firebase Storage**

### Account and offline

- [Profile and admin screens](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/src/screen/ProfileScreen.js): `frontend/src/screen/ProfileScreen.js`
- [Offline service worker](https://github.com/shubhamdutta2000/eshop-ecommerce-site/blob/main/frontend/public/serviceworker.js): `frontend/public/serviceworker.js`

### Other components

- **Shopper or admin**

## Connections

- Shopper or admin → App routes: uses
- App routes → Catalog screens: routes to
- App routes → Product details: routes to
- App routes → Cart and checkout: routes to
- App routes → Order placement: routes to
- App routes → Profile and admin screens: routes to
- App routes → Redux actions and state: checks auth
- Catalog screens → Redux actions and state: dispatches
- Product details → Redux actions and state: dispatches
- Cart and checkout → Redux actions and state: dispatches
- Order placement → Redux actions and state: dispatches
- Profile and admin screens → Redux actions and state: dispatches
- Redux actions and state → Express server: API requests
- Express server → Product routes: mounts
- Express server → Order routes: mounts
- Express server → User routes: mounts
- Product routes → Product operations: dispatches
- Order routes → Order operations: dispatches
- User routes → Account operations: dispatches
- Product routes → Authentication checks: guards
- Order routes → Authentication checks: guards
- User routes → Authentication checks: guards
- Product operations → Product records: reads and writes
- Order operations → Order records: reads and writes
- Account operations → User records: reads and writes
- Stripe checkout UI → Express server: requests payment
- Express server → Stripe payment: mounts payment route
- Stripe payment → Order records: updates payment
- PayPal checkout UI → PayPal service: processes payment
- Order placement → Order routes: submits order
- Profile and admin screens → Order routes: loads orders
- Upload client → Local image upload: uploads image
- Express server → Local image upload: mounts
- Firebase image storage → Firebase Storage: uploads image
- App routes → Offline service worker: registers offline support