# vannda-r9/spark-pc architecture

> Architecture diagram of the GitHub repository vannda-r9/spark-pc, 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/vannda-r9/spark-pc
- Repository: https://github.com/vannda-r9/spark-pc

## Overview

Spark PC is a frontend-only PC storefront: shoppers browse and compare products, add items to a persistent cart, and submit an order inquiry rather than paying through a backend. Account registration/login supports profile and order-history views; language selection is shared across the UI. The graph distinguishes page-level workflows, product/cart/order state, and account services. The README documents local product data, but the provided tree and excerpts show a product service using an API wrapper; backend and service wiring beyond cited references are not assumed.

Main entry points: [`context/CartContext.jsx`](https://github.com/vannda-r9/spark-pc/blob/main/context/CartContext.jsx) (Cart state), [`app/shop/page.js`](https://github.com/vannda-r9/spark-pc/blob/main/app/shop/page.js) (Product search), [`services/product.service.js`](https://github.com/vannda-r9/spark-pc/blob/main/services/product.service.js) (Product service), [`context/CompareContext.jsx`](https://github.com/vannda-r9/spark-pc/blob/main/context/CompareContext.jsx) (Compare state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home page<br/>[page.js]"]
  node_featured["Featured products"]
  node_shop["Product search<br/>[page.js]"]
  node_detail["Product detail<br/>[page.js]"]
end

subgraph group_shopping["Shopping"]
  node_catalog["Product service<br/>[product.service.js]"]
  node_card["Product card<br/>[ProductCard.jsx]"]
  node_actions["Product actions<br/>[ProductActions.jsx]"]
  node_cartpage["Cart page<br/>[page.js]"]
  node_cartstate["Cart state<br/>[CartContext.jsx]"]
  node_inquiry["Order inquiry"]
  node_comparepage["Compare page<br/>[page.js]"]
  node_comparetable["Compare table<br/>[CompareTable.jsx]"]
  node_recommend["Budget recommendations"]
  node_comparestate["Compare state<br/>[CompareContext.jsx]"]
end

subgraph group_identity["Accounts"]
  node_orders["Order history<br/>[MyOrdersList.jsx]"]
  node_login["Login form<br/>[LoginForm.jsx]"]
  node_signup["Signup form<br/>[SignupForm.jsx]"]
  node_authstate["Auth state<br/>[AuthContext.jsx]"]
  node_profile["User profile<br/>[UserProfile.jsx]"]
end

subgraph group_shared["Shared UI &amp; state"]
  node_language["Language state"]
  node_toast["Toast feedback<br/>[Toast.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_services["Browser services"]
  node_orderstore["Order service<br/>[order.service.js]"]
  node_authservice["Auth service<br/>[auth.service.js]"]
  node_localstorage[("Browser localStorage")]
end

node_shopper(("Shopper"))
node_api["Product API"]

node_shopper -->|"opens"| node_home
node_home -->|"renders"| node_featured
node_home -->|"loads featured"| node_catalog
node_shopper -->|"searches"| node_shop
node_shop -->|"loads products"| node_catalog
node_shop -->|"renders"| node_card
node_shop -->|"adds items"| node_cartstate
node_shop -->|"shows feedback"| node_toast
node_card -->|"toggles compare"| node_comparestate
node_shopper -->|"opens product"| node_detail
node_detail -->|"loads product"| node_catalog
node_detail -->|"renders"| node_actions
node_actions -->|"adds items"| node_cartstate
node_actions -->|"toggles compare"| node_comparestate
node_shopper -->|"reviews cart"| node_cartpage
node_cartpage -->|"reads and updates"| node_cartstate
node_cartpage -->|"opens inquiry"| node_inquiry
node_inquiry -->|"reads and clears"| node_cartstate
node_inquiry -->|"gets user"| node_authstate
node_inquiry -->|"creates order"| node_orderstore
node_shopper -->|"compares products"| node_comparepage
node_comparepage -->|"renders"| node_comparetable
node_comparetable -->|"reads compare list"| node_comparestate
node_comparetable -->|"adds items"| node_cartstate
node_comparepage -->|"shows feedback"| node_toast
node_recommend -->|"finds by budget"| node_catalog
node_recommend -->|"adds items"| node_cartstate
node_recommend -->|"uses compare state"| node_comparestate
node_shopper -->|"signs in"| node_login
node_shopper -->|"registers"| node_signup
node_login -->|"authenticates"| node_authstate
node_signup -->|"registers"| node_authstate
node_authstate -->|"validates and stores session"| node_authservice
node_shopper -->|"views profile"| node_profile
node_profile -->|"reads account"| node_authstate
node_profile -->|"reads orders"| node_orderstore
node_shopper -->|"views orders"| node_orders
node_orders -->|"loads user orders"| node_orderstore
node_authservice -->|"reads and writes"| node_localstorage
node_orderstore -->|"reads and writes"| node_localstorage
node_cartstate -->|"persists cart"| node_localstorage
node_comparestate -->|"persists compare list"| node_localstorage
node_catalog -->|"fetches products"| node_api
node_home -->|"uses translations"| node_language
node_navbar -->|"uses translations"| node_language

click node_home "https://github.com/vannda-r9/spark-pc/blob/main/app/page.js"
click node_featured "https://github.com/vannda-r9/spark-pc/blob/main/components/home/FeaturedSection.jsx"
click node_shop "https://github.com/vannda-r9/spark-pc/blob/main/app/shop/page.js"
click node_catalog "https://github.com/vannda-r9/spark-pc/blob/main/services/product.service.js"
click node_detail "https://github.com/vannda-r9/spark-pc/blob/main/app/product/%5Bid%5D/page.js"
click node_card "https://github.com/vannda-r9/spark-pc/blob/main/components/product/ProductCard.jsx"
click node_actions "https://github.com/vannda-r9/spark-pc/blob/main/components/product/ProductActions.jsx"
click node_cartpage "https://github.com/vannda-r9/spark-pc/blob/main/app/cart/page.js"
click node_cartstate "https://github.com/vannda-r9/spark-pc/blob/main/context/CartContext.jsx"
click node_inquiry "https://github.com/vannda-r9/spark-pc/blob/main/components/cart/OrderInquiryModal.jsx"
click node_orderstore "https://github.com/vannda-r9/spark-pc/blob/main/services/order.service.js"
click node_orders "https://github.com/vannda-r9/spark-pc/blob/main/components/account/MyOrdersList.jsx"
click node_comparepage "https://github.com/vannda-r9/spark-pc/blob/main/app/compare/page.js"
click node_comparetable "https://github.com/vannda-r9/spark-pc/blob/main/components/compare/CompareTable.jsx"
click node_recommend "https://github.com/vannda-r9/spark-pc/blob/main/components/compare/BudgetRecommendation.jsx"
click node_comparestate "https://github.com/vannda-r9/spark-pc/blob/main/context/CompareContext.jsx"
click node_login "https://github.com/vannda-r9/spark-pc/blob/main/components/auth/LoginForm.jsx"
click node_signup "https://github.com/vannda-r9/spark-pc/blob/main/components/auth/SignupForm.jsx"
click node_authstate "https://github.com/vannda-r9/spark-pc/blob/main/context/AuthContext.jsx"
click node_authservice "https://github.com/vannda-r9/spark-pc/blob/main/services/auth.service.js"
click node_profile "https://github.com/vannda-r9/spark-pc/blob/main/components/account/UserProfile.jsx"
click node_language "https://github.com/vannda-r9/spark-pc/blob/main/context/LanguageContext.jsx"
click node_toast "https://github.com/vannda-r9/spark-pc/blob/main/components/ui/Toast.jsx"
click node_navbar "https://github.com/vannda-r9/spark-pc/blob/main/components/layout/Navbar.jsx"

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_featured,node_shop,node_detail toneBlue
class node_catalog,node_card,node_actions,node_cartpage,node_cartstate,node_inquiry,node_comparepage,node_comparetable,node_recommend,node_comparestate toneAmber
class node_orders,node_login,node_signup,node_authstate,node_profile,node_api toneMint
class node_language,node_toast,node_navbar toneRose
class node_orderstore,node_authservice,node_localstorage,node_shopper toneIndigo
```

## Components

### Storefront

- [Home page](https://github.com/vannda-r9/spark-pc/blob/main/app/page.js): `app/page.js`
- [Featured products](https://github.com/vannda-r9/spark-pc/blob/main/components/home/FeaturedSection.jsx): `components/home/FeaturedSection.jsx`
- [Product search](https://github.com/vannda-r9/spark-pc/blob/main/app/shop/page.js): `app/shop/page.js`
- [Product detail](https://github.com/vannda-r9/spark-pc/blob/main/app/product/%5Bid%5D/page.js): `app/product/[id]/page.js`

### Shopping

- [Product service](https://github.com/vannda-r9/spark-pc/blob/main/services/product.service.js): `services/product.service.js`
- [Product card](https://github.com/vannda-r9/spark-pc/blob/main/components/product/ProductCard.jsx): `components/product/ProductCard.jsx`
- [Product actions](https://github.com/vannda-r9/spark-pc/blob/main/components/product/ProductActions.jsx): `components/product/ProductActions.jsx`
- [Cart page](https://github.com/vannda-r9/spark-pc/blob/main/app/cart/page.js): `app/cart/page.js`
- [Cart state](https://github.com/vannda-r9/spark-pc/blob/main/context/CartContext.jsx): `context/CartContext.jsx`
- [Order inquiry](https://github.com/vannda-r9/spark-pc/blob/main/components/cart/OrderInquiryModal.jsx): `components/cart/OrderInquiryModal.jsx`
- [Compare page](https://github.com/vannda-r9/spark-pc/blob/main/app/compare/page.js): `app/compare/page.js`
- [Compare table](https://github.com/vannda-r9/spark-pc/blob/main/components/compare/CompareTable.jsx): `components/compare/CompareTable.jsx`
- [Budget recommendations](https://github.com/vannda-r9/spark-pc/blob/main/components/compare/BudgetRecommendation.jsx): `components/compare/BudgetRecommendation.jsx`
- [Compare state](https://github.com/vannda-r9/spark-pc/blob/main/context/CompareContext.jsx): `context/CompareContext.jsx`

### Accounts

- [Order history](https://github.com/vannda-r9/spark-pc/blob/main/components/account/MyOrdersList.jsx): `components/account/MyOrdersList.jsx`
- [Login form](https://github.com/vannda-r9/spark-pc/blob/main/components/auth/LoginForm.jsx): `components/auth/LoginForm.jsx`
- [Signup form](https://github.com/vannda-r9/spark-pc/blob/main/components/auth/SignupForm.jsx): `components/auth/SignupForm.jsx`
- [Auth state](https://github.com/vannda-r9/spark-pc/blob/main/context/AuthContext.jsx): `context/AuthContext.jsx`
- [User profile](https://github.com/vannda-r9/spark-pc/blob/main/components/account/UserProfile.jsx): `components/account/UserProfile.jsx`

### Shared UI & state

- [Language state](https://github.com/vannda-r9/spark-pc/blob/main/context/LanguageContext.jsx): `context/LanguageContext.jsx`
- [Toast feedback](https://github.com/vannda-r9/spark-pc/blob/main/components/ui/Toast.jsx): `components/ui/Toast.jsx`
- [Navigation](https://github.com/vannda-r9/spark-pc/blob/main/components/layout/Navbar.jsx): `components/layout/Navbar.jsx`

### Browser services

- [Order service](https://github.com/vannda-r9/spark-pc/blob/main/services/order.service.js): `services/order.service.js`
- [Auth service](https://github.com/vannda-r9/spark-pc/blob/main/services/auth.service.js): `services/auth.service.js`
- **Browser localStorage**

### Other components

- **Shopper**
- **Product API**

## Connections

- Shopper → Home page: opens (evidence: `app/page.js`)
- Home page → Featured products: renders (evidence: `app/page.js`)
- Home page → Product service: loads featured (evidence: `app/page.js`)
- Shopper → Product search: searches (evidence: `app/shop/page.js`)
- Product search → Product service: loads products (evidence: `app/shop/page.js`)
- Product search → Product card: renders (evidence: `app/shop/page.js`)
- Product search → Cart state: adds items (evidence: `app/shop/page.js`)
- Product search → Toast feedback: shows feedback (evidence: `app/shop/page.js`)
- Product card → Compare state: toggles compare (evidence: `components/product/ProductCard.jsx`)
- Shopper → Product detail: opens product (evidence: `app/product/[id]/page.js`)
- Product detail → Product service: loads product (evidence: `app/product/[id]/page.js`)
- Product detail → Product actions: renders (evidence: `app/product/[id]/page.js`)
- Product actions → Cart state: adds items (evidence: `components/product/ProductActions.jsx`)
- Product actions → Compare state: toggles compare (evidence: `components/product/ProductActions.jsx`)
- Shopper → Cart page: reviews cart (evidence: `app/cart/page.js`)
- Cart page → Cart state: reads and updates (evidence: `app/cart/page.js`)
- Cart page → Order inquiry: opens inquiry (evidence: `app/cart/page.js`)
- Order inquiry → Cart state: reads and clears (evidence: `components/cart/OrderInquiryModal.jsx`)
- Order inquiry → Auth state: gets user (evidence: `components/cart/OrderInquiryModal.jsx`)
- Order inquiry → Order service: creates order (evidence: `components/cart/OrderInquiryModal.jsx`)
- Shopper → Compare page: compares products (evidence: `app/compare/page.js`)
- Compare page → Compare table: renders (evidence: `app/compare/page.js`)
- Compare table → Compare state: reads compare list (evidence: `components/compare/CompareTable.jsx`)
- Compare table → Cart state: adds items (evidence: `components/compare/CompareTable.jsx`)
- Compare page → Toast feedback: shows feedback (evidence: `app/compare/page.js`)
- Budget recommendations → Product service: finds by budget (evidence: `components/compare/BudgetRecommendation.jsx`)
- Budget recommendations → Cart state: adds items (evidence: `components/compare/BudgetRecommendation.jsx`)
- Budget recommendations → Compare state: uses compare state (evidence: `components/compare/BudgetRecommendation.jsx`)
- Shopper → Login form: signs in
- Shopper → Signup form: registers
- Login form → Auth state: authenticates (evidence: `components/auth/LoginForm.jsx`)
- Signup form → Auth state: registers (evidence: `components/auth/SignupForm.jsx`)
- Auth state → Auth service: validates and stores session (evidence: `context/AuthContext.jsx`)
- Shopper → User profile: views profile
- User profile → Auth state: reads account (evidence: `components/account/UserProfile.jsx`)
- User profile → Order service: reads orders (evidence: `components/account/UserProfile.jsx`)
- Shopper → Order history: views orders
- Order history → Order service: loads user orders (evidence: `components/account/MyOrdersList.jsx`)
- Auth service → Browser localStorage: reads and writes (evidence: `services/auth.service.js`)
- Order service → Browser localStorage: reads and writes (evidence: `services/order.service.js`)
- Cart state → Browser localStorage: persists cart (evidence: `context/CartContext.jsx`)
- Compare state → Browser localStorage: persists compare list (evidence: `context/CompareContext.jsx`)
- Product service → Product API: fetches products (evidence: `services/product.service.js`)
- Home page → Language state: uses translations (evidence: `app/page.js`)
- Navigation → Language state: uses translations (evidence: `components/layout/Navbar.jsx`)