# baceloniagabriel116-dotcom/byte-cart architecture

> Architecture diagram of the GitHub repository baceloniagabriel116-dotcom/byte-cart, 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/baceloniagabriel116-dotcom/byte-cart
- Repository: https://github.com/baceloniagabriel116-dotcom/byte-cart

## Overview

Byte Cart is a static browser-based e-commerce storefront. Shoppers browse and filter products, add them to a persistent cart, authenticate at checkout, submit shipping details, and receive an order they can later view in their account. The app also supports inventory administration, verified-purchase reviews, and editable site/team content. Browser localStorage is the primary data store; Supabase synchronization is optional. The workflow and major capabilities follow the README; unsampled page wiring is represented only where documented.

Main entry points: [`js/cart.js`](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/cart.js) (Cart and orders), [`js/app.js`](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/app.js) (Storefront UI), [`js/database.js`](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/database.js) (Database adapter), [`js/auth.js`](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/auth.js) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shop["Storefront"]
  node_products_page["Product listing<br/>[products.html]"]
  node_product_page["Product detail<br/>[product.html]"]
  node_home_page["Home page<br/>[index.html]"]
  node_admin_page["Admin dashboard<br/>[admin.html]"]
end

subgraph group_customer["Customer flows"]
  node_cart_page["Shopping cart<br/>[cart.html]"]
  node_checkout_page["Checkout<br/>[checkout.html]"]
  node_login_page["Login and register<br/>[login.html]"]
  node_account_page["Account and orders<br/>[account.html]"]
  node_success_page["Order confirmation<br/>[success.html]"]
end

subgraph group_commerce["Commerce logic"]
  node_app_ui["Storefront UI<br/>[app.js]"]
  node_auth_logic["Authentication<br/>[auth.js]"]
  node_cart_logic["Cart and orders<br/>[cart.js]"]
  node_site_content["Site settings and team<br/>[site.js]"]
end

subgraph group_data["Data and integrations"]
  node_seed_catalog["Seed catalog<br/>[products.js]"]
  node_database_adapter["Database adapter<br/>[database.js]"]
  node_browser_storage[("Browser storage")]
  node_supabase_client["Supabase client<br/>[supabase.js]"]
  node_schema["Production schema<br/>[schema.sql]"]
end

node_shopper(("Shopper"))
node_supabase_service[("Supabase")]

node_shopper -->|"opens"| node_home_page
node_shopper -->|"browses"| node_products_page
node_products_page -->|"renders through"| node_app_ui
node_product_page -->|"renders through"| node_app_ui
node_home_page -->|"renders through"| node_app_ui
node_app_ui -->|"displays products"| node_seed_catalog
node_app_ui -->|"manages cart"| node_cart_logic
node_shopper -->|"reviews cart"| node_cart_page
node_cart_page -->|"reads cart"| node_cart_logic
node_shopper -->|"starts checkout"| node_checkout_page
node_checkout_page -->|"requires login"| node_auth_logic
node_checkout_page -->|"places order"| node_cart_logic
node_shopper -->|"authenticates"| node_login_page
node_login_page -->|"registers or logs in"| node_auth_logic
node_shopper -->|"views account"| node_account_page
node_account_page -->|"checks session"| node_auth_logic
node_account_page -->|"reads order history"| node_cart_logic
node_cart_logic -->|"confirms order"| node_success_page
node_shopper -->|"manages store"| node_admin_page
node_admin_page -->|"uses storefront logic"| node_app_ui
node_app_ui -->|"loads and saves data"| node_database_adapter
node_auth_logic -->|"reads and writes users"| node_database_adapter
node_cart_logic -->|"updates inventory and transactions"| node_database_adapter
node_database_adapter -->|"reads and writes"| node_browser_storage
node_cart_logic -->|"persists cart and orders"| node_browser_storage
node_cart_logic -->|"checks user"| node_auth_logic
node_database_adapter -.->|"syncs records"| node_supabase_client
node_auth_logic -.->|"syncs authentication"| node_supabase_client
node_cart_logic -.->|"syncs orders and reviews"| node_supabase_client
node_site_content -.->|"loads and saves content"| node_supabase_client
node_supabase_client -.->|"connects"| node_supabase_service
node_site_content -->|"caches content"| node_browser_storage
node_database_adapter -.->|"matches data model"| node_schema

click node_products_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/products.html"
click node_product_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/product.html"
click node_home_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/index.html"
click node_admin_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/admin.html"
click node_app_ui "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/app.js"
click node_seed_catalog "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/data/products.js"
click node_cart_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/cart.html"
click node_checkout_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/checkout.html"
click node_login_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/login.html"
click node_account_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/account.html"
click node_success_page "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/success.html"
click node_auth_logic "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/auth.js"
click node_cart_logic "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/cart.js"
click node_database_adapter "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/database.js"
click node_supabase_client "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/supabase.js"
click node_site_content "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/site.js"
click node_schema "https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/data/schema.sql"

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_products_page,node_product_page,node_home_page,node_admin_page toneBlue
class node_cart_page,node_checkout_page,node_login_page,node_account_page,node_success_page,node_supabase_service toneAmber
class node_app_ui,node_auth_logic,node_cart_logic,node_site_content toneMint
class node_seed_catalog,node_database_adapter,node_browser_storage,node_supabase_client,node_schema toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [Product listing](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/products.html): `products.html`
- [Product detail](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/product.html): `product.html`
- [Home page](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/index.html): `index.html`
- [Admin dashboard](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/admin.html): `admin.html`

### Customer flows

- [Shopping cart](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/cart.html): `cart.html`
- [Checkout](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/checkout.html): `checkout.html`
- [Login and register](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/login.html): `login.html`
- [Account and orders](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/account.html): `account.html`
- [Order confirmation](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/success.html): `success.html`

### Commerce logic

- [Storefront UI](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/app.js): `js/app.js`
- [Authentication](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/auth.js): `js/auth.js`
- [Cart and orders](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/cart.js): `js/cart.js`
- [Site settings and team](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/site.js): `js/site.js`

### Data and integrations

- [Seed catalog](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/data/products.js): `data/products.js`
- [Database adapter](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/database.js): `js/database.js`
- **Browser storage**
- [Supabase client](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/js/supabase.js): `js/supabase.js`
- [Production schema](https://github.com/baceloniagabriel116-dotcom/byte-cart/blob/main/data/schema.sql): `data/schema.sql`

### Other components

- **Shopper**
- **Supabase**

## Connections

- Shopper → Home page: opens
- Shopper → Product listing: browses
- Product listing → Storefront UI: renders through
- Product detail → Storefront UI: renders through
- Home page → Storefront UI: renders through
- Storefront UI → Seed catalog: displays products
- Storefront UI → Cart and orders: manages cart
- Shopper → Shopping cart: reviews cart
- Shopping cart → Cart and orders: reads cart
- Shopper → Checkout: starts checkout
- Checkout → Authentication: requires login
- Checkout → Cart and orders: places order
- Shopper → Login and register: authenticates
- Login and register → Authentication: registers or logs in
- Shopper → Account and orders: views account
- Account and orders → Authentication: checks session
- Account and orders → Cart and orders: reads order history
- Cart and orders → Order confirmation: confirms order
- Shopper → Admin dashboard: manages store
- Admin dashboard → Storefront UI: uses storefront logic
- Storefront UI → Database adapter: loads and saves data
- Authentication → Database adapter: reads and writes users
- Cart and orders → Database adapter: updates inventory and transactions
- Database adapter → Browser storage: reads and writes
- Cart and orders → Browser storage: persists cart and orders
- Cart and orders → Authentication: checks user
- Database adapter → Supabase client: syncs records
- Authentication → Supabase client: syncs authentication
- Cart and orders → Supabase client: syncs orders and reviews
- Site settings and team → Supabase client: loads and saves content
- Supabase client → Supabase: connects
- Site settings and team → Browser storage: caches content
- Database adapter → Production schema: matches data model