# anik-121/assignment-05 architecture

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

- Interactive diagram: https://gitdiagram.com/anik-121/assignment-05
- Repository: https://github.com/anik-121/assignment-05

## Overview

This is a small browser-based issue tracker interface. A user logs in, the client loads and displays issues, and selecting an issue fetches and shows its details. The client also supports status tabs and formats issue labels and dates. The README is empty and only script.js was excerpted, so the graph omits unverified page structure and search behavior; the API is shown as an external service because the client fetches from it.

Main entry points: [`script.js`](https://github.com/anik-121/assignment-05/blob/main/script.js) (Issue loader), [`index.html`](https://github.com/anik-121/assignment-05/blob/main/index.html) (Web page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access"]
  node_page["Web page<br/>[index.html]"]
  node_login["Login handler<br/>[script.js]"]
end

subgraph group_browse["Issue browsing"]
  node_issue_loader["Issue loader<br/>[script.js]"]
  node_issue_list["Issue list<br/>[script.js]"]
  node_tab_filter["Status tabs<br/>[script.js]"]
end

subgraph group_details["Issue details"]
  node_issue_detail["Issue details<br/>[script.js]"]
end

subgraph group_helpers["Display helpers"]
  node_formatters["Display formatters<br/>[script.js]"]
end

node_user(("User"))
node_issue_api{{"Issues API"}}

node_user -.->|"uses"| node_page
node_page -->|"handles events"| node_login
node_login -->|"loads after login"| node_issue_loader
node_issue_loader -->|"fetches issues"| node_issue_api
node_issue_loader -->|"renders results"| node_issue_list
node_tab_filter -->|"rerenders"| node_issue_list
node_user -.->|"selects status"| node_tab_filter
node_user -.->|"opens issue"| node_issue_detail
node_issue_detail -->|"fetches details"| node_issue_api
node_issue_detail -->|"formats labels and dates"| node_formatters
node_issue_list -->|"formats cards"| node_formatters

click node_page "https://github.com/anik-121/assignment-05/blob/main/index.html"
click node_login "https://github.com/anik-121/assignment-05/blob/main/script.js"
click node_issue_loader "https://github.com/anik-121/assignment-05/blob/main/script.js"
click node_issue_list "https://github.com/anik-121/assignment-05/blob/main/script.js"
click node_tab_filter "https://github.com/anik-121/assignment-05/blob/main/script.js"
click node_issue_detail "https://github.com/anik-121/assignment-05/blob/main/script.js"
click node_formatters "https://github.com/anik-121/assignment-05/blob/main/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_page,node_login,node_user toneBlue
class node_issue_loader,node_issue_list,node_tab_filter toneAmber
class node_issue_detail,node_issue_api toneMint
class node_formatters toneRose
```

## Components

### Access

- [Web page](https://github.com/anik-121/assignment-05/blob/main/index.html): `index.html`
- [Login handler](https://github.com/anik-121/assignment-05/blob/main/script.js): `script.js`

### Issue browsing

- [Issue loader](https://github.com/anik-121/assignment-05/blob/main/script.js): `script.js`
- [Issue list](https://github.com/anik-121/assignment-05/blob/main/script.js): `script.js`
- [Status tabs](https://github.com/anik-121/assignment-05/blob/main/script.js): `script.js`

### Issue details

- [Issue details](https://github.com/anik-121/assignment-05/blob/main/script.js): `script.js`

### Display helpers

- [Display formatters](https://github.com/anik-121/assignment-05/blob/main/script.js): `script.js`

### Other components

- **User**
- **Issues API**

## Connections

- User → Web page: uses
- Web page → Login handler: handles events (evidence: `script.js`)
- Login handler → Issue loader: loads after login (evidence: `script.js`)
- Issue loader → Issues API: fetches issues (evidence: `script.js`)
- Issue loader → Issue list: renders results (evidence: `script.js`)
- Status tabs → Issue list: rerenders (evidence: `script.js`)
- User → Status tabs: selects status
- User → Issue details: opens issue
- Issue details → Issues API: fetches details (evidence: `script.js`)
- Issue details → Display formatters: formats labels and dates (evidence: `script.js`)
- Issue list → Display formatters: formats cards (evidence: `script.js`)