# bell914/jsd13-group3-hydraranger architecture

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

- Interactive diagram: https://gitdiagram.com/bell914/jsd13-group3-hydraranger
- Repository: https://github.com/bell914/jsd13-group3-hydraranger

## Overview

OCCASION is a unisex fashion e-commerce product with separate customer and admin React applications backed by an Express/MongoDB API. The customer workflow runs from browsing products and lookbooks through cart, demo payment, order history, and profile; Mix & Match adds image-based outfit recommendations. Admin users manage catalog, orders, customers, content, coupons, and dashboard data. The graph preserves these documented capabilities; detailed wiring beyond the sampled routes, recommendation controller, and auth service is kept conservative.

Main entry points: [`client/src/routes/AppRoutes.jsx`](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/routes/AppRoutes.jsx) (Store routes), [`client/src/services/index.js`](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/services/index.js) (Customer API clients), [`server/src/services/authService.js`](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/authService.js) (Authentication service), [`server/src/models/index.js`](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/models/index.js) (Domain models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_customer["Customer storefront"]
  node_storefront["Customer app<br/>[App.jsx]"]
  node_storefront_routes["Store routes<br/>[AppRoutes.jsx]"]
  node_catalog["Product browsing"]
  node_lookbooks["Lookbooks"]
  node_mixmatch["Mix &amp; Match"]
  node_cart_checkout["Cart and checkout<br/>[CheckoutPage.jsx]"]
  node_profile["Profile and orders<br/>[ProfilePage.jsx]"]
  node_customer_services["Customer API clients<br/>[index.js]"]
end

subgraph group_admin["Admin operations"]
  node_admin_routes["Admin routes<br/>[AdminRoutes.jsx]"]
  node_admin_pages["Admin management"]
  node_admin_services["Admin API clients<br/>[adminApi.js]"]
end

subgraph group_api["API and domain"]
  node_api_app["Express API<br/>[app.js]"]
  node_api_routes["API routes<br/>[index.js]"]
  node_auth_routes["Auth endpoints<br/>[authRoutes.js]"]
  node_auth_controller["Auth controller<br/>[authController.js]"]
  node_recommend_controller["Recommendation handler"]
  node_commerce_services["Commerce services<br/>[orderService.js]"]
  node_content_services["Catalog and content<br/>[lookbookService.js]"]
  node_auth_service["Authentication service<br/>[authService.js]"]
end

subgraph group_state["Persistence and integrations"]
  node_mongodb[("MongoDB<br/>[db.js]")]
  node_domain_models["Domain models<br/>[index.js]"]
  node_gemini["Gemini AI"]
  node_email["SMTP email"]
end

node_shopper(("Shopper"))
node_admin_user(("Admin"))

node_shopper -->|"uses"| node_storefront
node_storefront -->|"renders routes"| node_storefront_routes
node_storefront_routes -->|"routes to"| node_catalog
node_storefront_routes -->|"routes to"| node_lookbooks
node_storefront_routes -->|"routes to"| node_mixmatch
node_storefront_routes -->|"routes to"| node_cart_checkout
node_storefront_routes -->|"routes to"| node_profile
node_catalog -->|"requests data"| node_customer_services
node_lookbooks -->|"requests data"| node_customer_services
node_mixmatch -->|"uploads image"| node_customer_services
node_cart_checkout -->|"requests checkout"| node_customer_services
node_profile -->|"requests account"| node_customer_services
node_customer_services -->|"calls API"| node_api_app
node_admin_user -->|"uses"| node_admin_routes
node_admin_routes -->|"routes to"| node_admin_pages
node_admin_pages -->|"requests management"| node_admin_services
node_admin_services -->|"calls API"| node_api_app
node_api_app -->|"mounts routes"| node_api_routes
node_api_routes -->|"dispatches auth"| node_auth_routes
node_auth_routes -->|"dispatches"| node_auth_controller
node_recommend_controller -->|"reads public looks"| node_content_services
node_recommend_controller -.->|"analyzes and ranks"| node_gemini
node_auth_service -->|"registers users"| node_auth_service
node_auth_service -.->|"sends messages"| node_email
node_commerce_services -->|"uses domain data"| node_domain_models
node_content_services -->|"uses content data"| node_domain_models
node_auth_service -->|"reads and writes users"| node_domain_models
node_domain_models -->|"persists data"| node_mongodb

click node_storefront "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/App.jsx"
click node_storefront_routes "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/routes/AppRoutes.jsx"
click node_catalog "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/ProductListPage.jsx"
click node_lookbooks "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/LookbookListPage.jsx"
click node_mixmatch "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/MixAndMatchPage.jsx"
click node_cart_checkout "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/CheckoutPage.jsx"
click node_profile "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/ProfilePage.jsx"
click node_customer_services "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/services/index.js"
click node_admin_routes "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/admin-client/src/routes/AdminRoutes.jsx"
click node_admin_pages "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/admin-client/src/pages/AdminProductsPage.jsx"
click node_admin_services "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/admin-client/src/services/adminApi.js"
click node_api_app "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/app.js"
click node_api_routes "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/routes/index.js"
click node_auth_routes "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/routes/authRoutes.js"
click node_auth_controller "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/controllers/authController.js"
click node_recommend_controller "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/controllers/recommendController.js"
click node_commerce_services "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/orderService.js"
click node_content_services "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/lookbookService.js"
click node_auth_service "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/authService.js"
click node_mongodb "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/config/db.js"
click node_domain_models "https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/models/index.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_storefront,node_storefront_routes,node_catalog,node_lookbooks,node_mixmatch,node_cart_checkout,node_profile,node_customer_services toneBlue
class node_admin_routes,node_admin_pages,node_admin_services toneAmber
class node_api_app,node_api_routes,node_auth_routes,node_auth_controller,node_recommend_controller,node_commerce_services,node_content_services,node_auth_service toneMint
class node_mongodb,node_domain_models,node_gemini,node_email toneRose
class node_shopper,node_admin_user toneIndigo
```

## Components

### Customer storefront

- [Customer app](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/App.jsx): `client/src/App.jsx`
- [Store routes](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/routes/AppRoutes.jsx): `client/src/routes/AppRoutes.jsx`
- [Product browsing](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/ProductListPage.jsx): `client/src/pages/ProductListPage.jsx`
- [Lookbooks](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/LookbookListPage.jsx): `client/src/pages/LookbookListPage.jsx`
- [Mix & Match](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/MixAndMatchPage.jsx): `client/src/pages/MixAndMatchPage.jsx`
- [Cart and checkout](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/CheckoutPage.jsx): `client/src/pages/CheckoutPage.jsx`
- [Profile and orders](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/pages/ProfilePage.jsx): `client/src/pages/ProfilePage.jsx`
- [Customer API clients](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/client/src/services/index.js): `client/src/services/index.js`

### Admin operations

- [Admin routes](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/admin-client/src/routes/AdminRoutes.jsx): `admin-client/src/routes/AdminRoutes.jsx`
- [Admin management](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/admin-client/src/pages/AdminProductsPage.jsx): `admin-client/src/pages/AdminProductsPage.jsx`
- [Admin API clients](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/admin-client/src/services/adminApi.js): `admin-client/src/services/adminApi.js`

### API and domain

- [Express API](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/app.js): `server/src/app.js`
- [API routes](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/routes/index.js): `server/src/routes/index.js`
- [Auth endpoints](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/routes/authRoutes.js): `server/src/routes/authRoutes.js`
- [Auth controller](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/controllers/authController.js): `server/src/controllers/authController.js`
- [Recommendation handler](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/controllers/recommendController.js): `server/src/controllers/recommendController.js`
- [Commerce services](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/orderService.js): `server/src/services/orderService.js`
- [Catalog and content](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/lookbookService.js): `server/src/services/lookbookService.js`
- [Authentication service](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/services/authService.js): `server/src/services/authService.js`

### Persistence and integrations

- [MongoDB](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/config/db.js): `server/src/config/db.js`
- [Domain models](https://github.com/bell914/jsd13-group3-hydraranger/blob/develop/server/src/models/index.js): `server/src/models/index.js`
- **Gemini AI**
- **SMTP email**

### Other components

- **Shopper**
- **Admin**

## Connections

- Shopper → Customer app: uses
- Customer app → Store routes: renders routes
- Store routes → Product browsing: routes to
- Store routes → Lookbooks: routes to
- Store routes → Mix & Match: routes to
- Store routes → Cart and checkout: routes to
- Store routes → Profile and orders: routes to
- Product browsing → Customer API clients: requests data
- Lookbooks → Customer API clients: requests data
- Mix & Match → Customer API clients: uploads image
- Cart and checkout → Customer API clients: requests checkout
- Profile and orders → Customer API clients: requests account
- Customer API clients → Express API: calls API
- Admin → Admin routes: uses
- Admin routes → Admin management: routes to
- Admin management → Admin API clients: requests management
- Admin API clients → Express API: calls API
- Express API → API routes: mounts routes
- API routes → Auth endpoints: dispatches auth
- Auth endpoints → Auth controller: dispatches
- Recommendation handler → Catalog and content: reads public looks
- Recommendation handler → Gemini AI: analyzes and ranks
- Authentication service → Authentication service: registers users
- Authentication service → SMTP email: sends messages
- Commerce services → Domain models: uses domain data
- Catalog and content → Domain models: uses content data
- Authentication service → Domain models: reads and writes users
- Domain models → MongoDB: persists data