# ras5014/codeemy-soplite architecture

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

- Interactive diagram: https://gitdiagram.com/ras5014/codeemy-soplite
- Repository: https://github.com/ras5014/codeemy-soplite

## Overview

ShopLite’s main workflow is a browser catalogue and locally persisted cart, followed by account sign-in and a protected demo checkout; the server validates cart choices, prices them from product records, and saves private order history. The graph separates the React UI, API/authentication, domain records and persistence. Relationships follow the supplied excerpts, SOURCE INDEX references and README; some client components and backend models are indexed but not excerpted, so their internal behavior is not expanded.

Main entry points: [`client/src/App.jsx`](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/App.jsx) (Shop app), [`server/src/server.js`](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/server.js) (Express API), [`server/src/routes/orderRoutes.js`](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/orderRoutes.js) (Order routes), [`client/src/api.js`](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Shop interface"]
  node_app["Shop app<br/>[App.jsx]"]
  node_authpanel["Account form<br/>[AuthPanel.jsx]"]
  node_cartpanel["Cart panel<br/>[CartPanel.jsx]"]
  node_orderspanel["Order history<br/>[OrdersPanel.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_productcard["Product card<br/>[ProductCard.jsx]"]
  node_session["Session context<br/>[AuthContext.jsx]"]
  node_priceformat["Price formatting<br/>[formatPrice.js]"]
end

subgraph group_api["API and identity"]
  node_apihelper["API client<br/>[api.js]"]
  node_express["Express API<br/>[server.js]"]
  node_authroutes["Account routes<br/>[authRoutes.js]"]
  node_productroutes["Product route<br/>[productRoutes.js]"]
  node_orderroutes["Order routes<br/>[orderRoutes.js]"]
  node_authguard["JWT guard<br/>[requireAuth.js]"]
end

subgraph group_domain["Shop records"]
  node_productmodel["Product records<br/>[Product.js]"]
  node_usermodel["User records<br/>[User.js]"]
  node_ordermodel["Order records<br/>[Order.js]"]
end

subgraph group_persistence["Persistence"]
  node_dbconfig["DB connection<br/>[db.js]"]
  node_mongodb[("MongoDB")]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_productcard
node_app -->|"renders"| node_authpanel
node_app -->|"renders"| node_cartpanel
node_app -->|"renders"| node_orderspanel
node_app -->|"reads session"| node_session
node_authpanel -->|"submits credentials"| node_apihelper
node_authpanel -->|"sets session"| node_session
node_app -->|"requests products and checkout"| node_apihelper
node_orderspanel -->|"loads orders"| node_apihelper
node_cartpanel -->|"formats totals"| node_priceformat
node_productcard -->|"formats price"| node_priceformat
node_orderspanel -->|"formats order prices"| node_priceformat
node_apihelper -->|"sends HTTP requests"| node_express
node_express -->|"connects database"| node_dbconfig
node_express -->|"mounts routes"| node_authroutes
node_express -->|"mounts routes"| node_productroutes
node_express -->|"mounts routes"| node_orderroutes
node_authroutes -->|"reads and creates users"| node_usermodel
node_productroutes -->|"reads active products"| node_productmodel
node_orderroutes -->|"guards requests"| node_authguard
node_orderroutes -->|"loads trusted prices"| node_productmodel
node_orderroutes -->|"creates and reads orders"| node_ordermodel
node_dbconfig -->|"connects"| node_mongodb
node_productmodel -->|"stores product data"| node_mongodb
node_usermodel -->|"stores account data"| node_mongodb
node_ordermodel -->|"stores order data"| node_mongodb

click node_app "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/App.jsx"
click node_authpanel "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/AuthPanel.jsx"
click node_cartpanel "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/CartPanel.jsx"
click node_orderspanel "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/OrdersPanel.jsx"
click node_navbar "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/Navbar.jsx"
click node_productcard "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/ProductCard.jsx"
click node_session "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/auth/AuthContext.jsx"
click node_priceformat "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/utils/formatPrice.js"
click node_apihelper "https://github.com/ras5014/codeemy-soplite/blob/main/client/src/api.js"
click node_express "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/server.js"
click node_authroutes "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/authRoutes.js"
click node_productroutes "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/productRoutes.js"
click node_orderroutes "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/orderRoutes.js"
click node_authguard "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/middleware/requireAuth.js"
click node_productmodel "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/models/Product.js"
click node_usermodel "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/models/User.js"
click node_ordermodel "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/models/Order.js"
click node_dbconfig "https://github.com/ras5014/codeemy-soplite/blob/main/server/src/config/db.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_authpanel,node_cartpanel,node_orderspanel,node_navbar,node_productcard,node_session,node_priceformat toneBlue
class node_apihelper,node_express,node_authroutes,node_productroutes,node_orderroutes,node_authguard toneAmber
class node_productmodel,node_usermodel,node_ordermodel toneMint
class node_dbconfig,node_mongodb toneRose
class node_shopper toneIndigo
```

## Components

### Shop interface

- [Shop app](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Account form](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/AuthPanel.jsx): `client/src/components/AuthPanel.jsx`
- [Cart panel](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/CartPanel.jsx): `client/src/components/CartPanel.jsx`
- [Order history](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/OrdersPanel.jsx): `client/src/components/OrdersPanel.jsx`
- [Navigation](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/Navbar.jsx): `client/src/components/Navbar.jsx`
- [Product card](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/components/ProductCard.jsx): `client/src/components/ProductCard.jsx`
- [Session context](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/auth/AuthContext.jsx): `client/src/auth/AuthContext.jsx`
- [Price formatting](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/utils/formatPrice.js): `client/src/utils/formatPrice.js`

### API and identity

- [API client](https://github.com/ras5014/codeemy-soplite/blob/main/client/src/api.js): `client/src/api.js`
- [Express API](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/server.js): `server/src/server.js`
- [Account routes](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/authRoutes.js): `server/src/routes/authRoutes.js`
- [Product route](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/productRoutes.js): `server/src/routes/productRoutes.js`
- [Order routes](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/routes/orderRoutes.js): `server/src/routes/orderRoutes.js`
- [JWT guard](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/middleware/requireAuth.js): `server/src/middleware/requireAuth.js`

### Shop records

- [Product records](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/models/Product.js): `server/src/models/Product.js`
- [User records](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/models/User.js): `server/src/models/User.js`
- [Order records](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/models/Order.js): `server/src/models/Order.js`

### Persistence

- [DB connection](https://github.com/ras5014/codeemy-soplite/blob/main/server/src/config/db.js): `server/src/config/db.js`
- **MongoDB**

### Other components

- **Shopper**

## Connections

- Shopper → Shop app: uses (evidence: `README.md`)
- Shop app → Navigation: renders (evidence: `client/src/App.jsx`)
- Shop app → Product card: renders (evidence: `client/src/App.jsx`)
- Shop app → Account form: renders (evidence: `client/src/App.jsx`)
- Shop app → Cart panel: renders (evidence: `client/src/App.jsx`)
- Shop app → Order history: renders (evidence: `client/src/App.jsx`)
- Shop app → Session context: reads session (evidence: `client/src/App.jsx`)
- Account form → API client: submits credentials (evidence: `client/src/components/AuthPanel.jsx`)
- Account form → Session context: sets session (evidence: `client/src/components/AuthPanel.jsx`)
- Shop app → API client: requests products and checkout (evidence: `client/src/App.jsx`)
- Order history → API client: loads orders (evidence: `client/src/components/OrdersPanel.jsx`)
- Cart panel → Price formatting: formats totals (evidence: `client/src/components/CartPanel.jsx`)
- Product card → Price formatting: formats price (evidence: `client/src/components/ProductCard.jsx`)
- Order history → Price formatting: formats order prices (evidence: `client/src/components/OrdersPanel.jsx`)
- API client → Express API: sends HTTP requests (evidence: `README.md`)
- Express API → DB connection: connects database (evidence: `server/src/server.js`)
- Express API → Account routes: mounts routes (evidence: `server/src/server.js`)
- Express API → Product route: mounts routes (evidence: `server/src/server.js`)
- Express API → Order routes: mounts routes (evidence: `server/src/server.js`)
- Account routes → User records: reads and creates users (evidence: `server/src/routes/authRoutes.js`)
- Product route → Product records: reads active products (evidence: `server/src/routes/productRoutes.js`)
- Order routes → JWT guard: guards requests (evidence: `server/src/routes/orderRoutes.js`)
- Order routes → Product records: loads trusted prices (evidence: `server/src/routes/orderRoutes.js`)
- Order routes → Order records: creates and reads orders (evidence: `server/src/routes/orderRoutes.js`)
- DB connection → MongoDB: connects (evidence: `server/src/config/db.js`)
- Product records → MongoDB: stores product data (evidence: `README.md`)
- User records → MongoDB: stores account data (evidence: `README.md`)
- Order records → MongoDB: stores order data (evidence: `README.md`)