# bearon56-cmyk/myprojects architecture

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

- Interactive diagram: https://gitdiagram.com/bearon56-cmyk/myprojects
- Repository: https://github.com/bearon56-cmyk/myprojects

## Overview

This repository is a collection of standalone web-learning projects, not one integrated application. The user-facing workflows include quizzes, games, task and note management, weather lookup, repository discovery, and small page/menu demos. Sampled scripts show the interactive behavior and external API calls; several projects are represented only by their source-tree names, so their internal features and connections are not inferred.

Main entry points: [`proyekReact/src/App.jsx`](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/App.jsx) (Todo State), [`random github taker/script.js`](https://github.com/bearon56-cmyk/myprojects/blob/main/random%20github%20taker/script.js) (Repository Finder), [`weatherApp/script.js`](https://github.com/bearon56-cmyk/myprojects/blob/main/weatherApp/script.js) (Weather Lookup), [`proyekReact/src/main.jsx`](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/main.jsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interactive["Interactive Apps"]
  node_quiz["Flashcard Quiz<br/>[script.js]"]
  node_tictactoe["Tic Tac Toe<br/>[script.js]"]
  node_todolist["Todo List<br/>[script.js]"]
  node_notes["Notes Editor<br/>[script.js]"]
end

subgraph group_utilities["Lookup Utilities"]
  node_github["Repository Finder<br/>[script.js]"]
  node_weather["Weather Lookup<br/>[script.js]"]
end

subgraph group_webdemos["Web Demos"]
  node_reddit["Reddit Demo<br/>[main.js]"]
  node_tailwind["Tailwind Menu<br/>[main.js]"]
  node_identities["Identities Page<br/>[identities.html]"]
end

subgraph group_reactdemo["React Todo"]
  node_reactentry["React Entry<br/>[main.jsx]"]
  node_reactapp["Todo State<br/>[App.jsx]"]
  node_reactform["Task Form<br/>[Form.jsx]"]
  node_reactbox["Task Item<br/>[Box.jsx]"]
  node_reactbutton["Button Component<br/>[Button.jsx]"]
  node_reactparagraph["Paragraph Component<br/>[Paragraph.jsx]"]
end

node_user(("Visitor"))
node_githubapi["GitHub API"]
node_languagecatalog["Language Catalog"]
node_weatherapi["Visual Crossing API"]

node_user -->|"uses"| node_quiz
node_user -->|"plays"| node_tictactoe
node_user -.->|"uses"| node_todolist
node_user -->|"edits notes"| node_notes
node_user -->|"chooses language"| node_github
node_github -->|"searches repos"| node_githubapi
node_github -->|"loads options"| node_languagecatalog
node_user -->|"enters location"| node_weather
node_weather -->|"fetches forecast"| node_weatherapi
node_user -.->|"visits"| node_reddit
node_user -->|"toggles menu"| node_tailwind
node_user -.->|"views"| node_identities
node_reactentry -->|"renders"| node_reactapp
node_reactapp -->|"renders"| node_reactform
node_reactapp -->|"renders tasks"| node_reactbox
node_user -.->|"manages tasks"| node_reactapp

click node_quiz "https://github.com/bearon56-cmyk/myprojects/blob/main/quiz/script.js"
click node_tictactoe "https://github.com/bearon56-cmyk/myprojects/blob/main/tictactoe/script.js"
click node_todolist "https://github.com/bearon56-cmyk/myprojects/blob/main/todolist/script.js"
click node_notes "https://github.com/bearon56-cmyk/myprojects/blob/main/todolist2-electric%20boogaloo/script.js"
click node_github "https://github.com/bearon56-cmyk/myprojects/blob/main/random%20github%20taker/script.js"
click node_weather "https://github.com/bearon56-cmyk/myprojects/blob/main/weatherApp/script.js"
click node_reddit "https://github.com/bearon56-cmyk/myprojects/blob/main/bootlegReddit/src/main.js"
click node_tailwind "https://github.com/bearon56-cmyk/myprojects/blob/main/proyek-tailwind/src/main.js"
click node_identities "https://github.com/bearon56-cmyk/myprojects/blob/main/proyek-tailwind/src/identities.html"
click node_reactentry "https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/main.jsx"
click node_reactapp "https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/App.jsx"
click node_reactform "https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Form.jsx"
click node_reactbox "https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Box.jsx"
click node_reactbutton "https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Button.jsx"
click node_reactparagraph "https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Paragraph.jsx"

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_quiz,node_tictactoe,node_todolist,node_notes toneBlue
class node_github,node_weather toneAmber
class node_reddit,node_tailwind,node_identities,node_githubapi,node_weatherapi toneMint
class node_reactentry,node_reactapp,node_reactform,node_reactbox,node_reactbutton,node_reactparagraph toneRose
class node_user,node_languagecatalog toneIndigo
```

## Components

### Interactive Apps

- [Flashcard Quiz](https://github.com/bearon56-cmyk/myprojects/blob/main/quiz/script.js): `quiz/script.js`
- [Tic Tac Toe](https://github.com/bearon56-cmyk/myprojects/blob/main/tictactoe/script.js): `tictactoe/script.js`
- [Todo List](https://github.com/bearon56-cmyk/myprojects/blob/main/todolist/script.js): `todolist/script.js`
- [Notes Editor](https://github.com/bearon56-cmyk/myprojects/blob/main/todolist2-electric%20boogaloo/script.js): `todolist2-electric boogaloo/script.js`

### Lookup Utilities

- [Repository Finder](https://github.com/bearon56-cmyk/myprojects/blob/main/random%20github%20taker/script.js): `random github taker/script.js`
- [Weather Lookup](https://github.com/bearon56-cmyk/myprojects/blob/main/weatherApp/script.js): `weatherApp/script.js`

### Web Demos

- [Reddit Demo](https://github.com/bearon56-cmyk/myprojects/blob/main/bootlegReddit/src/main.js): `bootlegReddit/src/main.js`
- [Tailwind Menu](https://github.com/bearon56-cmyk/myprojects/blob/main/proyek-tailwind/src/main.js): `proyek-tailwind/src/main.js`
- [Identities Page](https://github.com/bearon56-cmyk/myprojects/blob/main/proyek-tailwind/src/identities.html): `proyek-tailwind/src/identities.html`

### React Todo

- [React Entry](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/main.jsx): `proyekReact/src/main.jsx`
- [Todo State](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/App.jsx): `proyekReact/src/App.jsx`
- [Task Form](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Form.jsx): `proyekReact/src/Form.jsx`
- [Task Item](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Box.jsx): `proyekReact/src/Box.jsx`
- [Button Component](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Button.jsx): `proyekReact/src/Button.jsx`
- [Paragraph Component](https://github.com/bearon56-cmyk/myprojects/blob/main/proyekReact/src/Paragraph.jsx): `proyekReact/src/Paragraph.jsx`

### Other components

- **Visitor**
- **GitHub API**
- **Language Catalog**
- **Visual Crossing API**

## Connections

- Visitor → Flashcard Quiz: uses (evidence: `quiz/script.js`)
- Visitor → Tic Tac Toe: plays (evidence: `tictactoe/script.js`)
- Visitor → Todo List: uses
- Visitor → Notes Editor: edits notes (evidence: `todolist2-electric boogaloo/script.js`)
- Visitor → Repository Finder: chooses language (evidence: `random github taker/script.js`)
- Repository Finder → GitHub API: searches repos (evidence: `random github taker/script.js`)
- Repository Finder → Language Catalog: loads options (evidence: `random github taker/script.js`)
- Visitor → Weather Lookup: enters location (evidence: `weatherApp/script.js`)
- Weather Lookup → Visual Crossing API: fetches forecast (evidence: `weatherApp/script.js`)
- Visitor → Reddit Demo: visits
- Visitor → Tailwind Menu: toggles menu (evidence: `proyek-tailwind/src/main.js`)
- Visitor → Identities Page: views
- React Entry → Todo State: renders (evidence: `proyekReact/src/main.jsx`)
- Todo State → Task Form: renders (evidence: `proyekReact/src/App.jsx`)
- Todo State → Task Item: renders tasks (evidence: `proyekReact/src/App.jsx`)
- Visitor → Todo State: manages tasks