# aserym25/sershop architecture

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

- Interactive diagram: https://gitdiagram.com/aserym25/sershop
- Repository: https://github.com/aserym25/sershop

## Overview

Sershop is a product-discovery and recommendation storefront: visitors browse and filter products, then either add an item to the in-memory cart or open a WhatsApp order message; product affiliate links can also lead to partner pages. The sampled source supports the catalog-loading, cart, and single-product WhatsApp paths. Other pages and admin are present in the route tree, but their internal behavior was not sampled, so their connections are limited to routing.

Main entry points: [`src/main.jsx`](https://github.com/aserym25/sershop/blob/main/src/main.jsx) (App router), [`src/pages/HomePage.jsx`](https://github.com/aserym25/sershop/blob/main/src/pages/HomePage.jsx) (Browse and filter), [`src/services/supabase.js`](https://github.com/aserym25/sershop/blob/main/src/services/supabase.js) (Supabase service), [`src/components/ProductCard.jsx`](https://github.com/aserym25/sershop/blob/main/src/components/ProductCard.jsx) (Product card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["App router<br/>[main.jsx]"]
  node_header["Header navigation<br/>[Header.jsx]"]
  node_admin["Admin dashboard<br/>[AdminDashboard.jsx]"]
end

subgraph group_catalog["Product catalog"]
  node_home["Browse and filter<br/>[HomePage.jsx]"]
  node_productdata["Local products<br/>[products.js]"]
  node_productcard["Product card<br/>[ProductCard.jsx]"]
  node_supabaseclient["Supabase service<br/>[supabase.js]"]
  node_supabase[("Supabase products")]
  node_cache[("Browser cache")]
end

subgraph group_ordering["Ordering"]
  node_cartstate["Cart state<br/>[CartContext.jsx]"]
  node_cartpage["Cart page<br/>[CartPage.jsx]"]
  node_whatsapputil["WhatsApp ordering<br/>[whatsapp.js]"]
  node_whatsapp(("WhatsApp"))
  node_partner(("Affiliate partner"))
end

subgraph group_support["Site information"]
  node_about["About page<br/>[AboutPage.jsx]"]
  node_faq["FAQ page<br/>[FAQPage.jsx]"]
  node_contact["Contact page<br/>[ContactPage.jsx]"]
  node_legal["Legal information<br/>[LegalPage.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens storefront"| node_app
node_app -->|"renders"| node_header
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_cartpage
node_app -->|"routes to"| node_admin
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_faq
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_legal
node_home -->|"queries products"| node_supabaseclient
node_supabaseclient -->|"reads products"| node_supabase
node_home -->|"uses fallback"| node_productdata
node_home -->|"saves catalog cache"| node_supabaseclient
node_supabaseclient -->|"writes cache"| node_cache
node_home -->|"renders products"| node_productcard
node_productcard -->|"adds product"| node_cartstate
node_cartpage -->|"uses cart state"| node_cartstate
node_productcard -->|"starts order"| node_whatsapputil
node_whatsapputil -->|"opens order message"| node_whatsapp
node_home -.->|"opens affiliate link"| node_partner

click node_app "https://github.com/aserym25/sershop/blob/main/src/main.jsx"
click node_header "https://github.com/aserym25/sershop/blob/main/src/components/Header.jsx"
click node_home "https://github.com/aserym25/sershop/blob/main/src/pages/HomePage.jsx"
click node_productdata "https://github.com/aserym25/sershop/blob/main/src/data/products.js"
click node_productcard "https://github.com/aserym25/sershop/blob/main/src/components/ProductCard.jsx"
click node_supabaseclient "https://github.com/aserym25/sershop/blob/main/src/services/supabase.js"
click node_cartstate "https://github.com/aserym25/sershop/blob/main/src/context/CartContext.jsx"
click node_cartpage "https://github.com/aserym25/sershop/blob/main/src/pages/CartPage.jsx"
click node_whatsapputil "https://github.com/aserym25/sershop/blob/main/src/utils/whatsapp.js"
click node_admin "https://github.com/aserym25/sershop/blob/main/src/pages/AdminDashboard.jsx"
click node_about "https://github.com/aserym25/sershop/blob/main/src/pages/AboutPage.jsx"
click node_faq "https://github.com/aserym25/sershop/blob/main/src/pages/FAQPage.jsx"
click node_contact "https://github.com/aserym25/sershop/blob/main/src/pages/ContactPage.jsx"
click node_legal "https://github.com/aserym25/sershop/blob/main/src/pages/LegalPage.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_app,node_header,node_admin toneBlue
class node_home,node_productdata,node_productcard,node_supabaseclient,node_supabase,node_cache toneAmber
class node_cartstate,node_cartpage,node_whatsapputil,node_whatsapp,node_partner toneMint
class node_about,node_faq,node_contact,node_legal toneRose
class node_visitor toneIndigo
```

## Components

### Storefront

- [App router](https://github.com/aserym25/sershop/blob/main/src/main.jsx): `src/main.jsx`
- [Header navigation](https://github.com/aserym25/sershop/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Admin dashboard](https://github.com/aserym25/sershop/blob/main/src/pages/AdminDashboard.jsx): `src/pages/AdminDashboard.jsx`

### Product catalog

- [Browse and filter](https://github.com/aserym25/sershop/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [Local products](https://github.com/aserym25/sershop/blob/main/src/data/products.js): `src/data/products.js`
- [Product card](https://github.com/aserym25/sershop/blob/main/src/components/ProductCard.jsx): `src/components/ProductCard.jsx`
- [Supabase service](https://github.com/aserym25/sershop/blob/main/src/services/supabase.js): `src/services/supabase.js`
- **Supabase products**
- **Browser cache**

### Ordering

- [Cart state](https://github.com/aserym25/sershop/blob/main/src/context/CartContext.jsx): `src/context/CartContext.jsx`
- [Cart page](https://github.com/aserym25/sershop/blob/main/src/pages/CartPage.jsx): `src/pages/CartPage.jsx`
- [WhatsApp ordering](https://github.com/aserym25/sershop/blob/main/src/utils/whatsapp.js): `src/utils/whatsapp.js`
- **WhatsApp**
- **Affiliate partner**

### Site information

- [About page](https://github.com/aserym25/sershop/blob/main/src/pages/AboutPage.jsx): `src/pages/AboutPage.jsx`
- [FAQ page](https://github.com/aserym25/sershop/blob/main/src/pages/FAQPage.jsx): `src/pages/FAQPage.jsx`
- [Contact page](https://github.com/aserym25/sershop/blob/main/src/pages/ContactPage.jsx): `src/pages/ContactPage.jsx`
- [Legal information](https://github.com/aserym25/sershop/blob/main/src/pages/LegalPage.jsx): `src/pages/LegalPage.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → App router: opens storefront
- App router → Header navigation: renders
- App router → Browse and filter: routes to
- App router → Cart page: routes to
- App router → Admin dashboard: routes to
- App router → About page: routes to
- App router → FAQ page: routes to
- App router → Contact page: routes to
- App router → Legal information: routes to
- Browse and filter → Supabase service: queries products
- Supabase service → Supabase products: reads products
- Browse and filter → Local products: uses fallback
- Browse and filter → Supabase service: saves catalog cache
- Supabase service → Browser cache: writes cache
- Browse and filter → Product card: renders products
- Product card → Cart state: adds product
- Cart page → Cart state: uses cart state
- Product card → WhatsApp ordering: starts order
- WhatsApp ordering → WhatsApp: opens order message
- Browse and filter → Affiliate partner: opens affiliate link