# devareeba123/mini-shop-full-stack architecture

> Architecture diagram of the GitHub repository devareeba123/mini-shop-full-stack, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/devareeba123/mini-shop-full-stack
- Repository: https://github.com/devareeba123/mini-shop-full-stack

## Overview

Mini-Shop is a React/Vite storefront backed by an Express API and MongoDB. Shoppers browse products, add them to a locally persisted cart, authenticate, and submit COD orders; the backend verifies product stock and calculates totals before saving the order. Admins can manage products. The graph includes the main UI, API, authorization, and persistence layers. Some frontend-to-backend links are dashed because the sampled files do not show a single source proving the HTTP wiring end to end.

Main entry points: [`Frontend/vite-project/src/App.jsx`](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/App.jsx) (Routes and Providers), [`Backend/server.js`](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/server.js) (API Server), [`Frontend/vite-project/src/services/productService.js`](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/productService.js) (Product Service), [`Frontend/vite-project/src/pages/Checkout.jsx`](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Checkout.jsx) (Checkout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["Routes and Providers<br/>[App.jsx]"]
  node_catalog["Product Browsing<br/>[Products.jsx]"]
  node_product_detail["Product Details<br/>[ProductDetails.jsx]"]
  node_product_card["Product Card<br/>[ProductCard.jsx]"]
  node_cart_page["Cart<br/>[Cart.jsx]"]
  node_checkout["Checkout<br/>[Checkout.jsx]"]
  node_login_register["Account Pages<br/>[Login.jsx]"]
  node_order_history["Order History<br/>[MyOrders.jsx]"]
  node_admin_products["Admin Products<br/>[AdminProducts.jsx]"]
  node_admin_add["Add Product"]
end

subgraph group_customer["Customer State"]
  node_auth_state["Authentication State<br/>[AuthContext.jsx]"]
  node_cart_state["Cart State<br/>[CartContext.jsx]"]
  node_auth_service["Auth Service<br/>[authService.js]"]
  node_product_service["Product Service<br/>[productService.js]"]
  node_order_service["Order Service<br/>[orderService.js]"]
  node_api_client["API Client<br/>[api.js]"]
end

subgraph group_api["Express API"]
  node_server["API Server<br/>[server.js]"]
  node_user_routes["User Routes<br/>[userRoutes.js]"]
  node_product_routes["Product Routes<br/>[productRoutes.js]"]
  node_order_routes["Order Routes<br/>[orderRoutes.js]"]
  node_user_controller["Account Controller<br/>[userController.js]"]
  node_product_controller["Product Controller"]
  node_order_controller["Order Controller<br/>[orderController.js]"]
  node_auth_middleware["JWT Authorization<br/>[authMiddleware.js]"]
  node_token["Token Utility<br/>[generateToken.js]"]
end

subgraph group_data["Persistence"]
  node_db_config["Database Connection<br/>[db.js]"]
  node_user_model["User Model<br/>[user.js]"]
  node_product_model["Product Model<br/>[product.js]"]
  node_order_model["Order Model<br/>[order.js]"]
  node_mongo[("MongoDB")]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_app
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_product_detail
node_app -->|"routes to"| node_cart_page
node_app -->|"routes to"| node_checkout
node_app -->|"routes to"| node_login_register
node_app -->|"routes to"| node_order_history
node_app -->|"routes to"| node_admin_products
node_app -->|"routes to"| node_admin_add
node_app -->|"provides"| node_auth_state
node_app -->|"provides"| node_cart_state
node_catalog -->|"fetches products"| node_product_service
node_catalog -->|"renders"| node_product_card
node_product_detail -->|"fetches details"| node_product_service
node_product_detail -->|"adds items"| node_cart_state
node_cart_page -->|"updates cart"| node_cart_state
node_checkout -->|"reads cart"| node_cart_state
node_checkout -->|"reads identity"| node_auth_state
node_checkout -->|"submits order"| node_order_service
node_order_history -->|"fetches orders"| node_order_service
node_login_register -->|"authenticates"| node_auth_state
node_auth_state -->|"calls"| node_auth_service
node_auth_service -->|"sends requests"| node_api_client
node_product_service -->|"sends requests"| node_api_client
node_order_service -->|"sends requests"| node_api_client
node_admin_products -->|"manages products"| node_product_service
node_admin_add -->|"creates product"| node_product_service
node_server -->|"connects database"| node_db_config
node_server -->|"mounts routes"| node_user_routes
node_server -->|"mounts routes"| node_product_routes
node_server -->|"mounts routes"| node_order_routes
node_user_routes -->|"dispatches to"| node_user_controller
node_product_routes -->|"dispatches to"| node_product_controller
node_product_routes -->|"guards admin"| node_auth_middleware
node_order_routes -->|"dispatches to"| node_order_controller
node_order_routes -->|"guards access"| node_auth_middleware
node_user_controller -->|"reads and writes"| node_user_model
node_user_controller -->|"generates token"| node_token
node_auth_middleware -->|"loads user"| node_user_model
node_product_controller -->|"reads and writes"| node_product_model
node_order_controller -->|"verifies stock"| node_product_model
node_order_controller -->|"creates and reads"| node_order_model
node_db_config -->|"connects"| node_mongo
node_user_model -.->|"stores users"| node_mongo
node_product_model -.->|"stores products"| node_mongo
node_order_model -.->|"stores orders"| node_mongo
node_api_client -.->|"HTTP API"| node_server

click node_app "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/App.jsx"
click node_catalog "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Products.jsx"
click node_product_detail "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/ProductDetails.jsx"
click node_product_card "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/components/ProductCard.jsx"
click node_cart_page "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Cart.jsx"
click node_checkout "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Checkout.jsx"
click node_login_register "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Login.jsx"
click node_order_history "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/MyOrders.jsx"
click node_admin_products "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/admin/AdminProducts.jsx"
click node_admin_add "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/admin/AdminAddProduct.jsx"
click node_auth_state "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/context/AuthContext.jsx"
click node_cart_state "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/context/CartContext.jsx"
click node_auth_service "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/authService.js"
click node_product_service "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/productService.js"
click node_order_service "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/orderService.js"
click node_api_client "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/api.js"
click node_server "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/server.js"
click node_user_routes "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/routes/userRoutes.js"
click node_product_routes "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/routes/productRoutes.js"
click node_order_routes "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/routes/orderRoutes.js"
click node_user_controller "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/controllers/userController.js"
click node_product_controller "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/controllers/productController.js"
click node_order_controller "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/controllers/orderController.js"
click node_auth_middleware "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/middlewares/authMiddleware.js"
click node_token "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/utils/generateToken.js"
click node_db_config "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/config/db.js"
click node_user_model "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/models/user.js"
click node_product_model "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/models/product.js"
click node_order_model "https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/models/order.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_detail,node_product_card,node_cart_page,node_checkout,node_login_register,node_order_history,node_admin_products,node_admin_add toneBlue
class node_auth_state,node_cart_state,node_auth_service,node_product_service,node_order_service,node_api_client toneAmber
class node_server,node_user_routes,node_product_routes,node_order_routes,node_user_controller,node_product_controller,node_order_controller,node_auth_middleware,node_token toneMint
class node_db_config,node_user_model,node_product_model,node_order_model,node_mongo toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [Routes and Providers](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/App.jsx): `Frontend/vite-project/src/App.jsx`
- [Product Browsing](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Products.jsx): `Frontend/vite-project/src/pages/Products.jsx`
- [Product Details](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/ProductDetails.jsx): `Frontend/vite-project/src/pages/ProductDetails.jsx`
- [Product Card](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/components/ProductCard.jsx): `Frontend/vite-project/src/components/ProductCard.jsx`
- [Cart](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Cart.jsx): `Frontend/vite-project/src/pages/Cart.jsx`
- [Checkout](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Checkout.jsx): `Frontend/vite-project/src/pages/Checkout.jsx`
- [Account Pages](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/Login.jsx): `Frontend/vite-project/src/pages/Login.jsx`
- [Order History](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/MyOrders.jsx): `Frontend/vite-project/src/pages/MyOrders.jsx`
- [Admin Products](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/admin/AdminProducts.jsx): `Frontend/vite-project/src/pages/admin/AdminProducts.jsx`
- [Add Product](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/pages/admin/AdminAddProduct.jsx): `Frontend/vite-project/src/pages/admin/AdminAddProduct.jsx`

### Customer State

- [Authentication State](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/context/AuthContext.jsx): `Frontend/vite-project/src/context/AuthContext.jsx`
- [Cart State](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/context/CartContext.jsx): `Frontend/vite-project/src/context/CartContext.jsx`
- [Auth Service](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/authService.js): `Frontend/vite-project/src/services/authService.js`
- [Product Service](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/productService.js): `Frontend/vite-project/src/services/productService.js`
- [Order Service](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/orderService.js): `Frontend/vite-project/src/services/orderService.js`
- [API Client](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Frontend/vite-project/src/services/api.js): `Frontend/vite-project/src/services/api.js`

### Express API

- [API Server](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/server.js): `Backend/server.js`
- [User Routes](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/routes/userRoutes.js): `Backend/routes/userRoutes.js`
- [Product Routes](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/routes/productRoutes.js): `Backend/routes/productRoutes.js`
- [Order Routes](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/routes/orderRoutes.js): `Backend/routes/orderRoutes.js`
- [Account Controller](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/controllers/userController.js): `Backend/controllers/userController.js`
- [Product Controller](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/controllers/productController.js): `Backend/controllers/productController.js`
- [Order Controller](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/controllers/orderController.js): `Backend/controllers/orderController.js`
- [JWT Authorization](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/middlewares/authMiddleware.js): `Backend/middlewares/authMiddleware.js`
- [Token Utility](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/utils/generateToken.js): `Backend/utils/generateToken.js`

### Persistence

- [Database Connection](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/config/db.js): `Backend/config/db.js`
- [User Model](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/models/user.js): `Backend/models/user.js`
- [Product Model](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/models/product.js): `Backend/models/product.js`
- [Order Model](https://github.com/devareeba123/mini-shop-full-stack/blob/main/Backend/models/order.js): `Backend/models/order.js`
- **MongoDB**

### Other components

- **Shopper**

## Connections

- Shopper → Routes and Providers: uses (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Product Browsing: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Product Details: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Cart: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Checkout: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Account Pages: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Order History: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Admin Products: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Add Product: routes to (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Authentication State: provides (evidence: `Frontend/vite-project/src/App.jsx`)
- Routes and Providers → Cart State: provides (evidence: `Frontend/vite-project/src/App.jsx`)
- Product Browsing → Product Service: fetches products (evidence: `Frontend/vite-project/src/pages/Products.jsx`)
- Product Browsing → Product Card: renders (evidence: `Frontend/vite-project/src/pages/Products.jsx`)
- Product Details → Product Service: fetches details (evidence: `Frontend/vite-project/src/pages/ProductDetails.jsx`)
- Product Details → Cart State: adds items (evidence: `Frontend/vite-project/src/pages/ProductDetails.jsx`)
- Cart → Cart State: updates cart (evidence: `Frontend/vite-project/src/pages/Cart.jsx`)
- Checkout → Cart State: reads cart (evidence: `Frontend/vite-project/src/pages/Checkout.jsx`)
- Checkout → Authentication State: reads identity (evidence: `Frontend/vite-project/src/pages/Checkout.jsx`)
- Checkout → Order Service: submits order (evidence: `Frontend/vite-project/src/pages/Checkout.jsx`)
- Order History → Order Service: fetches orders (evidence: `Frontend/vite-project/src/pages/MyOrders.jsx`)
- Account Pages → Authentication State: authenticates (evidence: `Frontend/vite-project/src/pages/Login.jsx`)
- Authentication State → Auth Service: calls (evidence: `Frontend/vite-project/src/context/AuthContext.jsx`)
- Auth Service → API Client: sends requests (evidence: `Frontend/vite-project/src/services/authService.js`)
- Product Service → API Client: sends requests (evidence: `Frontend/vite-project/src/services/productService.js`)
- Order Service → API Client: sends requests (evidence: `Frontend/vite-project/src/services/orderService.js`)
- Admin Products → Product Service: manages products (evidence: `Frontend/vite-project/src/pages/admin/AdminProducts.jsx`)
- Add Product → Product Service: creates product (evidence: `Frontend/vite-project/src/pages/admin/AdminAddProduct.jsx`)
- API Server → Database Connection: connects database (evidence: `Backend/server.js`)
- API Server → User Routes: mounts routes (evidence: `Backend/server.js`)
- API Server → Product Routes: mounts routes (evidence: `Backend/server.js`)
- API Server → Order Routes: mounts routes (evidence: `Backend/server.js`)
- User Routes → Account Controller: dispatches to (evidence: `Backend/routes/userRoutes.js`)
- Product Routes → Product Controller: dispatches to (evidence: `Backend/routes/productRoutes.js`)
- Product Routes → JWT Authorization: guards admin (evidence: `Backend/routes/productRoutes.js`)
- Order Routes → Order Controller: dispatches to (evidence: `Backend/routes/orderRoutes.js`)
- Order Routes → JWT Authorization: guards access (evidence: `Backend/routes/orderRoutes.js`)
- Account Controller → User Model: reads and writes (evidence: `Backend/controllers/userController.js`)
- Account Controller → Token Utility: generates token (evidence: `Backend/controllers/userController.js`)
- JWT Authorization → User Model: loads user (evidence: `Backend/middlewares/authMiddleware.js`)
- Product Controller → Product Model: reads and writes (evidence: `Backend/controllers/productController.js`)
- Order Controller → Product Model: verifies stock (evidence: `Backend/controllers/orderController.js`)
- Order Controller → Order Model: creates and reads (evidence: `Backend/controllers/orderController.js`)
- Database Connection → MongoDB: connects (evidence: `Backend/config/db.js`)
- User Model → MongoDB: stores users
- Product Model → MongoDB: stores products
- Order Model → MongoDB: stores orders
- API Client → API Server: HTTP API