# ejazulhaque13/full_stack_oct_2023 architecture

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

## Overview

This repository is a collection of JavaScript and React lessons, exercises, and small browser-app projects rather than one integrated product. A learner moves from language and asynchronous-programming examples to DOM/browser APIs and interactive mini-projects, with separate React demonstrations and an e-commerce app. The graph highlights representative runtime examples and the sampled e-commerce routing/fetch flow. There is no README, and most lesson and project source was not sampled, so uncertain wiring between examples is omitted.

Main entry points: [`React/E-commerce-Project/ecomm-app/src/routes/AppRoutes.jsx`](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/routes/AppRoutes.jsx) (App Routes), [`React/Lec-6_context_API_and_its_usecase/context_api/src/App.jsx`](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-6_context_API_and_its_usecase/context_api/src/App.jsx) (Context Demo), [`React/E-commerce-Project/ecomm-app/src/hooks/useFetchData.js`](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/hooks/useFetchData.js) (Fetch Hook), [`JavaScript/Lec-11_callback_hell_problem_Intro_to_Promises_Consuming_promises`](https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/JavaScript/Lec-11_callback_hell_problem_Intro_to_Promises_Consuming_promises) (Promises Lessons)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_js["JavaScript Lessons"]
  node_async["Promises Lessons"]
  node_language["Language Lessons"]
end

subgraph group_browser["Browser Projects"]
  node_dom["DOM Lessons"]
  node_kanban["Kanban Board<br/>[script.js]"]
  node_dragdrop["Drag Drop API<br/>[Drag_&amp;_Drop_API.js]"]
  node_storage["Client Storage"]
  node_typeahead["Typeahead Demo<br/>[script.js]"]
  node_food["Food Subscription<br/>[script.js]"]
  node_timer["Countdown Timer<br/>[script.js]"]
end

subgraph group_react["React Examples"]
  node_reactlessons["React Lessons<br/>[App.jsx]"]
  node_reacttodos["Hooks Demo<br/>[App.jsx]"]
  node_contextapp["Context Demo<br/>[App.jsx]"]
  node_counterprovider["Counter Provider"]
  node_reduxapp["Redux Demo<br/>[App.jsx]"]
end

subgraph group_commerce["E-commerce App"]
  node_routes["App Routes<br/>[AppRoutes.jsx]"]
  node_fetchhook["Fetch Hook<br/>[useFetchData.js]"]
  node_header["Header<br/>[Header.jsx]"]
  node_listing["Product Listing<br/>[ProductListing.jsx]"]
  node_cartpage["Cart Page<br/>[CartItems.jsx]"]
end

node_learner(("Learner"))
node_api{{"Fake Store API"}}

node_learner -->|"studies"| node_language
node_learner -->|"studies"| node_async
node_learner -->|"studies"| node_dom
node_learner -->|"uses"| node_kanban
node_learner -->|"uses"| node_typeahead
node_learner -->|"uses"| node_food
node_learner -->|"uses"| node_timer
node_learner -->|"studies"| node_reactlessons
node_learner -->|"uses"| node_reacttodos
node_learner -->|"uses"| node_contextapp
node_learner -->|"uses"| node_reduxapp
node_learner -->|"uses"| node_routes
node_contextapp -->|"renders"| node_counterprovider
node_routes -->|"calls"| node_fetchhook
node_routes -->|"renders"| node_header
node_routes -->|"routes to"| node_listing
node_routes -->|"routes to"| node_cartpage
node_fetchhook -->|"requests"| node_api

click node_async "https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/JavaScript/Lec-11_callback_hell_problem_Intro_to_Promises_Consuming_promises"
click node_language "https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/JavaScript/Lec-1_JS_Refresher_%26_Execution_Context"
click node_dom "https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/FE-Machine-Coding/Lec-1_Browser_Env_DOM_API_CURD_in_DOM"
click node_kanban "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/kanban-board-project/js/script.js"
click node_dragdrop "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/kanban-board-project/js/Drag_%26_Drop_API.js"
click node_storage "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/kanban-board-project/js/Client_Storage_API.js"
click node_typeahead "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/Lec-6_Typeahead_System_Intersection_Observer_Debouncing_%26_Throttling%5D/mini_project/typeaheadSystem/js/script.js"
click node_food "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/Lec-7_Lazy_Loading_Kanbanboard_Project/Food_Subscription_Project/js/script.js"
click node_timer "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/Lec-3_Mini_Projects/mini-project/countDownTimer/js/script.js"
click node_reactlessons "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-2_CRA_Via_Vite_States_%26_Props/todo-app/src/App.jsx"
click node_reacttodos "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-3_useEffect_%26_Machine_Coding/todo_useEffect_useRef/src/App.jsx"
click node_contextapp "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-6_context_API_and_its_usecase/context_api/src/App.jsx"
click node_counterprovider "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-6_context_API_and_its_usecase/context_api/src/context/CounterProvider.jsx"
click node_reduxapp "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-7_Redux_%26_its_usecases/redux_concepts_with_example/src/App.jsx"
click node_routes "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/routes/AppRoutes.jsx"
click node_fetchhook "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/hooks/useFetchData.js"
click node_header "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/components/header/Header.jsx"
click node_listing "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/pages/productListing/ProductListing.jsx"
click node_cartpage "https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/pages/cartItems/CartItems.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_async,node_language toneBlue
class node_dom,node_kanban,node_dragdrop,node_storage,node_typeahead,node_food,node_timer toneAmber
class node_reactlessons,node_reacttodos,node_contextapp,node_counterprovider,node_reduxapp,node_api toneMint
class node_routes,node_fetchhook,node_header,node_listing,node_cartpage toneRose
class node_learner toneIndigo
```

## Components

### JavaScript Lessons

- [Promises Lessons](https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/JavaScript/Lec-11_callback_hell_problem_Intro_to_Promises_Consuming_promises): `JavaScript/Lec-11_callback_hell_problem_Intro_to_Promises_Consuming_promises`
- [Language Lessons](https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/JavaScript/Lec-1_JS_Refresher_%26_Execution_Context): `JavaScript/Lec-1_JS_Refresher_&_Execution_Context`

### Browser Projects

- [DOM Lessons](https://github.com/ejazulhaque13/full_stack_oct_2023/tree/master/FE-Machine-Coding/Lec-1_Browser_Env_DOM_API_CURD_in_DOM): `FE-Machine-Coding/Lec-1_Browser_Env_DOM_API_CURD_in_DOM`
- [Kanban Board](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/kanban-board-project/js/script.js): `FE-Machine-Coding/kanban-board-project/js/script.js`
- [Drag Drop API](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/kanban-board-project/js/Drag_%26_Drop_API.js): `FE-Machine-Coding/kanban-board-project/js/Drag_&_Drop_API.js`
- [Client Storage](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/kanban-board-project/js/Client_Storage_API.js): `FE-Machine-Coding/kanban-board-project/js/Client_Storage_API.js`
- [Typeahead Demo](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/Lec-6_Typeahead_System_Intersection_Observer_Debouncing_%26_Throttling%5D/mini_project/typeaheadSystem/js/script.js): `FE-Machine-Coding/Lec-6_Typeahead_System_Intersection_Observer_Debouncing_&_Throttling]/mini_project/typeaheadSystem/js/script.js`
- [Food Subscription](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/Lec-7_Lazy_Loading_Kanbanboard_Project/Food_Subscription_Project/js/script.js): `FE-Machine-Coding/Lec-7_Lazy_Loading_Kanbanboard_Project/Food_Subscription_Project/js/script.js`
- [Countdown Timer](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/FE-Machine-Coding/Lec-3_Mini_Projects/mini-project/countDownTimer/js/script.js): `FE-Machine-Coding/Lec-3_Mini_Projects/mini-project/countDownTimer/js/script.js`

### React Examples

- [React Lessons](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-2_CRA_Via_Vite_States_%26_Props/todo-app/src/App.jsx): `React/Lec-2_CRA_Via_Vite_States_&_Props/todo-app/src/App.jsx`
- [Hooks Demo](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-3_useEffect_%26_Machine_Coding/todo_useEffect_useRef/src/App.jsx): `React/Lec-3_useEffect_&_Machine_Coding/todo_useEffect_useRef/src/App.jsx`
- [Context Demo](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-6_context_API_and_its_usecase/context_api/src/App.jsx): `React/Lec-6_context_API_and_its_usecase/context_api/src/App.jsx`
- [Counter Provider](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-6_context_API_and_its_usecase/context_api/src/context/CounterProvider.jsx): `React/Lec-6_context_API_and_its_usecase/context_api/src/context/CounterProvider.jsx`
- [Redux Demo](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/Lec-7_Redux_%26_its_usecases/redux_concepts_with_example/src/App.jsx): `React/Lec-7_Redux_&_its_usecases/redux_concepts_with_example/src/App.jsx`

### E-commerce App

- [App Routes](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/routes/AppRoutes.jsx): `React/E-commerce-Project/ecomm-app/src/routes/AppRoutes.jsx`
- [Fetch Hook](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/hooks/useFetchData.js): `React/E-commerce-Project/ecomm-app/src/hooks/useFetchData.js`
- [Header](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/components/header/Header.jsx): `React/E-commerce-Project/ecomm-app/src/components/header/Header.jsx`
- [Product Listing](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/pages/productListing/ProductListing.jsx): `React/E-commerce-Project/ecomm-app/src/pages/productListing/ProductListing.jsx`
- [Cart Page](https://github.com/ejazulhaque13/full_stack_oct_2023/blob/master/React/E-commerce-Project/ecomm-app/src/pages/cartItems/CartItems.jsx): `React/E-commerce-Project/ecomm-app/src/pages/cartItems/CartItems.jsx`

### Other components

- **Learner**
- **Fake Store API**

## Connections

- Learner → Language Lessons: studies
- Learner → Promises Lessons: studies
- Learner → DOM Lessons: studies
- Learner → Kanban Board: uses
- Learner → Typeahead Demo: uses
- Learner → Food Subscription: uses
- Learner → Countdown Timer: uses
- Learner → React Lessons: studies
- Learner → Hooks Demo: uses
- Learner → Context Demo: uses
- Learner → Redux Demo: uses
- Learner → App Routes: uses
- Context Demo → Counter Provider: renders
- App Routes → Fetch Hook: calls
- App Routes → Header: renders
- App Routes → Product Listing: routes to
- App Routes → Cart Page: routes to
- Fetch Hook → Fake Store API: requests