# kyo456/uoacs-devs-hackathon-2026 architecture

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

- Interactive diagram: https://gitdiagram.com/kyo456/uoacs-devs-hackathon-2026
- Repository: https://github.com/kyo456/uoacs-devs-hackathon-2026

## Overview

This repository implements a browser-based contact rolodex, with a Chrome-extension workflow for extracting business contact details from the active website and saving them as searchable cards. The app also supports card and group management and a flip-card interface. The README provides no product detail, so this map relies on the sampled app and scraper code; some UI and integration wiring is therefore omitted where it cannot be confirmed.

Main entry points: [`FINAL-REAL-combined/app.js`](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js) (Rolodex app), [`FINAL-REAL-combined/scraper.js`](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/scraper.js) (Contact extraction), [`FINAL-REAL-combined/index.html`](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/index.html) (Rolodex interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Rolodex experience"]
  node_app["Rolodex app<br/>[app.js]"]
  node_interface["Rolodex interface<br/>[index.html]"]
  node_card_views["Card views<br/>[app.js]"]
  node_search["Card search<br/>[app.js]"]
  node_group_management["Group management<br/>[app.js]"]
end

subgraph group_capture["Contact capture"]
  node_capture_action["Page capture<br/>[app.js]"]
  node_scraper["Contact extraction<br/>[scraper.js]"]
  node_contact_page["Contact-page fetch<br/>[scraper.js]"]
end

subgraph group_persistence["Saved data"]
  node_card_data[("Contact cards<br/>[app.js]")]
  node_group_data[("Contact groups<br/>[app.js]")]
end

subgraph group_browser["Browser environment"]
  node_chrome["Chrome extension APIs"]
  node_page_dom["Website DOM"]
end

node_user(("User"))
node_website["Active website"]

node_user -->|"uses"| node_interface
node_interface -->|"hosts"| node_app
node_app -->|"renders"| node_card_views
node_app -->|"handles search"| node_search
node_app -->|"manages groups"| node_group_management
node_app -->|"starts capture"| node_capture_action
node_capture_action -->|"queries active tab"| node_chrome
node_chrome -->|"targets tab"| node_website
node_capture_action -->|"injects scraper"| node_scraper
node_scraper -->|"reads page"| node_page_dom
node_page_dom -->|"belongs to"| node_website
node_scraper -.->|"may fetch contact page"| node_contact_page
node_contact_page -.->|"returns page data"| node_scraper
node_capture_action -->|"saves extracted card"| node_card_data
node_app -->|"uses local storage"| node_chrome
node_card_data -->|"reads and writes"| node_chrome
node_group_data -->|"reads and writes"| node_chrome
node_search -->|"searches saved cards"| node_card_data
node_group_management -->|"reads and updates"| node_group_data

click node_app "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js"
click node_interface "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/index.html"
click node_card_views "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js"
click node_search "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js"
click node_group_management "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js"
click node_capture_action "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js"
click node_scraper "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/scraper.js"
click node_contact_page "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/scraper.js"
click node_card_data "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js"
click node_group_data "https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.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_app,node_interface,node_card_views,node_search,node_group_management,node_user toneBlue
class node_capture_action,node_scraper,node_contact_page toneAmber
class node_card_data,node_group_data toneMint
class node_chrome,node_page_dom toneRose
class node_website toneIndigo
```

## Components

### Rolodex experience

- [Rolodex app](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`
- [Rolodex interface](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/index.html): `FINAL-REAL-combined/index.html`
- [Card views](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`
- [Card search](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`
- [Group management](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`

### Contact capture

- [Page capture](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`
- [Contact extraction](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/scraper.js): `FINAL-REAL-combined/scraper.js`
- [Contact-page fetch](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/scraper.js): `FINAL-REAL-combined/scraper.js`

### Saved data

- [Contact cards](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`
- [Contact groups](https://github.com/kyo456/uoacs-devs-hackathon-2026/blob/main/FINAL-REAL-combined/app.js): `FINAL-REAL-combined/app.js`

### Browser environment

- **Chrome extension APIs**
- **Website DOM**

### Other components

- **User**
- **Active website**

## Connections

- User → Rolodex interface: uses
- Rolodex interface → Rolodex app: hosts
- Rolodex app → Card views: renders
- Rolodex app → Card search: handles search
- Rolodex app → Group management: manages groups
- Rolodex app → Page capture: starts capture
- Page capture → Chrome extension APIs: queries active tab
- Chrome extension APIs → Active website: targets tab
- Page capture → Contact extraction: injects scraper
- Contact extraction → Website DOM: reads page
- Website DOM → Active website: belongs to
- Contact extraction → Contact-page fetch: may fetch contact page
- Contact-page fetch → Contact extraction: returns page data
- Page capture → Contact cards: saves extracted card
- Rolodex app → Chrome extension APIs: uses local storage
- Contact cards → Chrome extension APIs: reads and writes
- Contact groups → Chrome extension APIs: reads and writes
- Card search → Contact cards: searches saved cards
- Group management → Contact groups: reads and updates