# jigar-sable/flipkart-mern architecture

> Architecture diagram of the GitHub repository jigar-sable/flipkart-mern, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-03). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jigar-sable/flipkart-mern
- Repository: https://github.com/jigar-sable/flipkart-mern

## Overview

Flipkart is a MERN storefront with customer shopping and checkout, account/order features, and an administrator dashboard. The customer flow runs from routed React pages through Redux actions to Express routes/controllers and MongoDB models; Paytm handles payment processing. The README documents additional wishlist, saved-items, review, and admin capabilities. Some frontend and backend modules are unsampled, so those branches are included at supported paths, but uncertain internal links are omitted.

Main entry points: [`frontend/src/App.js`](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/App.js) (Route Application), [`backend/app.js`](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/app.js) (Express Application), [`backend/controllers/userController.js`](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/userController.js) (User Operations), [`backend/controllers/orderController.js`](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/orderController.js) (Order Operations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Storefront"]
  node_app["Route Application<br/>[App.js]"]
  node_browse["Product Browsing<br/>[Products.jsx]"]
  node_details["Product Details<br/>[ProductDetails.jsx]"]
  node_cart["Cart and Saved Items<br/>[Cart.jsx]"]
  node_checkout["Checkout and Payment<br/>[Payment.jsx]"]
  node_ordersui["Order History<br/>[MyOrders.jsx]"]
  node_account["Account Pages<br/>[Account.jsx]"]
  node_adminui["Admin Dashboard<br/>[Dashboard.jsx]"]
  node_reviewui["Review Administration<br/>[ReviewsTable.jsx]"]
end

subgraph group_state["Client State"]
  node_productactions["Product Actions<br/>[productAction.js]"]
  node_orderactions["Order Actions<br/>[orderAction.js]"]
  node_useractions["User Actions<br/>[userAction.js]"]
  node_cartactions["Cart Actions<br/>[cartAction.js]"]
  node_wishlistactions["Wishlist Actions<br/>[wishlistAction.js]"]
  node_savelateractions["Saved Item Actions"]
  node_store["Redux Store<br/>[store.js]"]
end

subgraph group_api["Backend API"]
  node_server["Express Application<br/>[app.js]"]
  node_usercontroller["User Operations<br/>[userController.js]"]
  node_productcontroller["Product Operations"]
  node_ordercontroller["Order Operations<br/>[orderController.js]"]
  node_paymentcontroller["Payment Operations"]
  node_auth["Authentication Guard<br/>[auth.js]"]
end

subgraph group_data["Commerce Data"]
  node_productmodel[("Products<br/>[productModel.js]")]
  node_usermodel[("Users<br/>[userModel.js]")]
  node_ordermodel[("Orders<br/>[orderModel.js]")]
  node_paymentmodel[("Payment Records<br/>[paymentModel.js]")]
end

subgraph group_integrations["External Services"]
  node_paytm["Paytm Gateway"]
  node_cloudinary["Cloudinary"]
  node_sendgrid["SendGrid Mail"]
end

node_shopper(("Shopper"))
node_admin(("Administrator"))

node_shopper -->|"uses"| node_app
node_admin -->|"uses"| node_app
node_app -->|"routes to"| node_browse
node_app -->|"routes to"| node_details
node_app -->|"routes to"| node_account
node_app -->|"routes to"| node_ordersui
node_app -->|"routes to"| node_adminui
node_browse -->|"dispatches"| node_productactions
node_details -->|"dispatches"| node_productactions
node_details -->|"dispatches"| node_cartactions
node_details -->|"dispatches"| node_wishlistactions
node_cart -.->|"dispatches"| node_cartactions
node_cart -.->|"dispatches"| node_savelateractions
node_checkout -->|"dispatches"| node_orderactions
node_ordersui -->|"dispatches"| node_orderactions
node_account -.->|"uses"| node_useractions
node_reviewui -->|"dispatches"| node_productactions
node_app -.->|"dispatches through"| node_store
node_productactions -.->|"requests API"| node_server
node_orderactions -->|"requests API"| node_server
node_useractions -.->|"requests API"| node_server
node_server -->|"mounts user routes"| node_usercontroller
node_server -->|"mounts product routes"| node_productcontroller
node_server -->|"mounts order routes"| node_ordercontroller
node_server -->|"mounts payment routes"| node_paymentcontroller
node_usercontroller -->|"guards routes"| node_auth
node_productcontroller -->|"guards routes"| node_auth
node_ordercontroller -->|"guards routes"| node_auth
node_paymentcontroller -->|"guards routes"| node_auth
node_usercontroller -->|"reads and writes"| node_usermodel
node_productcontroller -->|"reads and writes"| node_productmodel
node_ordercontroller -->|"reads and writes"| node_ordermodel
node_ordercontroller -->|"updates stock"| node_productmodel
node_paymentcontroller -->|"records payments"| node_paymentmodel
node_paymentcontroller -->|"verifies transactions"| node_paytm
node_productcontroller -->|"uploads images"| node_cloudinary
node_usercontroller -->|"uploads avatars"| node_cloudinary
node_ordercontroller -->|"sends order email"| node_sendgrid
node_usercontroller -->|"sends reset email"| node_sendgrid

click node_app "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/App.js"
click node_browse "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Products/Products.jsx"
click node_details "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/ProductDetails/ProductDetails.jsx"
click node_cart "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Cart/Cart.jsx"
click node_checkout "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Cart/Payment.jsx"
click node_ordersui "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Order/MyOrders.jsx"
click node_account "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/User/Account.jsx"
click node_adminui "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Admin/Dashboard.jsx"
click node_reviewui "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Admin/ReviewsTable.jsx"
click node_productactions "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/productAction.js"
click node_orderactions "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/orderAction.js"
click node_useractions "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/userAction.js"
click node_cartactions "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/cartAction.js"
click node_wishlistactions "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/wishlistAction.js"
click node_savelateractions "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/saveForLaterAction.js"
click node_store "https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/store.js"
click node_server "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/app.js"
click node_usercontroller "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/userController.js"
click node_productcontroller "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/productController.js"
click node_ordercontroller "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/orderController.js"
click node_paymentcontroller "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/paymentController.js"
click node_auth "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/middlewares/auth.js"
click node_productmodel "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/productModel.js"
click node_usermodel "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/userModel.js"
click node_ordermodel "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/orderModel.js"
click node_paymentmodel "https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/paymentModel.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_browse,node_details,node_cart,node_checkout,node_ordersui,node_account,node_adminui,node_reviewui toneBlue
class node_productactions,node_orderactions,node_useractions,node_cartactions,node_wishlistactions,node_savelateractions,node_store toneAmber
class node_server,node_usercontroller,node_productcontroller,node_ordercontroller,node_paymentcontroller,node_auth toneMint
class node_productmodel,node_usermodel,node_ordermodel,node_paymentmodel toneRose
class node_paytm,node_cloudinary,node_sendgrid,node_shopper,node_admin toneIndigo
```

## Components

### Storefront

- [Route Application](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/App.js): `frontend/src/App.js`
- [Product Browsing](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Products/Products.jsx): `frontend/src/components/Products/Products.jsx`
- [Product Details](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/ProductDetails/ProductDetails.jsx): `frontend/src/components/ProductDetails/ProductDetails.jsx`
- [Cart and Saved Items](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Cart/Cart.jsx): `frontend/src/components/Cart/Cart.jsx`
- [Checkout and Payment](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Cart/Payment.jsx): `frontend/src/components/Cart/Payment.jsx`
- [Order History](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Order/MyOrders.jsx): `frontend/src/components/Order/MyOrders.jsx`
- [Account Pages](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/User/Account.jsx): `frontend/src/components/User/Account.jsx`
- [Admin Dashboard](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Admin/Dashboard.jsx): `frontend/src/components/Admin/Dashboard.jsx`
- [Review Administration](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/components/Admin/ReviewsTable.jsx): `frontend/src/components/Admin/ReviewsTable.jsx`

### Client State

- [Product Actions](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/productAction.js): `frontend/src/actions/productAction.js`
- [Order Actions](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/orderAction.js): `frontend/src/actions/orderAction.js`
- [User Actions](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/userAction.js): `frontend/src/actions/userAction.js`
- [Cart Actions](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/cartAction.js): `frontend/src/actions/cartAction.js`
- [Wishlist Actions](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/wishlistAction.js): `frontend/src/actions/wishlistAction.js`
- [Saved Item Actions](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/actions/saveForLaterAction.js): `frontend/src/actions/saveForLaterAction.js`
- [Redux Store](https://github.com/jigar-sable/flipkart-mern/blob/master/frontend/src/store.js): `frontend/src/store.js`

### Backend API

- [Express Application](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/app.js): `backend/app.js`
- [User Operations](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/userController.js): `backend/controllers/userController.js`
- [Product Operations](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/productController.js): `backend/controllers/productController.js`
- [Order Operations](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/orderController.js): `backend/controllers/orderController.js`
- [Payment Operations](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/controllers/paymentController.js): `backend/controllers/paymentController.js`
- [Authentication Guard](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/middlewares/auth.js): `backend/middlewares/auth.js`

### Commerce Data

- [Products](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/productModel.js): `backend/models/productModel.js`
- [Users](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/userModel.js): `backend/models/userModel.js`
- [Orders](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/orderModel.js): `backend/models/orderModel.js`
- [Payment Records](https://github.com/jigar-sable/flipkart-mern/blob/master/backend/models/paymentModel.js): `backend/models/paymentModel.js`

### External Services

- **Paytm Gateway**
- **Cloudinary**
- **SendGrid Mail**

### Other components

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

## Connections

- Shopper → Route Application: uses (evidence: `README.md`)
- Administrator → Route Application: uses (evidence: `README.md`)
- Route Application → Product Browsing: routes to (evidence: `frontend/src/App.js`)
- Route Application → Product Details: routes to (evidence: `frontend/src/App.js`)
- Route Application → Account Pages: routes to (evidence: `frontend/src/App.js`)
- Route Application → Order History: routes to (evidence: `frontend/src/App.js`)
- Route Application → Admin Dashboard: routes to (evidence: `frontend/src/App.js`)
- Product Browsing → Product Actions: dispatches (evidence: `frontend/src/components/Products/Products.jsx`)
- Product Details → Product Actions: dispatches (evidence: `frontend/src/components/ProductDetails/ProductDetails.jsx`)
- Product Details → Cart Actions: dispatches (evidence: `frontend/src/components/ProductDetails/ProductDetails.jsx`)
- Product Details → Wishlist Actions: dispatches (evidence: `frontend/src/components/ProductDetails/ProductDetails.jsx`)
- Cart and Saved Items → Cart Actions: dispatches
- Cart and Saved Items → Saved Item Actions: dispatches
- Checkout and Payment → Order Actions: dispatches (evidence: `frontend/src/components/Cart/Payment.jsx`)
- Order History → Order Actions: dispatches (evidence: `frontend/src/components/Order/MyOrders.jsx`)
- Account Pages → User Actions: uses
- Review Administration → Product Actions: dispatches (evidence: `frontend/src/components/Admin/ReviewsTable.jsx`)
- Route Application → Redux Store: dispatches through
- Product Actions → Express Application: requests API
- Order Actions → Express Application: requests API
- User Actions → Express Application: requests API
- Express Application → User Operations: mounts user routes (evidence: `backend/app.js`)
- Express Application → Product Operations: mounts product routes (evidence: `backend/app.js`)
- Express Application → Order Operations: mounts order routes (evidence: `backend/app.js`)
- Express Application → Payment Operations: mounts payment routes (evidence: `backend/app.js`)
- User Operations → Authentication Guard: guards routes (evidence: `backend/routes/userRoute.js`)
- Product Operations → Authentication Guard: guards routes (evidence: `backend/routes/productRoute.js`)
- Order Operations → Authentication Guard: guards routes (evidence: `backend/routes/orderRoute.js`)
- Payment Operations → Authentication Guard: guards routes (evidence: `backend/routes/paymentRoute.js`)
- User Operations → Users: reads and writes (evidence: `backend/controllers/userController.js`)
- Product Operations → Products: reads and writes (evidence: `backend/controllers/productController.js`)
- Order Operations → Orders: reads and writes (evidence: `backend/controllers/orderController.js`)
- Order Operations → Products: updates stock (evidence: `backend/controllers/orderController.js`)
- Payment Operations → Payment Records: records payments (evidence: `backend/controllers/paymentController.js`)
- Payment Operations → Paytm Gateway: verifies transactions (evidence: `backend/controllers/paymentController.js`)
- Product Operations → Cloudinary: uploads images (evidence: `backend/controllers/productController.js`)
- User Operations → Cloudinary: uploads avatars (evidence: `backend/controllers/userController.js`)
- Order Operations → SendGrid Mail: sends order email (evidence: `backend/controllers/orderController.js`)
- User Operations → SendGrid Mail: sends reset email (evidence: `backend/controllers/userController.js`)