# beyoto/product architecture

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

- Interactive diagram: https://gitdiagram.com/beyoto/product
- Repository: https://github.com/beyoto/product
- Video tour (about a minute): https://gitdiagram.com/beyoto/product/video

## Overview

This repository implements a multi-store product catalog with a React storefront and administrator console backed by an Express API. Visitors browse product listings and detail pages, save favorites, and contact or share products; administrators authenticate, manage product listings and images, and view analytics. The backend also provides guest and authentication endpoints, brand-specific product and analytics routes, and scheduled view snapshots. The README is empty, so feature coverage is based on the tree and sampled files; wiring to unsampled route implementations is shown only where the server mounts them.

Main entry points: [`front/src/App.jsx`](https://github.com/beyoto/product/blob/main/front/src/App.jsx) (Application routes), [`back/src/app.js`](https://github.com/beyoto/product/blob/main/back/src/app.js) (Express application), [`front/src/api/axios.js`](https://github.com/beyoto/product/blob/main/front/src/api/axios.js) (HTTP client), [`back/src/config/db.js`](https://github.com/beyoto/product/blob/main/back/src/config/db.js) (PostgreSQL)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["Application routes<br/>[App.jsx]"]
  node_home["Product catalog<br/>[HomePage.jsx]"]
  node_detail["Product detail<br/>[ProductPage.jsx]"]
  node_favorites["Saved favorites"]
  node_contact["Contact page<br/>[ContactsPage.jsx]"]
end

subgraph group_admin["Administration"]
  node_authctx["Admin session<br/>[AuthContext.jsx]"]
  node_login["Admin login<br/>[AdminLogin.jsx]"]
  node_guard["Protected routes<br/>[ProtectedRoute.jsx]"]
  node_panel["Product management<br/>[AdminPanel.jsx]"]
  node_add["Create product<br/>[AddProduct.jsx]"]
  node_edit["Edit product<br/>[EditProduct.jsx]"]
  node_analyticsui["Analytics dashboard<br/>[AdminAnalytics.jsx]"]
end

subgraph group_backend["Backend API"]
  node_http["HTTP client<br/>[axios.js]"]
  node_server["Express application<br/>[app.js]"]
  node_productroutes["Product routes<br/>[products.js]"]
  node_imageroutes["Product image routes<br/>[productImages.js]"]
  node_brandroutes["Brand product routes"]
  node_authroutes["Authentication routes<br/>[auth.js]"]
  node_guestroutes["Guest routes<br/>[guests.js]"]
  node_analyticsroutes["Analytics routes<br/>[analytics.js]"]
  node_snapshots["View snapshot jobs"]
  node_authmw["JWT authorization<br/>[checkAuth.js]"]
end

subgraph group_ops["Data and services"]
  node_database[("PostgreSQL<br/>[db.js]")]
  node_cloudinary["Cloudinary setup<br/>[cloudinary.js]"]
end

node_visitor(("Shopper"))
node_adminactor(("Administrator"))

node_visitor -->|"opens"| node_app
node_adminactor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_detail
node_app -->|"routes to"| node_favorites
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_panel
node_app -->|"routes to"| node_add
node_app -->|"routes to"| node_edit
node_app -->|"routes to"| node_analyticsui
node_login -->|"sets session"| node_authctx
node_app -->|"protects admin"| node_guard
node_panel -->|"ends session"| node_authctx
node_home -->|"requests catalog"| node_http
node_detail -->|"requests product"| node_http
node_panel -->|"manages products"| node_http
node_add -->|"creates product"| node_http
node_edit -->|"updates product"| node_http
node_analyticsui -->|"requests metrics"| node_http
node_http -->|"HTTP requests"| node_server
node_server -->|"mounts products"| node_productroutes
node_server -->|"mounts images"| node_imageroutes
node_server -->|"mounts brand APIs"| node_brandroutes
node_server -->|"mounts auth"| node_authroutes
node_server -->|"mounts guests"| node_guestroutes
node_server -->|"mounts analytics"| node_analyticsroutes
node_server -->|"starts jobs"| node_snapshots
node_authroutes -->|"reads and writes"| node_database
node_productroutes -->|"reads and writes"| node_database
node_analyticsroutes -->|"queries metrics"| node_database
node_snapshots -->|"stores snapshots"| node_database
node_authroutes -.->|"uses JWT checks"| node_authmw
node_imageroutes -.->|"image operations"| node_cloudinary

click node_app "https://github.com/beyoto/product/blob/main/front/src/App.jsx"
click node_home "https://github.com/beyoto/product/blob/main/front/src/pages/home/HomePage.jsx"
click node_detail "https://github.com/beyoto/product/blob/main/front/src/pages/ProductPage/ProductPage.jsx"
click node_favorites "https://github.com/beyoto/product/blob/main/front/src/components/FavoritesContext.jsx"
click node_contact "https://github.com/beyoto/product/blob/main/front/src/pages/contactPage/ContactsPage.jsx"
click node_authctx "https://github.com/beyoto/product/blob/main/front/src/context/AuthContext.jsx"
click node_login "https://github.com/beyoto/product/blob/main/front/src/pages/adminLogin/AdminLogin.jsx"
click node_guard "https://github.com/beyoto/product/blob/main/front/src/components/ProtectedRoute.jsx"
click node_panel "https://github.com/beyoto/product/blob/main/front/src/pages/adminPanel/AdminPanel.jsx"
click node_add "https://github.com/beyoto/product/blob/main/front/src/pages/addProduct/AddProduct.jsx"
click node_edit "https://github.com/beyoto/product/blob/main/front/src/pages/editProduct/EditProduct.jsx"
click node_analyticsui "https://github.com/beyoto/product/blob/main/front/src/pages/adminAnalytics/AdminAnalytics.jsx"
click node_http "https://github.com/beyoto/product/blob/main/front/src/api/axios.js"
click node_server "https://github.com/beyoto/product/blob/main/back/src/app.js"
click node_productroutes "https://github.com/beyoto/product/blob/main/back/src/routes/products.js"
click node_imageroutes "https://github.com/beyoto/product/blob/main/back/src/routes/productImages.js"
click node_brandroutes "https://github.com/beyoto/product/tree/main/back/src/routes"
click node_authroutes "https://github.com/beyoto/product/blob/main/back/src/routes/auth.js"
click node_guestroutes "https://github.com/beyoto/product/blob/main/back/src/routes/guests.js"
click node_analyticsroutes "https://github.com/beyoto/product/blob/main/back/src/routes/analytics.js"
click node_snapshots "https://github.com/beyoto/product/blob/main/back/src/jobs/viewsSnapshotJob.js"
click node_authmw "https://github.com/beyoto/product/blob/main/back/src/middleware/checkAuth.js"
click node_database "https://github.com/beyoto/product/blob/main/back/src/config/db.js"
click node_cloudinary "https://github.com/beyoto/product/blob/main/back/src/config/cloudinary.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_home,node_detail,node_favorites,node_contact toneBlue
class node_authctx,node_login,node_guard,node_panel,node_add,node_edit,node_analyticsui toneAmber
class node_http,node_server,node_productroutes,node_imageroutes,node_brandroutes,node_authroutes,node_guestroutes,node_analyticsroutes,node_snapshots,node_authmw toneMint
class node_database,node_cloudinary toneRose
class node_visitor,node_adminactor toneIndigo
```

## Components

### Storefront

- [Application routes](https://github.com/beyoto/product/blob/main/front/src/App.jsx): `front/src/App.jsx`
- [Product catalog](https://github.com/beyoto/product/blob/main/front/src/pages/home/HomePage.jsx): `front/src/pages/home/HomePage.jsx`
- [Product detail](https://github.com/beyoto/product/blob/main/front/src/pages/ProductPage/ProductPage.jsx): `front/src/pages/ProductPage/ProductPage.jsx`
- [Saved favorites](https://github.com/beyoto/product/blob/main/front/src/components/FavoritesContext.jsx): `front/src/components/FavoritesContext.jsx`
- [Contact page](https://github.com/beyoto/product/blob/main/front/src/pages/contactPage/ContactsPage.jsx): `front/src/pages/contactPage/ContactsPage.jsx`

### Administration

- [Admin session](https://github.com/beyoto/product/blob/main/front/src/context/AuthContext.jsx): `front/src/context/AuthContext.jsx`
- [Admin login](https://github.com/beyoto/product/blob/main/front/src/pages/adminLogin/AdminLogin.jsx): `front/src/pages/adminLogin/AdminLogin.jsx`
- [Protected routes](https://github.com/beyoto/product/blob/main/front/src/components/ProtectedRoute.jsx): `front/src/components/ProtectedRoute.jsx`
- [Product management](https://github.com/beyoto/product/blob/main/front/src/pages/adminPanel/AdminPanel.jsx): `front/src/pages/adminPanel/AdminPanel.jsx`
- [Create product](https://github.com/beyoto/product/blob/main/front/src/pages/addProduct/AddProduct.jsx): `front/src/pages/addProduct/AddProduct.jsx`
- [Edit product](https://github.com/beyoto/product/blob/main/front/src/pages/editProduct/EditProduct.jsx): `front/src/pages/editProduct/EditProduct.jsx`
- [Analytics dashboard](https://github.com/beyoto/product/blob/main/front/src/pages/adminAnalytics/AdminAnalytics.jsx): `front/src/pages/adminAnalytics/AdminAnalytics.jsx`

### Backend API

- [HTTP client](https://github.com/beyoto/product/blob/main/front/src/api/axios.js): `front/src/api/axios.js`
- [Express application](https://github.com/beyoto/product/blob/main/back/src/app.js): `back/src/app.js`
- [Product routes](https://github.com/beyoto/product/blob/main/back/src/routes/products.js): `back/src/routes/products.js`
- [Product image routes](https://github.com/beyoto/product/blob/main/back/src/routes/productImages.js): `back/src/routes/productImages.js`
- [Brand product routes](https://github.com/beyoto/product/tree/main/back/src/routes): `back/src/routes`
- [Authentication routes](https://github.com/beyoto/product/blob/main/back/src/routes/auth.js): `back/src/routes/auth.js`
- [Guest routes](https://github.com/beyoto/product/blob/main/back/src/routes/guests.js): `back/src/routes/guests.js`
- [Analytics routes](https://github.com/beyoto/product/blob/main/back/src/routes/analytics.js): `back/src/routes/analytics.js`
- [View snapshot jobs](https://github.com/beyoto/product/blob/main/back/src/jobs/viewsSnapshotJob.js): `back/src/jobs/viewsSnapshotJob.js`
- [JWT authorization](https://github.com/beyoto/product/blob/main/back/src/middleware/checkAuth.js): `back/src/middleware/checkAuth.js`

### Data and services

- [PostgreSQL](https://github.com/beyoto/product/blob/main/back/src/config/db.js): `back/src/config/db.js`
- [Cloudinary setup](https://github.com/beyoto/product/blob/main/back/src/config/cloudinary.js): `back/src/config/cloudinary.js`

### Other components

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

## Connections

- Shopper → Application routes: opens
- Administrator → Application routes: opens
- Application routes → Product catalog: routes to
- Application routes → Product detail: routes to
- Application routes → Saved favorites: routes to
- Application routes → Contact page: routes to
- Application routes → Admin login: routes to
- Application routes → Product management: routes to
- Application routes → Create product: routes to
- Application routes → Edit product: routes to
- Application routes → Analytics dashboard: routes to
- Admin login → Admin session: sets session
- Application routes → Protected routes: protects admin
- Product management → Admin session: ends session
- Product catalog → HTTP client: requests catalog
- Product detail → HTTP client: requests product
- Product management → HTTP client: manages products
- Create product → HTTP client: creates product
- Edit product → HTTP client: updates product
- Analytics dashboard → HTTP client: requests metrics
- HTTP client → Express application: HTTP requests
- Express application → Product routes: mounts products
- Express application → Product image routes: mounts images
- Express application → Brand product routes: mounts brand APIs
- Express application → Authentication routes: mounts auth
- Express application → Guest routes: mounts guests
- Express application → Analytics routes: mounts analytics
- Express application → View snapshot jobs: starts jobs
- Authentication routes → PostgreSQL: reads and writes
- Product routes → PostgreSQL: reads and writes
- Analytics routes → PostgreSQL: queries metrics
- View snapshot jobs → PostgreSQL: stores snapshots
- Authentication routes → JWT authorization: uses JWT checks
- Product image routes → Cloudinary setup: image operations