# alif-faiq/eduwork-bootcamp-10 architecture

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

- Interactive diagram: https://gitdiagram.com/alif-faiq/eduwork-bootcamp-10
- Repository: https://github.com/alif-faiq/eduwork-bootcamp-10

## Overview

This repository contains sequential front-end exercise pages; its most application-like example is a client-side product storefront in session 5. The visible workflow is browsing and filtering a product catalog, viewing product details, and managing a shopping cart. The graph focuses on that runtime example; earlier sessions are standalone HTML/CSS exercises. Some wiring is omitted because the HTML files and much of the JavaScript were not sampled.

Main entry points: [`sesi-5-javascript/script.js`](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js) (Storefront behavior), [`sesi-5-javascript/index.html`](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/index.html) (Storefront page), [`sesi-5-javascript/style.css`](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/style.css) (Storefront styles), [`sesi-5-javascript/products.js`](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/products.js) (Product data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Storefront UI"]
  node_storefront["Storefront page<br/>[index.html]"]
  node_styles["Storefront styles<br/>[style.css]"]
  node_controller["Storefront behavior<br/>[script.js]"]
end

subgraph group_catalog["Product Catalog"]
  node_catalog_data["Product data<br/>[products.js]"]
  node_filter_sort["Filter and sort<br/>[script.js]"]
  node_product_views["Catalog and details<br/>[script.js]"]
end

subgraph group_shopping["Shopping State"]
  node_cart_state["Cart state<br/>[script.js]"]
  node_cart_view["Cart display<br/>[script.js]"]
  node_notifications["Toast feedback<br/>[script.js]"]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_storefront
node_storefront -->|"styled by"| node_styles
node_storefront -->|"interacts through"| node_controller
node_controller -->|"reads products"| node_catalog_data
node_controller -->|"handles filters"| node_filter_sort
node_filter_sort -->|"renders results"| node_product_views
node_controller -->|"renders views"| node_product_views
node_controller -->|"updates cart"| node_cart_state
node_cart_state -->|"refreshes display"| node_cart_view
node_controller -->|"initializes display"| node_cart_view
node_cart_state -->|"shows feedback"| node_notifications

click node_storefront "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/index.html"
click node_styles "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/style.css"
click node_controller "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js"
click node_catalog_data "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/products.js"
click node_filter_sort "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js"
click node_product_views "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js"
click node_cart_state "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js"
click node_cart_view "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js"
click node_notifications "https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js"

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_storefront,node_styles,node_controller toneBlue
class node_catalog_data,node_filter_sort,node_product_views toneAmber
class node_cart_state,node_cart_view,node_notifications toneMint
class node_shopper toneIndigo
```

## Components

### Storefront UI

- [Storefront page](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/index.html): `sesi-5-javascript/index.html`
- [Storefront styles](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/style.css): `sesi-5-javascript/style.css`
- [Storefront behavior](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js): `sesi-5-javascript/script.js`

### Product Catalog

- [Product data](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/products.js): `sesi-5-javascript/products.js`
- [Filter and sort](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js): `sesi-5-javascript/script.js`
- [Catalog and details](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js): `sesi-5-javascript/script.js`

### Shopping State

- [Cart state](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js): `sesi-5-javascript/script.js`
- [Cart display](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js): `sesi-5-javascript/script.js`
- [Toast feedback](https://github.com/alif-faiq/eduwork-bootcamp-10/blob/main/sesi-5-javascript/script.js): `sesi-5-javascript/script.js`

### Other components

- **Shopper**

## Connections

- Shopper → Storefront page: uses
- Storefront page → Storefront styles: styled by
- Storefront page → Storefront behavior: interacts through
- Storefront behavior → Product data: reads products
- Storefront behavior → Filter and sort: handles filters
- Filter and sort → Catalog and details: renders results
- Storefront behavior → Catalog and details: renders views
- Storefront behavior → Cart state: updates cart
- Cart state → Cart display: refreshes display
- Storefront behavior → Cart display: initializes display
- Cart state → Toast feedback: shows feedback