# gidensmike/assignment architecture

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

## Overview

This is a static browser-based showcase of frontend assignments, with a landing page linking to portfolio interactions, four data-oriented dashboards, a shopping cart, and a development guide. Users navigate to a project, interact with forms or controls, and see calculated or rendered results in that page. The sampled scripts show browser-local state rather than a backend; the cart, student and library data are kept in memory, while theme selection persists in localStorage. Other page-level capabilities are represented from filenames and available excerpts; wiring for unsampled pages is not inferred.

Main entry points: [`js/main.js`](https://github.com/gidensmike/assignment/blob/main/js/main.js) (Shared navigation), [`portfolio.html`](https://github.com/gidensmike/assignment/blob/main/portfolio.html) (Portfolio page), [`supermarket.html`](https://github.com/gidensmike/assignment/blob/main/supermarket.html) (Checkout dashboard), [`student.html`](https://github.com/gidensmike/assignment/blob/main/student.html) (Student dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Showcase shell"]
  node_landing["Project landing<br/>[index.html]"]
  node_navigation["Shared navigation<br/>[main.js]"]
  node_theme["Theme preference<br/>[theme.js]"]
end

subgraph group_portfolio["Portfolio experience"]
  node_portfolio_page["Portfolio page<br/>[portfolio.html]"]
  node_portfolio_interactions["Portfolio interactions<br/>[portfolio.js]"]
end

subgraph group_assignments["Assignment dashboards"]
  node_supermarket_page["Checkout dashboard<br/>[supermarket.html]"]
  node_supermarket_logic["Checkout calculations<br/>[supermarket.js]"]
  node_student_page["Student dashboard<br/>[student.html]"]
  node_student_logic["Student management<br/>[student.js]"]
  node_library_page["Library dashboard<br/>[library.html]"]
  node_library_logic["Library management<br/>[library.js]"]
  node_cart_page["Shopping cart<br/>[cart.html]"]
  node_cart_logic["Cart operations<br/>[cart.js]"]
end

subgraph group_guide["Development guide"]
  node_guide_page["Development guide<br/>[guide.html]"]
  node_guide_logic["Guide interactions<br/>[guide.js]"]
end

node_visitor(("Visitor"))
node_theme_storage[("Browser localStorage")]

node_visitor -->|"opens"| node_landing
node_visitor -->|"opens"| node_portfolio_page
node_visitor -->|"opens"| node_supermarket_page
node_visitor -->|"opens"| node_student_page
node_visitor -->|"opens"| node_library_page
node_visitor -->|"opens"| node_cart_page
node_visitor -->|"opens"| node_guide_page
node_landing -->|"loads shared UI"| node_navigation
node_portfolio_page -->|"loads shared UI"| node_navigation
node_supermarket_page -->|"loads shared UI"| node_navigation
node_student_page -->|"loads shared UI"| node_navigation
node_library_page -->|"loads shared UI"| node_navigation
node_cart_page -->|"loads shared UI"| node_navigation
node_guide_page -->|"loads shared UI"| node_navigation
node_navigation -->|"wires toggle"| node_theme
node_theme -->|"reads and writes"| node_theme_storage
node_portfolio_page -->|"loads behavior"| node_portfolio_interactions
node_supermarket_page -->|"loads behavior"| node_supermarket_logic
node_student_page -->|"loads behavior"| node_student_logic
node_library_page -->|"loads behavior"| node_library_logic
node_cart_page -->|"loads behavior"| node_cart_logic
node_guide_page -->|"loads behavior"| node_guide_logic

click node_landing "https://github.com/gidensmike/assignment/blob/main/index.html"
click node_navigation "https://github.com/gidensmike/assignment/blob/main/js/main.js"
click node_theme "https://github.com/gidensmike/assignment/blob/main/js/theme.js"
click node_portfolio_page "https://github.com/gidensmike/assignment/blob/main/portfolio.html"
click node_portfolio_interactions "https://github.com/gidensmike/assignment/blob/main/js/portfolio.js"
click node_supermarket_page "https://github.com/gidensmike/assignment/blob/main/supermarket.html"
click node_supermarket_logic "https://github.com/gidensmike/assignment/blob/main/js/supermarket.js"
click node_student_page "https://github.com/gidensmike/assignment/blob/main/student.html"
click node_student_logic "https://github.com/gidensmike/assignment/blob/main/js/student.js"
click node_library_page "https://github.com/gidensmike/assignment/blob/main/library.html"
click node_library_logic "https://github.com/gidensmike/assignment/blob/main/js/library.js"
click node_cart_page "https://github.com/gidensmike/assignment/blob/main/cart.html"
click node_cart_logic "https://github.com/gidensmike/assignment/blob/main/js/cart.js"
click node_guide_page "https://github.com/gidensmike/assignment/blob/main/guide.html"
click node_guide_logic "https://github.com/gidensmike/assignment/blob/main/js/guide.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_landing,node_navigation,node_theme toneBlue
class node_portfolio_page,node_portfolio_interactions,node_theme_storage toneAmber
class node_supermarket_page,node_supermarket_logic,node_student_page,node_student_logic,node_library_page,node_library_logic,node_cart_page,node_cart_logic toneMint
class node_guide_page,node_guide_logic toneRose
class node_visitor toneIndigo
```

## Components

### Showcase shell

- [Project landing](https://github.com/gidensmike/assignment/blob/main/index.html): `index.html`
- [Shared navigation](https://github.com/gidensmike/assignment/blob/main/js/main.js): `js/main.js`
- [Theme preference](https://github.com/gidensmike/assignment/blob/main/js/theme.js): `js/theme.js`

### Portfolio experience

- [Portfolio page](https://github.com/gidensmike/assignment/blob/main/portfolio.html): `portfolio.html`
- [Portfolio interactions](https://github.com/gidensmike/assignment/blob/main/js/portfolio.js): `js/portfolio.js`

### Assignment dashboards

- [Checkout dashboard](https://github.com/gidensmike/assignment/blob/main/supermarket.html): `supermarket.html`
- [Checkout calculations](https://github.com/gidensmike/assignment/blob/main/js/supermarket.js): `js/supermarket.js`
- [Student dashboard](https://github.com/gidensmike/assignment/blob/main/student.html): `student.html`
- [Student management](https://github.com/gidensmike/assignment/blob/main/js/student.js): `js/student.js`
- [Library dashboard](https://github.com/gidensmike/assignment/blob/main/library.html): `library.html`
- [Library management](https://github.com/gidensmike/assignment/blob/main/js/library.js): `js/library.js`
- [Shopping cart](https://github.com/gidensmike/assignment/blob/main/cart.html): `cart.html`
- [Cart operations](https://github.com/gidensmike/assignment/blob/main/js/cart.js): `js/cart.js`

### Development guide

- [Development guide](https://github.com/gidensmike/assignment/blob/main/guide.html): `guide.html`
- [Guide interactions](https://github.com/gidensmike/assignment/blob/main/js/guide.js): `js/guide.js`

### Other components

- **Visitor**
- **Browser localStorage**

## Connections

- Visitor → Project landing: opens
- Visitor → Portfolio page: opens
- Visitor → Checkout dashboard: opens
- Visitor → Student dashboard: opens
- Visitor → Library dashboard: opens
- Visitor → Shopping cart: opens
- Visitor → Development guide: opens
- Project landing → Shared navigation: loads shared UI
- Portfolio page → Shared navigation: loads shared UI
- Checkout dashboard → Shared navigation: loads shared UI
- Student dashboard → Shared navigation: loads shared UI
- Library dashboard → Shared navigation: loads shared UI
- Shopping cart → Shared navigation: loads shared UI
- Development guide → Shared navigation: loads shared UI
- Shared navigation → Theme preference: wires toggle
- Theme preference → Browser localStorage: reads and writes
- Portfolio page → Portfolio interactions: loads behavior
- Checkout dashboard → Checkout calculations: loads behavior
- Student dashboard → Student management: loads behavior
- Library dashboard → Library management: loads behavior
- Shopping cart → Cart operations: loads behavior
- Development guide → Guide interactions: loads behavior