# vladsandbox/frontend_sparklory architecture

> Architecture diagram of the GitHub repository vladsandbox/frontend_sparklory, 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/vladsandbox/frontend_sparklory
- Repository: https://github.com/vladsandbox/frontend_sparklory

## Overview

Sparklory is a jewelry-store e-commerce frontend. A customer enters through the routed app, browses and filters the catalog, inspects a product, manages cart or wishlist state, then proceeds through delivery and payment to order confirmation; authenticated customers can also manage account details and order history. The graph includes the major README capabilities and the Redux state/thunk layer. Sampled source confirms routing, startup authentication, payment-form dispatch, and guest/authenticated favorite handling; unsampled feature wiring and backend calls are not asserted.

Main entry points: [`src/App.tsx`](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/App.tsx) (Router and app), [`src/pages/Wishlist/index.tsx`](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Wishlist/index.tsx) (Wishlist), [`src/pages/Catalog/index.tsx`](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Catalog/index.tsx) (Catalog and filters), [`src/pages/Profile/index.tsx`](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Profile/index.tsx) (Customer profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and browsing"]
  node_app["Router and app<br/>[App.tsx]"]
  node_home["Home and content<br/>[index.tsx]"]
  node_catalog["Catalog and filters<br/>[index.tsx]"]
  node_product["Product details<br/>[index.tsx]"]
end

subgraph group_identity["Identity and profile"]
  node_auth["Authentication<br/>[index.tsx]"]
  node_oauth["OAuth callback<br/>[OAuthCallback.tsx]"]
  node_profile["Customer profile<br/>[index.tsx]"]
  node_history["Order history<br/>[index.tsx]"]
end

subgraph group_commerce["Shopping and checkout"]
  node_cart["Shopping cart<br/>[index.tsx]"]
  node_wishlist["Wishlist<br/>[index.tsx]"]
  node_checkout["Checkout<br/>[index.tsx]"]
  node_payment["Payment form<br/>[usePaymentForm.tsx]"]
  node_confirmation["Order confirmation<br/>[index.tsx]"]
end

subgraph group_state["State and services"]
  node_store["Redux store<br/>[index.tsx]"]
  node_products["Product state<br/>[productsSlice.ts]"]
  node_users["User state<br/>[userSlice.ts]"]
  node_cartstate["Cart state<br/>[cartSlice.ts]"]
  node_wishliststate["Wishlist state<br/>[wishlistSlice.ts]"]
  node_paymentstate["Payment state<br/>[PaymentSlice.ts]"]
  node_paymentthunk["Payment actions<br/>[paymentThunk.ts]"]
  node_api["HTTP client<br/>[axios.api.ts]"]
  node_browserstorage[("Browser storage<br/>[localStorage.ts]")]
end

node_customer(("Customer"))

node_customer -->|"uses"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_catalog
node_app -->|"routes"| node_product
node_app -->|"routes"| node_auth
node_app -->|"routes"| node_oauth
node_app -->|"routes"| node_profile
node_app -->|"routes"| node_history
node_app -->|"routes"| node_cart
node_app -->|"routes"| node_wishlist
node_app -->|"routes"| node_checkout
node_app -->|"routes"| node_confirmation
node_app -->|"dispatches auth check"| node_store
node_catalog -->|"uses state"| node_products
node_cart -->|"uses state"| node_cartstate
node_wishlist -->|"uses state"| node_wishliststate
node_profile -->|"uses state"| node_users
node_checkout -->|"collects payment"| node_payment
node_payment -->|"dispatches"| node_paymentthunk
node_paymentthunk -->|"updates"| node_paymentstate
node_wishlist -->|"guest persistence"| node_browserstorage

click node_app "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/App.tsx"
click node_home "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Home/index.tsx"
click node_catalog "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Catalog/index.tsx"
click node_product "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Product/index.tsx"
click node_auth "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Auth/Login/index.tsx"
click node_oauth "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Auth/OAuth/OAuthCallback.tsx"
click node_profile "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Profile/index.tsx"
click node_history "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Profile/OrdersHistory/index.tsx"
click node_cart "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/ShoppingCart/index.tsx"
click node_wishlist "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Wishlist/index.tsx"
click node_checkout "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/OrderCheckout/index.tsx"
click node_payment "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/OrderCheckout/Payment/usePaymentForm.tsx"
click node_confirmation "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/OrderCheckout/OrderConfirmation/index.tsx"
click node_store "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/index.tsx"
click node_products "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/productsSlice.ts"
click node_users "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/userSlice.ts"
click node_cartstate "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/cartSlice.ts"
click node_wishliststate "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/wishlistSlice.ts"
click node_paymentstate "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/PaymentSlice.ts"
click node_paymentthunk "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/thunks/paymentThunk.ts"
click node_api "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/api/axios.api.ts"
click node_browserstorage "https://github.com/vladsandbox/frontend_sparklory/blob/main/src/utils/localStorage.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_app,node_home,node_catalog,node_product toneBlue
class node_auth,node_oauth,node_profile,node_history toneAmber
class node_cart,node_wishlist,node_checkout,node_payment,node_confirmation toneMint
class node_store,node_products,node_users,node_cartstate,node_wishliststate,node_paymentstate,node_paymentthunk,node_api,node_browserstorage toneRose
class node_customer toneIndigo
```

## Components

### App and browsing

- [Router and app](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/App.tsx): `src/App.tsx`
- [Home and content](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Home/index.tsx): `src/pages/Home/index.tsx`
- [Catalog and filters](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Catalog/index.tsx): `src/pages/Catalog/index.tsx`
- [Product details](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Product/index.tsx): `src/pages/Product/index.tsx`

### Identity and profile

- [Authentication](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Auth/Login/index.tsx): `src/pages/Auth/Login/index.tsx`
- [OAuth callback](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Auth/OAuth/OAuthCallback.tsx): `src/pages/Auth/OAuth/OAuthCallback.tsx`
- [Customer profile](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Profile/index.tsx): `src/pages/Profile/index.tsx`
- [Order history](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Profile/OrdersHistory/index.tsx): `src/pages/Profile/OrdersHistory/index.tsx`

### Shopping and checkout

- [Shopping cart](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/ShoppingCart/index.tsx): `src/pages/ShoppingCart/index.tsx`
- [Wishlist](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/Wishlist/index.tsx): `src/pages/Wishlist/index.tsx`
- [Checkout](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/OrderCheckout/index.tsx): `src/pages/OrderCheckout/index.tsx`
- [Payment form](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/OrderCheckout/Payment/usePaymentForm.tsx): `src/pages/OrderCheckout/Payment/usePaymentForm.tsx`
- [Order confirmation](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/pages/OrderCheckout/OrderConfirmation/index.tsx): `src/pages/OrderCheckout/OrderConfirmation/index.tsx`

### State and services

- [Redux store](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/index.tsx): `src/store/index.tsx`
- [Product state](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/productsSlice.ts): `src/store/slices/productsSlice.ts`
- [User state](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/userSlice.ts): `src/store/slices/userSlice.ts`
- [Cart state](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/cartSlice.ts): `src/store/slices/cartSlice.ts`
- [Wishlist state](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/wishlistSlice.ts): `src/store/slices/wishlistSlice.ts`
- [Payment state](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/slices/PaymentSlice.ts): `src/store/slices/PaymentSlice.ts`
- [Payment actions](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/store/thunks/paymentThunk.ts): `src/store/thunks/paymentThunk.ts`
- [HTTP client](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/api/axios.api.ts): `src/api/axios.api.ts`
- [Browser storage](https://github.com/vladsandbox/frontend_sparklory/blob/main/src/utils/localStorage.ts): `src/utils/localStorage.ts`

### Other components

- **Customer**

## Connections

- Customer → Router and app: uses
- Router and app → Home and content: routes
- Router and app → Catalog and filters: routes
- Router and app → Product details: routes
- Router and app → Authentication: routes
- Router and app → OAuth callback: routes
- Router and app → Customer profile: routes
- Router and app → Order history: routes
- Router and app → Shopping cart: routes
- Router and app → Wishlist: routes
- Router and app → Checkout: routes
- Router and app → Order confirmation: routes
- Router and app → Redux store: dispatches auth check
- Catalog and filters → Product state: uses state
- Shopping cart → Cart state: uses state
- Wishlist → Wishlist state: uses state
- Customer profile → User state: uses state
- Checkout → Payment form: collects payment
- Payment form → Payment actions: dispatches
- Payment actions → Payment state: updates
- Wishlist → Browser storage: guest persistence