# harsh-100/daily-mern-stack architecture

> Architecture diagram of the GitHub repository harsh-100/daily-mern-stack, 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/harsh-100/daily-mern-stack
- Repository: https://github.com/harsh-100/daily-mern-stack

## Overview

This is a MERN learning repository containing standalone exercises and several sample applications. The clearest end-to-end product workflow is the E-commerce-project storefront: users browse products, manage a cart, and sellers manage products, alongside registration and login. Its React client and Express/MongoDB server are distinct layers; the tree and excerpts also show separate React and Node learning projects. Some client-to-server request wiring and several listed modules were not excerpted, so those links are omitted rather than inferred.

Main entry points: [`E-commerce-project/client/src/App.jsx`](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/App.jsx) (Routes and pages), [`E-commerce-project/client/src/component/homePage.jsx`](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/homePage.jsx) (Product browsing), [`E-commerce-project/client/src/component/header.jsx`](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/header.jsx) (Navigation and cart badge), [`E-commerce-project/server/server.js`](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/server.js) (Express app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["E-commerce client"]
  node_client_app["Routes and pages<br/>[App.jsx]"]
  node_home["Product browsing<br/>[homePage.jsx]"]
  node_header["Navigation and cart badge<br/>[header.jsx]"]
  node_cart_ui["Cart page<br/>[cartpage.jsx]"]
  node_login["Login<br/>[loginPage.jsx]"]
  node_register["Registration<br/>[registerForm.jsx]"]
  node_seller_list["Seller products"]
  node_product_form["Product editor<br/>[addNewProduct.jsx]"]
  node_client_auth["Route access and roles<br/>[userRoles.js]"]
  node_user_actions["User actions<br/>[userActions.js]"]
  node_client_store["Redux store<br/>[store.js]"]
  node_theme["Theme context<br/>[theme.jsx]"]
end

subgraph group_backend["E-commerce server"]
  node_api_server["Express app<br/>[server.js]"]
  node_api_routes["API route index<br/>[index.js]"]
  node_product_routes["Product routes<br/>[productRoutes.js]"]
  node_product_controller["Product operations"]
  node_product_model[("Product records<br/>[productModel.js]")]
  node_cart_controller["Cart operations<br/>[cartController.js]"]
  node_cart_model[("Cart records<br/>[cartModel.js]")]
  node_db_connection[("Database connection<br/>[db.js]")]
end

subgraph group_samples["Learning projects"]
  node_react_samples["React app examples<br/>[App.jsx]"]
  node_todo_sample["Local-storage todo"]
  node_redux_sample["Redux example<br/>[App.js]"]
  node_ecommerce_sample["Alternate storefront<br/>[App.jsx]"]
  node_node_sample["Node API example<br/>[server.js]"]
  node_node_user[("User model example<br/>[userModel.js]")]
end

subgraph group_practice["JavaScript practice"]
  node_js_examples["JavaScript exercises<br/>[arrayMethods.js]"]
end

node_shopper(("Shopper"))
node_seller(("Seller"))

node_shopper -->|"opens storefront"| node_client_app
node_seller -->|"opens storefront"| node_client_app
node_client_app -->|"routes to"| node_home
node_client_app -.->|"renders"| node_header
node_client_app -->|"routes to"| node_cart_ui
node_client_app -->|"routes to"| node_login
node_client_app -->|"routes to"| node_register
node_client_app -->|"routes to"| node_seller_list
node_client_app -->|"routes to"| node_product_form
node_client_app -->|"checks role"| node_client_auth
node_login -->|"uses actions"| node_user_actions
node_register -->|"uses actions"| node_user_actions
node_home -->|"renders"| node_header
node_home -.->|"adds products"| node_cart_ui
node_header -->|"reads cart state"| node_client_store
node_api_server -->|"mounts routes"| node_api_routes
node_api_server -->|"connects database"| node_db_connection
node_product_routes -->|"dispatches requests"| node_product_controller
node_product_controller -->|"queries records"| node_product_model
node_cart_controller -->|"reads and writes"| node_cart_model
node_react_samples -->|"imports component"| node_todo_sample
node_ecommerce_sample -.->|"separate example"| node_react_samples
node_node_sample -->|"uses model"| node_node_user

click node_client_app "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/App.jsx"
click node_home "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/homePage.jsx"
click node_header "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/header.jsx"
click node_cart_ui "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/cartpage.jsx"
click node_login "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/loginPage.jsx"
click node_register "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/registerForm.jsx"
click node_seller_list "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/seller-product-page.jsx"
click node_product_form "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/addNewProduct.jsx"
click node_client_auth "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/constants/userRoles.js"
click node_user_actions "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/store/actions/userActions.js"
click node_client_store "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/store/store.js"
click node_theme "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/theme.jsx"
click node_api_server "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/server.js"
click node_api_routes "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/routes/index.js"
click node_product_routes "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/routes/productRoutes.js"
click node_product_controller "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/controllers/productController.js"
click node_product_model "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/models/productModel.js"
click node_cart_controller "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/controllers/cartController.js"
click node_cart_model "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/models/cartModel.js"
click node_db_connection "https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/config/db.js"
click node_react_samples "https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/first-react-app/src/App.jsx"
click node_todo_sample "https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/first-react-app/src/prepare/todo-with-localstorage.js"
click node_redux_sample "https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/redux-app/src/App.js"
click node_ecommerce_sample "https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/react-ecommerce-app/src/App.jsx"
click node_node_sample "https://github.com/harsh-100/daily-mern-stack/blob/main/node-development/second-node-app/server.js"
click node_node_user "https://github.com/harsh-100/daily-mern-stack/blob/main/node-development/second-node-app/model/userModel.js"
click node_js_examples "https://github.com/harsh-100/daily-mern-stack/blob/main/day-27/prepare/arrayMethods.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_client_app,node_home,node_header,node_cart_ui,node_login,node_register,node_seller_list,node_product_form,node_client_auth,node_user_actions,node_client_store,node_theme toneBlue
class node_api_server,node_api_routes,node_product_routes,node_product_controller,node_product_model,node_cart_controller,node_cart_model,node_db_connection toneAmber
class node_react_samples,node_todo_sample,node_redux_sample,node_ecommerce_sample,node_node_sample,node_node_user toneMint
class node_js_examples toneRose
class node_shopper,node_seller toneIndigo
```

## Components

### E-commerce client

- [Routes and pages](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/App.jsx): `E-commerce-project/client/src/App.jsx`
- [Product browsing](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/homePage.jsx): `E-commerce-project/client/src/component/homePage.jsx`
- [Navigation and cart badge](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/header.jsx): `E-commerce-project/client/src/component/header.jsx`
- [Cart page](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/cartpage.jsx): `E-commerce-project/client/src/component/cartpage.jsx`
- [Login](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/loginPage.jsx): `E-commerce-project/client/src/component/loginPage.jsx`
- [Registration](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/registerForm.jsx): `E-commerce-project/client/src/component/registerForm.jsx`
- [Seller products](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/seller-product-page.jsx): `E-commerce-project/client/src/component/seller-product-page.jsx`
- [Product editor](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/component/addNewProduct.jsx): `E-commerce-project/client/src/component/addNewProduct.jsx`
- [Route access and roles](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/constants/userRoles.js): `E-commerce-project/client/src/constants/userRoles.js`
- [User actions](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/store/actions/userActions.js): `E-commerce-project/client/src/store/actions/userActions.js`
- [Redux store](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/store/store.js): `E-commerce-project/client/src/store/store.js`
- [Theme context](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/client/src/theme.jsx): `E-commerce-project/client/src/theme.jsx`

### E-commerce server

- [Express app](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/server.js): `E-commerce-project/server/server.js`
- [API route index](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/routes/index.js): `E-commerce-project/server/routes/index.js`
- [Product routes](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/routes/productRoutes.js): `E-commerce-project/server/routes/productRoutes.js`
- [Product operations](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/controllers/productController.js): `E-commerce-project/server/controllers/productController.js`
- [Product records](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/models/productModel.js): `E-commerce-project/server/models/productModel.js`
- [Cart operations](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/controllers/cartController.js): `E-commerce-project/server/controllers/cartController.js`
- [Cart records](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/models/cartModel.js): `E-commerce-project/server/models/cartModel.js`
- [Database connection](https://github.com/harsh-100/daily-mern-stack/blob/main/E-commerce-project/server/config/db.js): `E-commerce-project/server/config/db.js`

### Learning projects

- [React app examples](https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/first-react-app/src/App.jsx): `react-projects/first-react-app/src/App.jsx`
- [Local-storage todo](https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/first-react-app/src/prepare/todo-with-localstorage.js): `react-projects/first-react-app/src/prepare/todo-with-localstorage.js`
- [Redux example](https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/redux-app/src/App.js): `react-projects/redux-app/src/App.js`
- [Alternate storefront](https://github.com/harsh-100/daily-mern-stack/blob/main/react-projects/react-ecommerce-app/src/App.jsx): `react-projects/react-ecommerce-app/src/App.jsx`
- [Node API example](https://github.com/harsh-100/daily-mern-stack/blob/main/node-development/second-node-app/server.js): `node-development/second-node-app/server.js`
- [User model example](https://github.com/harsh-100/daily-mern-stack/blob/main/node-development/second-node-app/model/userModel.js): `node-development/second-node-app/model/userModel.js`

### JavaScript practice

- [JavaScript exercises](https://github.com/harsh-100/daily-mern-stack/blob/main/day-27/prepare/arrayMethods.js): `day-27/prepare/arrayMethods.js`

### Other components

- **Shopper**
- **Seller**

## Connections

- Shopper → Routes and pages: opens storefront (evidence: `E-commerce-project/client/src/App.jsx`)
- Seller → Routes and pages: opens storefront (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Product browsing: routes to (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Navigation and cart badge: renders (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Cart page: routes to (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Login: routes to (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Registration: routes to (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Seller products: routes to (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Product editor: routes to (evidence: `E-commerce-project/client/src/App.jsx`)
- Routes and pages → Route access and roles: checks role (evidence: `E-commerce-project/client/src/App.jsx`)
- Login → User actions: uses actions (evidence: `E-commerce-project/client/src/component/loginPage.jsx`)
- Registration → User actions: uses actions (evidence: `E-commerce-project/client/src/component/registerForm.jsx`)
- Product browsing → Navigation and cart badge: renders (evidence: `E-commerce-project/client/src/component/homePage.jsx`)
- Product browsing → Cart page: adds products
- Navigation and cart badge → Redux store: reads cart state (evidence: `E-commerce-project/client/src/component/header.jsx`)
- Express app → API route index: mounts routes (evidence: `E-commerce-project/server/server.js`)
- Express app → Database connection: connects database (evidence: `E-commerce-project/server/server.js`)
- Product routes → Product operations: dispatches requests (evidence: `E-commerce-project/server/routes/productRoutes.js`)
- Product operations → Product records: queries records (evidence: `E-commerce-project/server/controllers/productController.js`)
- Cart operations → Cart records: reads and writes (evidence: `E-commerce-project/server/controllers/cartController.js`)
- React app examples → Local-storage todo: imports component (evidence: `react-projects/first-react-app/src/App.jsx`)
- Alternate storefront → React app examples: separate example
- Node API example → User model example: uses model (evidence: `node-development/second-node-app/server.js`)