# alisamershaboot19/ecommercefullstackproject architecture

> Architecture diagram of the GitHub repository alisamershaboot19/ecommercefullstackproject, 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/alisamershaboot19/ecommercefullstackproject
- Repository: https://github.com/alisamershaboot19/ecommercefullstackproject
- Video tour (about a minute): https://gitdiagram.com/alisamershaboot19/ecommercefullstackproject/video

## Overview

This repository implements an authenticated commerce storefront: customers browse products, create a checkout, pay through Polar, then view orders and access support chat/video; staff manage products and support orders. The backend also synchronizes Clerk identities and processes payment and identity webhooks. The sampled frontend currently shows only Clerk sign-in/sign-up and user controls, so the richer storefront workflow is represented by the backend APIs and documented integration code rather than inferred frontend screens. Several route, webhook, schema, and job implementations were not sampled; their wiring is shown only where entry-point imports establish it.

Main entry points: [`backend/src/index.ts`](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/index.ts) (Express entry), [`backend/src/db/index.ts`](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/db/index.ts) (Commerce database), [`backend/src/lib/users.ts`](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/users.ts) (Local user lookup), [`frontend/src/App.jsx`](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/frontend/src/App.jsx) (React app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_frontend["React app<br/>[App.jsx]"]
  node_bootstrap["Frontend bootstrap<br/>[main.jsx]"]
  node_server["Express entry<br/>[index.ts]"]
  node_catalog["Product catalog"]
  node_product_routes["Product routes<br/>[productRouter.ts]"]
end

subgraph group_commerce["Commerce"]
  node_checkout["Checkout orchestration"]
  node_checkout_routes["Checkout routes<br/>[checkoutRouter.ts]"]
  node_polar_helper["Polar checkout client<br/>[polar.ts]"]
  node_polar_webhook["Payment webhook<br/>[polar.ts]"]
  node_orders["Order operations<br/>[orderController.ts]"]
  node_order_routes["Order routes<br/>[orderRoute.ts]"]
  node_db[("Commerce database<br/>[index.ts]")]
  node_schema["Data model<br/>[schema.ts]"]
end

subgraph group_identity["Identity"]
  node_clerk["Clerk identity"]
  node_clerk_webhook["Identity webhook<br/>[clerk.ts]"]
  node_user_helper["Local user lookup<br/>[users.ts]"]
  node_me["Account endpoint<br/>[meController.ts]"]
end

subgraph group_support_admin["Support and admin"]
  node_stream["Stream support<br/>[stream.ts]"]
  node_stream_controller["Stream token API"]
  node_stream_routes["Stream routes<br/>[streamRouter.ts]"]
  node_admin["Admin operations"]
  node_admin_routes["Admin routes<br/>[adminRoute.ts]"]
  node_imagekit["ImageKit media<br/>[imageKit.ts]"]
end

node_customer(("Customer"))
node_staff(("Staff"))
node_polar_service["Polar payments"]
node_stream_service["Stream Chat service"]

node_customer -->|"uses"| node_frontend
node_staff -->|"uses"| node_frontend
node_bootstrap -->|"renders"| node_frontend
node_frontend -->|"authenticates"| node_clerk
node_server -->|"mounts"| node_product_routes
node_server -->|"mounts"| node_checkout_routes
node_server -->|"mounts"| node_order_routes
node_server -->|"mounts"| node_stream_routes
node_server -->|"mounts"| node_admin_routes
node_server -->|"mounts account API"| node_me
node_server -->|"dispatches webhook"| node_clerk_webhook
node_server -->|"dispatches webhook"| node_polar_webhook
node_product_routes -->|"dispatches"| node_catalog
node_catalog -->|"queries products"| node_db
node_checkout -->|"loads account"| node_user_helper
node_checkout -->|"reads products; stores session"| node_db
node_checkout -->|"creates checkout"| node_polar_helper
node_polar_helper -->|"requests payment"| node_polar_service
node_polar_webhook -->|"updates commerce state"| node_db
node_orders -->|"loads account"| node_user_helper
node_orders -->|"queries orders and items"| node_db
node_orders -->|"creates support channel"| node_stream
node_stream_controller -->|"loads account"| node_user_helper
node_stream_controller -->|"loads profile"| node_clerk
node_stream_controller -->|"creates token"| node_stream
node_stream -->|"calls chat API"| node_stream_service
node_admin -->|"checks account"| node_user_helper
node_admin -->|"manages products"| node_db
node_admin -->|"deletes media asset"| node_imagekit
node_imagekit -.->|"integrates media"| node_imagekit
node_me -->|"loads account"| node_user_helper
node_clerk_webhook -->|"synchronizes identity"| node_db

click node_frontend "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/frontend/src/App.jsx"
click node_bootstrap "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/frontend/src/main.jsx"
click node_server "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/index.ts"
click node_catalog "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/productControllers.ts"
click node_product_routes "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/productRouter.ts"
click node_checkout "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/checkoutController.ts"
click node_checkout_routes "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/checkoutRouter.ts"
click node_polar_helper "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/polar.ts"
click node_polar_webhook "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/webhooks/polar.ts"
click node_orders "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/orderController.ts"
click node_order_routes "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/orderRoute.ts"
click node_db "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/db/index.ts"
click node_schema "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/db/schema.ts"
click node_clerk_webhook "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/webhooks/clerk.ts"
click node_user_helper "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/users.ts"
click node_me "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/meController.ts"
click node_stream "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/stream.ts"
click node_stream_controller "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/streamController.ts"
click node_stream_routes "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/streamRouter.ts"
click node_admin "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/adminControllers.ts"
click node_admin_routes "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/adminRoute.ts"
click node_imagekit "https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/imageKit.ts"

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_frontend,node_bootstrap,node_server,node_catalog,node_product_routes toneBlue
class node_checkout,node_checkout_routes,node_polar_helper,node_polar_webhook,node_orders,node_order_routes,node_db,node_schema toneAmber
class node_clerk,node_clerk_webhook,node_user_helper,node_me toneMint
class node_stream,node_stream_controller,node_stream_routes,node_admin,node_admin_routes,node_imagekit toneRose
class node_customer,node_staff,node_polar_service,node_stream_service toneIndigo
```

## Components

### Storefront

- [React app](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Frontend bootstrap](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [Express entry](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/index.ts): `backend/src/index.ts`
- [Product catalog](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/productControllers.ts): `backend/src/controllers/productControllers.ts`
- [Product routes](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/productRouter.ts): `backend/src/routes/productRouter.ts`

### Commerce

- [Checkout orchestration](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/checkoutController.ts): `backend/src/controllers/checkoutController.ts`
- [Checkout routes](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/checkoutRouter.ts): `backend/src/routes/checkoutRouter.ts`
- [Polar checkout client](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/polar.ts): `backend/src/lib/polar.ts`
- [Payment webhook](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/webhooks/polar.ts): `backend/src/webhooks/polar.ts`
- [Order operations](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/orderController.ts): `backend/src/controllers/orderController.ts`
- [Order routes](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/orderRoute.ts): `backend/src/routes/orderRoute.ts`
- [Commerce database](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/db/index.ts): `backend/src/db/index.ts`
- [Data model](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/db/schema.ts): `backend/src/db/schema.ts`

### Identity

- **Clerk identity**
- [Identity webhook](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/webhooks/clerk.ts): `backend/src/webhooks/clerk.ts`
- [Local user lookup](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/users.ts): `backend/src/lib/users.ts`
- [Account endpoint](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/meController.ts): `backend/src/controllers/meController.ts`

### Support and admin

- [Stream support](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/stream.ts): `backend/src/lib/stream.ts`
- [Stream token API](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/streamController.ts): `backend/src/controllers/streamController.ts`
- [Stream routes](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/streamRouter.ts): `backend/src/routes/streamRouter.ts`
- [Admin operations](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/controllers/adminControllers.ts): `backend/src/controllers/adminControllers.ts`
- [Admin routes](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/routes/adminRoute.ts): `backend/src/routes/adminRoute.ts`
- [ImageKit media](https://github.com/alisamershaboot19/ecommercefullstackproject/blob/main/backend/src/lib/imageKit.ts): `backend/src/lib/imageKit.ts`

### Other components

- **Customer**
- **Staff**
- **Polar payments**
- **Stream Chat service**

## Connections

- Customer → React app: uses
- Staff → React app: uses
- Frontend bootstrap → React app: renders
- React app → Clerk identity: authenticates
- Express entry → Product routes: mounts
- Express entry → Checkout routes: mounts
- Express entry → Order routes: mounts
- Express entry → Stream routes: mounts
- Express entry → Admin routes: mounts
- Express entry → Account endpoint: mounts account API
- Express entry → Identity webhook: dispatches webhook
- Express entry → Payment webhook: dispatches webhook
- Product routes → Product catalog: dispatches
- Product catalog → Commerce database: queries products
- Checkout orchestration → Local user lookup: loads account
- Checkout orchestration → Commerce database: reads products; stores session
- Checkout orchestration → Polar checkout client: creates checkout
- Polar checkout client → Polar payments: requests payment
- Payment webhook → Commerce database: updates commerce state
- Order operations → Local user lookup: loads account
- Order operations → Commerce database: queries orders and items
- Order operations → Stream support: creates support channel
- Stream token API → Local user lookup: loads account
- Stream token API → Clerk identity: loads profile
- Stream token API → Stream support: creates token
- Stream support → Stream Chat service: calls chat API
- Admin operations → Local user lookup: checks account
- Admin operations → Commerce database: manages products
- Admin operations → ImageKit media: deletes media asset
- ImageKit media → ImageKit media: integrates media
- Account endpoint → Local user lookup: loads account
- Identity webhook → Commerce database: synchronizes identity