# harshfi/explorer_sem3_web architecture

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

- Interactive diagram: https://gitdiagram.com/harshfi/explorer_sem3_web
- Repository: https://github.com/harshfi/explorer_sem3_web

## Overview

This repository is a collection of JavaScript and React lesson demos rather than one integrated application. The visible user workflows include changing a counter, adding todo items, searching GitHub for a profile, and accessing a small Express server. The React entry files mount individual lesson components; the GitHub search component calls the GitHub API, while the server serves static files and accepts task submissions into an in-memory array. Some lesson sources are not sampled, so their behavior and connections are omitted.

Main entry points: [`Lec7/index.js`](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/index.js) (Express Server), [`Lec3/first React APP/src/main.jsx`](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/main.jsx) (First React Entry), [`Lec4/Counter/src/main.jsx`](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/Counter/src/main.jsx) (Counter Entry), [`Lec4/TodoList/src/main.jsx`](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/TodoList/src/main.jsx) (Todo Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_react_basics["React Basics"]
  node_first_entry["First React Entry<br/>[main.jsx]"]
  node_first_app["First App<br/>[App.jsx]"]
  node_first_counter["First Counter<br/>[Counter.jsx]"]
  node_counter_entry["Counter Entry<br/>[main.jsx]"]
  node_counter_app["Counter App<br/>[App.jsx]"]
  node_todo4_entry["Todo Entry<br/>[main.jsx]"]
  node_todo4_app["Todo App<br/>[App.jsx]"]
  node_todo5_entry["Todo Entry<br/>[main.jsx]"]
  node_todo5_app["Todo App<br/>[App.jsx]"]
  node_todo6_entry["Todo Entry<br/>[main.jsx]"]
  node_todo6_app["Todo App<br/>[App.jsx]"]
  node_todo_helpers["Todo Functions<br/>[functions.js]"]
end

subgraph group_react_data["React Data Demos"]
  node_github_entry["Finder Entry<br/>[main.jsx]"]
  node_github_app["GitHub Finder<br/>[App.jsx]"]
  node_github_api["GitHub API"]
  node_quotes_entry["Quotes Entry<br/>[main.jsx]"]
  node_quotes_app["Quotes Demo<br/>[App.jsx]"]
  node_quotes_deep_entry["Quotes Entry<br/>[main.jsx]"]
  node_quotes_deep_app["Quotes Demo<br/>[App.jsx]"]
  node_quote_service["Quotes API"]
  node_clock["Clock Component<br/>[Interval.jsx]"]
  node_clock_deep["Clock Component<br/>[Interval.jsx]"]
end

subgraph group_express_demo["Express Demo"]
  node_server["Express Server<br/>[index.js]"]
  node_task_memory[("Task Array<br/>[index.js]")]
  node_public_script["Public Script<br/>[script.js]"]
end

subgraph group_js_lessons["JavaScript Lessons"]
  node_lec1_script["Lesson Script<br/>[script.js]"]
  node_lec2_script["Lesson Script<br/>[script.js]"]
  node_lec2_project["Project Script<br/>[script.js]"]
  node_babel_demo["Babel Demo<br/>[babel.js]"]
  node_lec3_script["React Script<br/>[script.js]"]
end

node_learner(("Learner"))
node_browser_user(("Browser User"))
node_http_client(("HTTP Client"))

node_learner -->|"opens demo"| node_first_entry
node_first_entry -->|"renders"| node_first_app
node_first_entry -->|"renders"| node_first_counter
node_learner -->|"opens demo"| node_counter_entry
node_counter_entry -->|"renders"| node_counter_app
node_learner -->|"opens demo"| node_todo4_entry
node_todo4_entry -->|"renders"| node_todo4_app
node_learner -->|"opens demo"| node_todo5_entry
node_todo5_entry -->|"renders"| node_todo5_app
node_learner -->|"opens demo"| node_todo6_entry
node_todo6_entry -->|"renders"| node_todo6_app
node_learner -->|"opens demo"| node_github_entry
node_github_entry -->|"renders"| node_github_app
node_github_app -.->|"fetches profile"| node_github_api
node_learner -->|"opens demo"| node_quotes_entry
node_quotes_entry -->|"renders"| node_clock
node_quotes_app -.->|"fetches quotes"| node_quote_service
node_learner -->|"opens demo"| node_quotes_deep_entry
node_quotes_deep_entry -->|"renders"| node_clock_deep
node_quotes_deep_app -.->|"fetches quotes"| node_quote_service
node_browser_user -->|"requests page"| node_server
node_server -->|"serves static"| node_public_script
node_http_client -->|"posts task"| node_server
node_server -->|"appends task"| node_task_memory

click node_first_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/main.jsx"
click node_first_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/App.jsx"
click node_first_counter "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/Counter.jsx"
click node_counter_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/Counter/src/main.jsx"
click node_counter_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/Counter/src/App.jsx"
click node_todo4_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/TodoList/src/main.jsx"
click node_todo4_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/TodoList/src/App.jsx"
click node_todo5_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec5/TodoList/src/main.jsx"
click node_todo5_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec5/TodoList/src/App.jsx"
click node_todo6_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/TodoList/src/main.jsx"
click node_todo6_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/TodoList/src/App.jsx"
click node_todo_helpers "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/TodoList/src/functions.js"
click node_github_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec8/GithubFinder/src/main.jsx"
click node_github_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec8/GithubFinder/src/App.jsx"
click node_quotes_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/useEffect/src/main.jsx"
click node_quotes_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/useEffect/src/App.jsx"
click node_quotes_deep_entry "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/UseEffectInDepth/src/main.jsx"
click node_quotes_deep_app "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/UseEffectInDepth/src/App.jsx"
click node_clock "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/useEffect/src/Interval.jsx"
click node_clock_deep "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/UseEffectInDepth/src/Interval.jsx"
click node_server "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/index.js"
click node_task_memory "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/index.js"
click node_public_script "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/public/script.js"
click node_lec1_script "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec1/script.js"
click node_lec2_script "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec2/script.js"
click node_lec2_project "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec2/Project1/script.js"
click node_babel_demo "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec2/babel.js"
click node_lec3_script "https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/otherReactApp/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_first_entry,node_first_app,node_first_counter,node_counter_entry,node_counter_app,node_todo4_entry,node_todo4_app,node_todo5_entry,node_todo5_app,node_todo6_entry,node_todo6_app,node_todo_helpers,node_browser_user,node_http_client toneBlue
class node_github_entry,node_github_app,node_github_api,node_quotes_entry,node_quotes_app,node_quotes_deep_entry,node_quotes_deep_app,node_quote_service,node_clock,node_clock_deep toneAmber
class node_server,node_task_memory,node_public_script toneMint
class node_lec1_script,node_lec2_script,node_lec2_project,node_babel_demo,node_lec3_script toneRose
class node_learner toneIndigo
```

## Components

### React Basics

- [First React Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/main.jsx): `Lec3/first React APP/src/main.jsx`
- [First App](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/App.jsx): `Lec3/first React APP/src/App.jsx`
- [First Counter](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/first%20React%20APP/src/Counter.jsx): `Lec3/first React APP/src/Counter.jsx`
- [Counter Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/Counter/src/main.jsx): `Lec4/Counter/src/main.jsx`
- [Counter App](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/Counter/src/App.jsx): `Lec4/Counter/src/App.jsx`
- [Todo Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/TodoList/src/main.jsx): `Lec4/TodoList/src/main.jsx`
- [Todo App](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec4/TodoList/src/App.jsx): `Lec4/TodoList/src/App.jsx`
- [Todo Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec5/TodoList/src/main.jsx): `Lec5/TodoList/src/main.jsx`
- [Todo App](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec5/TodoList/src/App.jsx): `Lec5/TodoList/src/App.jsx`
- [Todo Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/TodoList/src/main.jsx): `Lec6/TodoList/src/main.jsx`
- [Todo App](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/TodoList/src/App.jsx): `Lec6/TodoList/src/App.jsx`
- [Todo Functions](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/TodoList/src/functions.js): `Lec6/TodoList/src/functions.js`

### React Data Demos

- [Finder Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec8/GithubFinder/src/main.jsx): `Lec8/GithubFinder/src/main.jsx`
- [GitHub Finder](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec8/GithubFinder/src/App.jsx): `Lec8/GithubFinder/src/App.jsx`
- **GitHub API**
- [Quotes Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/useEffect/src/main.jsx): `Lec6/useEffect/src/main.jsx`
- [Quotes Demo](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/useEffect/src/App.jsx): `Lec6/useEffect/src/App.jsx`
- [Quotes Entry](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/UseEffectInDepth/src/main.jsx): `Lec6/UseEffectInDepth/src/main.jsx`
- [Quotes Demo](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/UseEffectInDepth/src/App.jsx): `Lec6/UseEffectInDepth/src/App.jsx`
- **Quotes API**
- [Clock Component](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/useEffect/src/Interval.jsx): `Lec6/useEffect/src/Interval.jsx`
- [Clock Component](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec6/UseEffectInDepth/src/Interval.jsx): `Lec6/UseEffectInDepth/src/Interval.jsx`

### Express Demo

- [Express Server](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/index.js): `Lec7/index.js`
- [Task Array](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/index.js): `Lec7/index.js`
- [Public Script](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec7/public/script.js): `Lec7/public/script.js`

### JavaScript Lessons

- [Lesson Script](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec1/script.js): `Lec1/script.js`
- [Lesson Script](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec2/script.js): `Lec2/script.js`
- [Project Script](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec2/Project1/script.js): `Lec2/Project1/script.js`
- [Babel Demo](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec2/babel.js): `Lec2/babel.js`
- [React Script](https://github.com/harshfi/explorer_sem3_web/blob/main/Lec3/otherReactApp/script.js): `Lec3/otherReactApp/script.js`

### Other components

- **Learner**
- **Browser User**
- **HTTP Client**

## Connections

- Learner → First React Entry: opens demo
- First React Entry → First App: renders
- First React Entry → First Counter: renders
- Learner → Counter Entry: opens demo
- Counter Entry → Counter App: renders
- Learner → Todo Entry: opens demo
- Todo Entry → Todo App: renders
- Learner → Todo Entry: opens demo
- Todo Entry → Todo App: renders
- Learner → Todo Entry: opens demo
- Todo Entry → Todo App: renders
- Learner → Finder Entry: opens demo
- Finder Entry → GitHub Finder: renders
- GitHub Finder → GitHub API: fetches profile
- Learner → Quotes Entry: opens demo
- Quotes Entry → Clock Component: renders
- Quotes Demo → Quotes API: fetches quotes
- Learner → Quotes Entry: opens demo
- Quotes Entry → Clock Component: renders
- Quotes Demo → Quotes API: fetches quotes
- Browser User → Express Server: requests page
- Express Server → Public Script: serves static
- HTTP Client → Express Server: posts task
- Express Server → Task Array: appends task