# shreyas-sv1/local-shop-ordering-billing-system architecture

> Architecture diagram of the GitHub repository shreyas-sv1/local-shop-ordering-billing-system, 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/shreyas-sv1/local-shop-ordering-billing-system
- Repository: https://github.com/shreyas-sv1/local-shop-ordering-billing-system

## Overview

This is a React grocery-ordering application backed by an Express REST API and MySQL. Customers sign in, browse and search products, manage a cart, submit an order, and view order history or bills; admins manage products and orders, review dashboard statistics, and generate bills. The graph follows the documented product workflow and the sampled routing/controller code. Several frontend pages and the database connection are represented by their tree paths, but their implementation details were not sampled, so uncertain internal calls are omitted.

Main entry points: [`src/utils/api.js`](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/utils/api.js) (HTTP API client), [`src/App.js`](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/App.js) (React app and routes), [`src/pages/Home.js`](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Home.js) (Product browsing), [`src/admin/AdminPanel.js`](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/AdminPanel.js) (Admin panel)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_app["React app and routes<br/>[App.js]"]
  node_home["Product browsing<br/>[Home.js]"]
  node_search["Product search<br/>[ProductSearch.js]"]
  node_cart["Shopping cart<br/>[Cart.js]"]
  node_history["Order history<br/>[OrderHistory.js]"]
  node_customer_bill["Customer bill view<br/>[CustomerBill.js]"]
end

subgraph group_identity["Identity and access"]
  node_login["Login<br/>[Login.js]"]
  node_signup["Signup<br/>[Signup.js]"]
  node_auth_context["Auth state<br/>[AuthContext.js]"]
end

subgraph group_admin["Admin operations"]
  node_admin_panel["Admin panel<br/>[AdminPanel.js]"]
  node_admin_products["Product management<br/>[Products.js]"]
  node_admin_orders["Order management<br/>[Orders.js]"]
  node_dashboard["Dashboard statistics<br/>[Dashboard.js]"]
  node_bill_generator["Bill generation<br/>[BillGenerator.js]"]
end

subgraph group_backend["API and persistence"]
  node_api["HTTP API client<br/>[api.js]"]
  node_server["Express API server<br/>[server.js]"]
  node_product_routes["Product routes<br/>[productRoutes.js]"]
  node_order_routes["Order routes<br/>[orderRoutes.js]"]
  node_auth_routes["Auth routes<br/>[authRoutes.js]"]
  node_product_controller["Product operations"]
  node_order_controller["Order and bill operations<br/>[orderController.js]"]
  node_auth_controller["Auth operations<br/>[authController.js]"]
  node_auth_middleware["JWT and role checks<br/>[authMiddleware.js]"]
  node_db_pool["MySQL connection pool<br/>[db.js]"]
  node_database[("Shop data<br/>[database.sql]")]
end

node_customer(("Customer"))
node_admin_actor(("Administrator"))

node_customer -->|"uses"| node_app
node_admin_actor -->|"uses"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_history
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_app -->|"routes to"| node_admin_panel
node_app -->|"provides auth"| node_auth_context
node_home -->|"filters products"| node_search
node_home -->|"manages cart"| node_cart
node_home -->|"requests products and orders"| node_api
node_history -->|"requests orders"| node_api
node_customer_bill -->|"requests bill"| node_api
node_login -->|"submits credentials"| node_api
node_signup -->|"submits registration"| node_api
node_admin_panel -->|"presents"| node_admin_products
node_admin_panel -->|"presents"| node_admin_orders
node_admin_panel -->|"presents"| node_dashboard
node_admin_orders -->|"generates bill"| node_bill_generator
node_admin_products -->|"manages products"| node_api
node_admin_orders -->|"manages orders"| node_api
node_dashboard -->|"requests statistics"| node_api
node_bill_generator -->|"requests bill operations"| node_api
node_api -->|"sends HTTP requests"| node_server
node_server -->|"dispatches products"| node_product_routes
node_server -->|"dispatches orders"| node_order_routes
node_server -->|"dispatches auth"| node_auth_routes
node_product_routes -->|"dispatches handlers"| node_product_controller
node_order_routes -->|"dispatches handlers"| node_order_controller
node_auth_routes -->|"dispatches handlers"| node_auth_controller
node_order_routes -->|"checks access"| node_auth_middleware
node_product_routes -->|"checks admin access"| node_auth_middleware
node_auth_routes -->|"checks identity"| node_auth_middleware
node_product_controller -->|"queries products"| node_db_pool
node_order_controller -->|"queries orders and bills"| node_db_pool
node_auth_controller -->|"queries users"| node_db_pool
node_db_pool -->|"reads and writes"| node_database

click node_app "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/App.js"
click node_home "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Home.js"
click node_search "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/components/ProductSearch.js"
click node_cart "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/components/Cart.js"
click node_history "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/OrderHistory.js"
click node_customer_bill "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/components/CustomerBill.js"
click node_login "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Login.js"
click node_signup "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Signup.js"
click node_auth_context "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/context/AuthContext.js"
click node_admin_panel "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/AdminPanel.js"
click node_admin_products "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/Products.js"
click node_admin_orders "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/Orders.js"
click node_dashboard "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/Dashboard.js"
click node_bill_generator "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/BillGenerator.js"
click node_api "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/utils/api.js"
click node_server "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/server.js"
click node_product_routes "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/routes/productRoutes.js"
click node_order_routes "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/routes/orderRoutes.js"
click node_auth_routes "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/routes/authRoutes.js"
click node_product_controller "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/controllers/productController.js"
click node_order_controller "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/controllers/orderController.js"
click node_auth_controller "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/controllers/authController.js"
click node_auth_middleware "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/middleware/authMiddleware.js"
click node_db_pool "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/db.js"
click node_database "https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/database.sql"

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_home,node_search,node_cart,node_history,node_customer_bill toneBlue
class node_login,node_signup,node_auth_context toneAmber
class node_admin_panel,node_admin_products,node_admin_orders,node_dashboard,node_bill_generator toneMint
class node_api,node_server,node_product_routes,node_order_routes,node_auth_routes,node_product_controller,node_order_controller,node_auth_controller,node_auth_middleware,node_db_pool,node_database toneRose
class node_customer,node_admin_actor toneIndigo
```

## Components

### Customer storefront

- [React app and routes](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/App.js): `src/App.js`
- [Product browsing](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Home.js): `src/pages/Home.js`
- [Product search](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/components/ProductSearch.js): `src/components/ProductSearch.js`
- [Shopping cart](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/components/Cart.js): `src/components/Cart.js`
- [Order history](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/OrderHistory.js): `src/pages/OrderHistory.js`
- [Customer bill view](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/components/CustomerBill.js): `src/components/CustomerBill.js`

### Identity and access

- [Login](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Login.js): `src/pages/Login.js`
- [Signup](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/pages/Signup.js): `src/pages/Signup.js`
- [Auth state](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/context/AuthContext.js): `src/context/AuthContext.js`

### Admin operations

- [Admin panel](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/AdminPanel.js): `src/admin/AdminPanel.js`
- [Product management](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/Products.js): `src/admin/Products.js`
- [Order management](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/Orders.js): `src/admin/Orders.js`
- [Dashboard statistics](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/Dashboard.js): `src/admin/Dashboard.js`
- [Bill generation](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/admin/BillGenerator.js): `src/admin/BillGenerator.js`

### API and persistence

- [HTTP API client](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/src/utils/api.js): `src/utils/api.js`
- [Express API server](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/server.js): `backend/server.js`
- [Product routes](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/routes/productRoutes.js): `backend/routes/productRoutes.js`
- [Order routes](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/routes/orderRoutes.js): `backend/routes/orderRoutes.js`
- [Auth routes](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/routes/authRoutes.js): `backend/routes/authRoutes.js`
- [Product operations](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/controllers/productController.js): `backend/controllers/productController.js`
- [Order and bill operations](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/controllers/orderController.js): `backend/controllers/orderController.js`
- [Auth operations](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/controllers/authController.js): `backend/controllers/authController.js`
- [JWT and role checks](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/middleware/authMiddleware.js): `backend/middleware/authMiddleware.js`
- [MySQL connection pool](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/db.js): `backend/db.js`
- [Shop data](https://github.com/shreyas-sv1/local-shop-ordering-billing-system/blob/main/backend/database.sql): `backend/database.sql`

### Other components

- **Customer**
- **Administrator**

## Connections

- Customer → React app and routes: uses
- Administrator → React app and routes: uses
- React app and routes → Product browsing: routes to
- React app and routes → Order history: routes to
- React app and routes → Login: routes to
- React app and routes → Signup: routes to
- React app and routes → Admin panel: routes to
- React app and routes → Auth state: provides auth
- Product browsing → Product search: filters products
- Product browsing → Shopping cart: manages cart
- Product browsing → HTTP API client: requests products and orders
- Order history → HTTP API client: requests orders
- Customer bill view → HTTP API client: requests bill
- Login → HTTP API client: submits credentials
- Signup → HTTP API client: submits registration
- Admin panel → Product management: presents
- Admin panel → Order management: presents
- Admin panel → Dashboard statistics: presents
- Order management → Bill generation: generates bill
- Product management → HTTP API client: manages products
- Order management → HTTP API client: manages orders
- Dashboard statistics → HTTP API client: requests statistics
- Bill generation → HTTP API client: requests bill operations
- HTTP API client → Express API server: sends HTTP requests
- Express API server → Product routes: dispatches products
- Express API server → Order routes: dispatches orders
- Express API server → Auth routes: dispatches auth
- Product routes → Product operations: dispatches handlers
- Order routes → Order and bill operations: dispatches handlers
- Auth routes → Auth operations: dispatches handlers
- Order routes → JWT and role checks: checks access
- Product routes → JWT and role checks: checks admin access
- Auth routes → JWT and role checks: checks identity
- Product operations → MySQL connection pool: queries products
- Order and bill operations → MySQL connection pool: queries orders and bills
- Auth operations → MySQL connection pool: queries users
- MySQL connection pool → Shop data: reads and writes