# shreyash1231/jwellery-frontend-next architecture

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

- Interactive diagram: https://gitdiagram.com/shreyash1231/jwellery-frontend-next
- Repository: https://github.com/shreyash1231/jwellery-frontend-next

## Overview

Kuchalag is a Next.js storefront with customer account and custom-order features. The main journey is browsing categories and products, managing a cart, then creating an order and completing online payment. Sampled code confirms the header’s cart/catalog data path and checkout’s direct API calls; other capabilities are represented from the file tree, but their wiring was not sampled, so those links are omitted.

Main entry points: [`app/checkout/page.tsx`](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/checkout/page.tsx) (Checkout), [`components/Header.tsx`](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/components/Header.tsx) (Navigation and cart), [`service/dashboardService.ts`](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/dashboardService.ts) (Storefront API client), [`hooks/useDashboard.ts`](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/hooks/useDashboard.ts) (Cart data hooks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home<br/>[page.tsx]"]
  node_catalog["Category browsing<br/>[page.tsx]"]
  node_categories["Category index<br/>[page.tsx]"]
  node_product["Product detail<br/>[page.tsx]"]
  node_header["Navigation and cart<br/>[Header.tsx]"]
end

subgraph group_commerce["Commerce"]
  node_cart["Cart data hooks<br/>[useDashboard.ts]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_orders["Order history<br/>[page.tsx]"]
  node_payment_success["Payment result<br/>[page.tsx]"]
  node_custom_order["Custom orders<br/>[page.tsx]"]
  node_custom_history["Custom order history<br/>[page.tsx]"]
end

subgraph group_accounts["Accounts"]
  node_signin["Sign in<br/>[page.tsx]"]
  node_signup["Sign up<br/>[page.tsx]"]
  node_otp["OTP verification<br/>[page.tsx]"]
  node_profile["Profile<br/>[page.tsx]"]
  node_wishlist["Wishlist<br/>[page.tsx]"]
end

subgraph group_services["API services"]
  node_dashboard_api["Storefront API client"]
  node_auth_api["Authentication API client<br/>[authService.ts]"]
  node_profile_api["Profile API client<br/>[profileService.ts]"]
  node_custom_api["Custom order API client"]
end

node_shopper(("Shopper"))
node_backend{{"Commerce backend"}}
node_payment_provider{{"Payment provider"}}

node_shopper -->|"browses"| node_home
node_shopper -->|"browses"| node_categories
node_shopper -->|"selects category"| node_catalog
node_shopper -->|"views product"| node_product
node_shopper -->|"opens cart"| node_header
node_header -->|"queries cart"| node_cart
node_header -->|"updates cart"| node_dashboard_api
node_cart -->|"fetches cart"| node_dashboard_api
node_dashboard_api -->|"requests data"| node_backend
node_shopper -->|"checks out"| node_checkout
node_checkout -->|"creates order"| node_backend
node_checkout -->|"loads address and coupons"| node_backend
node_checkout -->|"creates payment"| node_backend
node_checkout -->|"verifies payment"| node_backend
node_checkout -->|"opens payment"| node_payment_provider
node_shopper -->|"views orders"| node_orders
node_shopper -->|"requests custom order"| node_custom_order
node_shopper -->|"views custom orders"| node_custom_history
node_custom_api -->|"submits and fetches"| node_backend
node_shopper -->|"signs in"| node_signin
node_shopper -->|"registers"| node_signup
node_shopper -->|"verifies account"| node_otp
node_auth_api -->|"authenticates"| node_backend
node_shopper -->|"manages account"| node_profile
node_profile_api -->|"reads and updates"| node_backend
node_shopper -->|"manages wishlist"| node_wishlist

click node_home "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/page.tsx"
click node_catalog "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/categories/%5Bid%5D/page.tsx"
click node_categories "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/categories/page.tsx"
click node_product "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/product/%5Bid%5D/page.tsx"
click node_header "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/components/Header.tsx"
click node_cart "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/hooks/useDashboard.ts"
click node_checkout "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/checkout/page.tsx"
click node_orders "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/order-history/page.tsx"
click node_payment_success "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/payment-success/page.tsx"
click node_custom_order "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/custom-orders/page.tsx"
click node_custom_history "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/custom-order-history/page.tsx"
click node_signin "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/signin/page.tsx"
click node_signup "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/signup/page.tsx"
click node_otp "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/otp/page.tsx"
click node_profile "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/profile/page.tsx"
click node_wishlist "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/wishlist/page.tsx"
click node_dashboard_api "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/dashboardService.ts"
click node_auth_api "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/authService.ts"
click node_profile_api "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/profileService.ts"
click node_custom_api "https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/customOrderService.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_home,node_catalog,node_categories,node_product,node_header toneBlue
class node_cart,node_checkout,node_orders,node_payment_success,node_custom_order,node_custom_history toneAmber
class node_signin,node_signup,node_otp,node_profile,node_wishlist toneMint
class node_dashboard_api,node_auth_api,node_profile_api,node_custom_api toneRose
class node_shopper,node_backend,node_payment_provider toneIndigo
```

## Components

### Storefront

- [Home](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/page.tsx): `app/page.tsx`
- [Category browsing](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/categories/%5Bid%5D/page.tsx): `app/categories/[id]/page.tsx`
- [Category index](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/categories/page.tsx): `app/categories/page.tsx`
- [Product detail](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/product/%5Bid%5D/page.tsx): `app/product/[id]/page.tsx`
- [Navigation and cart](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/components/Header.tsx): `components/Header.tsx`

### Commerce

- [Cart data hooks](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/hooks/useDashboard.ts): `hooks/useDashboard.ts`
- [Checkout](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/checkout/page.tsx): `app/checkout/page.tsx`
- [Order history](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/order-history/page.tsx): `app/order-history/page.tsx`
- [Payment result](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/payment-success/page.tsx): `app/payment-success/page.tsx`
- [Custom orders](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/custom-orders/page.tsx): `app/custom-orders/page.tsx`
- [Custom order history](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/custom-order-history/page.tsx): `app/custom-order-history/page.tsx`

### Accounts

- [Sign in](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/signin/page.tsx): `app/signin/page.tsx`
- [Sign up](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/signup/page.tsx): `app/signup/page.tsx`
- [OTP verification](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/otp/page.tsx): `app/otp/page.tsx`
- [Profile](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/profile/page.tsx): `app/profile/page.tsx`
- [Wishlist](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/app/wishlist/page.tsx): `app/wishlist/page.tsx`

### API services

- [Storefront API client](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/dashboardService.ts): `service/dashboardService.ts`
- [Authentication API client](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/authService.ts): `service/authService.ts`
- [Profile API client](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/profileService.ts): `service/profileService.ts`
- [Custom order API client](https://github.com/shreyash1231/jwellery-frontend-next/blob/main/service/customOrderService.ts): `service/customOrderService.ts`

### Other components

- **Shopper**
- **Commerce backend**
- **Payment provider**

## Connections

- Shopper → Home: browses
- Shopper → Category index: browses
- Shopper → Category browsing: selects category
- Shopper → Product detail: views product
- Shopper → Navigation and cart: opens cart
- Navigation and cart → Cart data hooks: queries cart
- Navigation and cart → Storefront API client: updates cart
- Cart data hooks → Storefront API client: fetches cart
- Storefront API client → Commerce backend: requests data
- Shopper → Checkout: checks out
- Checkout → Commerce backend: creates order
- Checkout → Commerce backend: loads address and coupons
- Checkout → Commerce backend: creates payment
- Checkout → Commerce backend: verifies payment
- Checkout → Payment provider: opens payment
- Shopper → Order history: views orders
- Shopper → Custom orders: requests custom order
- Shopper → Custom order history: views custom orders
- Custom order API client → Commerce backend: submits and fetches
- Shopper → Sign in: signs in
- Shopper → Sign up: registers
- Shopper → OTP verification: verifies account
- Authentication API client → Commerce backend: authenticates
- Shopper → Profile: manages account
- Profile API client → Commerce backend: reads and updates
- Shopper → Wishlist: manages wishlist