# aadishsalian/e-commerce architecture

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

- Interactive diagram: https://gitdiagram.com/aadishsalian/e-commerce
- Repository: https://github.com/aadishsalian/e-commerce

## Overview

MATTE is a Next.js commerce storefront styled as a boutique shopping experience. The customer journey spans product discovery and search, product configuration, cart and checkout, then order confirmation and follow-up. Additional product branches include wishlists and sharing, comparison, price history, personalization, and fit guidance; administrative routes manage products and hotspots. The excerpts show selected search, wishlist, and order flows, but not checkout internals or most page wiring, so those connections are omitted. Although the README describes PostgreSQL and Prisma, sampled runtime code also uses local or file-backed data; persistence details are therefore not unified here.

Main entry points: [`src/app/search/SearchClient.tsx`](https://github.com/aadishsalian/e-commerce/blob/main/src/app/search/SearchClient.tsx) (Search UI), [`src/store/useCartStore.ts`](https://github.com/aadishsalian/e-commerce/blob/main/src/store/useCartStore.ts) (Cart), [`src/lib/search.ts`](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/search.ts) (Product Search), [`src/store/useWishlistStore.ts`](https://github.com/aadishsalian/e-commerce/blob/main/src/store/useWishlistStore.ts) (Wishlist Client State)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Discovery and Catalog"]
  node_search_ui["Search UI<br/>[SearchClient.tsx]"]
  node_search_lib["Product Search<br/>[search.ts]"]
  node_product_catalog["Product Catalog<br/>[mockData.ts]"]
  node_product_detail["Product Detail<br/>[page.tsx]"]
  node_product_experience["Product Experience"]
end

subgraph group_shopping["Shopping Tools"]
  node_compare["Product Comparison<br/>[useCompareStore.ts]"]
  node_price_history["Price History<br/>[service.ts]"]
  node_personalization["Personalization<br/>[service.ts]"]
  node_fit_quiz["Fit Guidance<br/>[FitQuiz.tsx]"]
  node_wishlist_ui["Wishlist Experience"]
  node_wishlist_store["Wishlist Client State"]
  node_wishlist_api["Wishlist API<br/>[route.ts]"]
  node_wishlist_service["Wishlist Service<br/>[service.ts]"]
end

subgraph group_commerce["Cart and Orders"]
  node_cart["Cart<br/>[useCartStore.ts]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_orders_api["Order API<br/>[route.ts]"]
  node_order_service["Order Service<br/>[service.ts]"]
  node_order_confirmation["Order Confirmation"]
end

subgraph group_operations["Commerce Operations"]
  node_hotspots_api["Hotspot Admin API<br/>[route.ts]"]
  node_hotspots_service["Hotspot Service<br/>[service.ts]"]
  node_admin_products["Product Admin<br/>[page.tsx]"]
end

subgraph group_platform["App Platform"]
  node_auth["Authentication<br/>[AuthContext.tsx]"]
  node_ui_state["Shared UI State<br/>[useUIStore.ts]"]
end

node_shopper(("Shopper"))

node_shopper -->|"searches"| node_search_ui
node_search_ui -->|"queries"| node_search_lib
node_search_lib -->|"reads products"| node_product_catalog
node_search_ui -->|"links to"| node_product_detail
node_wishlist_ui -->|"uses state"| node_wishlist_store
node_wishlist_store -->|"fetches lists"| node_wishlist_api
node_wishlist_api -->|"delegates to"| node_wishlist_service
node_wishlist_service -->|"moderates names"| node_personalization
node_cart -->|"uses product data"| node_product_catalog
node_cart -.->|"supports checkout"| node_checkout
node_order_confirmation -->|"polls status"| node_orders_api
node_orders_api -->|"uses service"| node_order_service
node_hotspots_api -->|"uses service"| node_hotspots_service
node_auth -->|"shows feedback"| node_ui_state

click node_search_ui "https://github.com/aadishsalian/e-commerce/blob/main/src/app/search/SearchClient.tsx"
click node_search_lib "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/search.ts"
click node_product_catalog "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/mockData.ts"
click node_product_detail "https://github.com/aadishsalian/e-commerce/blob/main/src/app/products/%5Bid%5D/page.tsx"
click node_product_experience "https://github.com/aadishsalian/e-commerce/tree/main/src/components/product"
click node_compare "https://github.com/aadishsalian/e-commerce/blob/main/src/store/useCompareStore.ts"
click node_price_history "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/price-history/service.ts"
click node_personalization "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/personalization/service.ts"
click node_fit_quiz "https://github.com/aadishsalian/e-commerce/blob/main/src/components/quiz/FitQuiz.tsx"
click node_wishlist_ui "https://github.com/aadishsalian/e-commerce/blob/main/src/components/wishlist/SharedWishlistClient.tsx"
click node_wishlist_store "https://github.com/aadishsalian/e-commerce/blob/main/src/store/useWishlistStore.ts"
click node_wishlist_api "https://github.com/aadishsalian/e-commerce/blob/main/src/app/api/wishlists/route.ts"
click node_wishlist_service "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/wishlist/service.ts"
click node_cart "https://github.com/aadishsalian/e-commerce/blob/main/src/store/useCartStore.ts"
click node_checkout "https://github.com/aadishsalian/e-commerce/blob/main/src/app/checkout/page.tsx"
click node_orders_api "https://github.com/aadishsalian/e-commerce/blob/main/src/app/api/orders/%5Bid%5D/route.ts"
click node_order_service "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/order-confirmation/service.ts"
click node_order_confirmation "https://github.com/aadishsalian/e-commerce/blob/main/src/components/order-confirmation/OrderConfirmationClient.tsx"
click node_hotspots_api "https://github.com/aadishsalian/e-commerce/blob/main/src/app/api/admin/hotspots/route.ts"
click node_hotspots_service "https://github.com/aadishsalian/e-commerce/blob/main/src/lib/hotspots/service.ts"
click node_admin_products "https://github.com/aadishsalian/e-commerce/blob/main/src/app/admin/products/page.tsx"
click node_auth "https://github.com/aadishsalian/e-commerce/blob/main/src/contexts/AuthContext.tsx"
click node_ui_state "https://github.com/aadishsalian/e-commerce/blob/main/src/store/useUIStore.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_search_ui,node_search_lib,node_product_catalog,node_product_detail,node_product_experience toneBlue
class node_compare,node_price_history,node_personalization,node_fit_quiz,node_wishlist_ui,node_wishlist_store,node_wishlist_api,node_wishlist_service toneAmber
class node_cart,node_checkout,node_orders_api,node_order_service,node_order_confirmation toneMint
class node_hotspots_api,node_hotspots_service,node_admin_products toneRose
class node_auth,node_ui_state,node_shopper toneIndigo
```

## Components

### Discovery and Catalog

- [Search UI](https://github.com/aadishsalian/e-commerce/blob/main/src/app/search/SearchClient.tsx): `src/app/search/SearchClient.tsx`
- [Product Search](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/search.ts): `src/lib/search.ts`
- [Product Catalog](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/mockData.ts): `src/lib/mockData.ts`
- [Product Detail](https://github.com/aadishsalian/e-commerce/blob/main/src/app/products/%5Bid%5D/page.tsx): `src/app/products/[id]/page.tsx`
- [Product Experience](https://github.com/aadishsalian/e-commerce/tree/main/src/components/product): `src/components/product`

### Shopping Tools

- [Product Comparison](https://github.com/aadishsalian/e-commerce/blob/main/src/store/useCompareStore.ts): `src/store/useCompareStore.ts`
- [Price History](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/price-history/service.ts): `src/lib/price-history/service.ts`
- [Personalization](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/personalization/service.ts): `src/lib/personalization/service.ts`
- [Fit Guidance](https://github.com/aadishsalian/e-commerce/blob/main/src/components/quiz/FitQuiz.tsx): `src/components/quiz/FitQuiz.tsx`
- [Wishlist Experience](https://github.com/aadishsalian/e-commerce/blob/main/src/components/wishlist/SharedWishlistClient.tsx): `src/components/wishlist/SharedWishlistClient.tsx`
- [Wishlist Client State](https://github.com/aadishsalian/e-commerce/blob/main/src/store/useWishlistStore.ts): `src/store/useWishlistStore.ts`
- [Wishlist API](https://github.com/aadishsalian/e-commerce/blob/main/src/app/api/wishlists/route.ts): `src/app/api/wishlists/route.ts`
- [Wishlist Service](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/wishlist/service.ts): `src/lib/wishlist/service.ts`

### Cart and Orders

- [Cart](https://github.com/aadishsalian/e-commerce/blob/main/src/store/useCartStore.ts): `src/store/useCartStore.ts`
- [Checkout](https://github.com/aadishsalian/e-commerce/blob/main/src/app/checkout/page.tsx): `src/app/checkout/page.tsx`
- [Order API](https://github.com/aadishsalian/e-commerce/blob/main/src/app/api/orders/%5Bid%5D/route.ts): `src/app/api/orders/[id]/route.ts`
- [Order Service](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/order-confirmation/service.ts): `src/lib/order-confirmation/service.ts`
- [Order Confirmation](https://github.com/aadishsalian/e-commerce/blob/main/src/components/order-confirmation/OrderConfirmationClient.tsx): `src/components/order-confirmation/OrderConfirmationClient.tsx`

### Commerce Operations

- [Hotspot Admin API](https://github.com/aadishsalian/e-commerce/blob/main/src/app/api/admin/hotspots/route.ts): `src/app/api/admin/hotspots/route.ts`
- [Hotspot Service](https://github.com/aadishsalian/e-commerce/blob/main/src/lib/hotspots/service.ts): `src/lib/hotspots/service.ts`
- [Product Admin](https://github.com/aadishsalian/e-commerce/blob/main/src/app/admin/products/page.tsx): `src/app/admin/products/page.tsx`

### App Platform

- [Authentication](https://github.com/aadishsalian/e-commerce/blob/main/src/contexts/AuthContext.tsx): `src/contexts/AuthContext.tsx`
- [Shared UI State](https://github.com/aadishsalian/e-commerce/blob/main/src/store/useUIStore.ts): `src/store/useUIStore.ts`

### Other components

- **Shopper**

## Connections

- Shopper → Search UI: searches (evidence: `src/app/search/SearchClient.tsx`)
- Search UI → Product Search: queries (evidence: `src/app/search/SearchClient.tsx`)
- Product Search → Product Catalog: reads products (evidence: `src/lib/search.ts`)
- Search UI → Product Detail: links to (evidence: `src/app/search/SearchClient.tsx`)
- Wishlist Experience → Wishlist Client State: uses state (evidence: `src/components/wishlist/SharedWishlistClient.tsx`)
- Wishlist Client State → Wishlist API: fetches lists (evidence: `src/store/useWishlistStore.ts`)
- Wishlist API → Wishlist Service: delegates to (evidence: `src/app/api/wishlists/route.ts`)
- Wishlist Service → Personalization: moderates names (evidence: `src/lib/wishlist/service.ts`)
- Cart → Product Catalog: uses product data (evidence: `src/store/useCartStore.ts`)
- Cart → Checkout: supports checkout
- Order Confirmation → Order API: polls status (evidence: `src/components/order-confirmation/OrderConfirmationClient.tsx`)
- Order API → Order Service: uses service (evidence: `src/app/api/orders/[id]/route.ts`)
- Hotspot Admin API → Hotspot Service: uses service (evidence: `src/app/api/admin/hotspots/route.ts`)
- Authentication → Shared UI State: shows feedback