# andriygazda/project-learnplatform architecture

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

- Interactive diagram: https://gitdiagram.com/andriygazda/project-learnplatform
- Repository: https://github.com/andriygazda/project-learnplatform

## Overview

GAZDALEAR is a programming-course website. Visitors browse the home page’s featured courses, search/filter/sort the catalog, open a course detail page, and can proceed to the contact page. The README also documents a contact form and map; the form’s FormSubmit integration is described but its implementation is not sampled, so that link is marked optional. The sampled JavaScript confirms course-data loading, rendering, and map behavior; page-to-script wiring is not shown.

Main entry points: [`public/html/contact.html`](https://github.com/andriygazda/project-learnplatform/blob/main/public/html/contact.html) (Contact page), [`src/js/sectionTopCourses.js`](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/sectionTopCourses.js) (Featured carousel), [`src/js/courses-sort-filter-pagin.js`](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/courses-sort-filter-pagin.js) (Catalog controls), [`src/js/contact-map.js`](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/contact-map.js) (Location map)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Site Pages"]
  node_home["Home page<br/>[index.html]"]
  node_listing["Courses page<br/>[courses.html]"]
  node_detail["Course detail<br/>[course.html]"]
  node_contactpage["Contact page<br/>[contact.html]"]
end

subgraph group_courses["Course Discovery"]
  node_data["Course data<br/>[data-courses.json]"]
  node_featured["Featured carousel"]
  node_catalog["Catalog controls"]
  node_courseview["Course detail renderer<br/>[course-idNumber.js]"]
  node_card["Course card builder<br/>[createCard.js]"]
end

subgraph group_shared["Shared Interface"]
  node_menujs["Menu loader<br/>[menu.js]"]
  node_menuhtml["Menu markup<br/>[menu.html]"]
  node_footerjs["Footer loader<br/>[footer.js]"]
  node_footerhtml["Footer markup<br/>[footer.html]"]
end

subgraph group_contact["Contact"]
  node_map["Location map<br/>[contact-map.js]"]
  node_tiles["OpenStreetMap tiles"]
  node_formsubmit["FormSubmit service"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_listing
node_visitor -->|"contacts"| node_contactpage
node_home -->|"shows featured"| node_featured
node_featured -->|"fetches"| node_data
node_featured -->|"builds cards"| node_card
node_visitor -->|"searches and filters"| node_catalog
node_catalog -->|"fetches"| node_data
node_catalog -->|"builds cards"| node_card
node_card -->|"links to"| node_detail
node_detail -->|"shows course"| node_courseview
node_courseview -->|"fetches"| node_data
node_visitor -->|"requests consultation"| node_contactpage
node_contactpage -.->|"submits form"| node_formsubmit
node_contactpage -->|"shows location"| node_map
node_map -->|"loads map tiles"| node_tiles
node_map -->|"opens map link"| node_visitor
node_menujs -->|"fetches markup"| node_menuhtml
node_footerjs -->|"fetches markup"| node_footerhtml

click node_home "https://github.com/andriygazda/project-learnplatform/blob/main/index.html"
click node_listing "https://github.com/andriygazda/project-learnplatform/blob/main/public/html/courses.html"
click node_detail "https://github.com/andriygazda/project-learnplatform/blob/main/public/html/course.html"
click node_contactpage "https://github.com/andriygazda/project-learnplatform/blob/main/public/html/contact.html"
click node_data "https://github.com/andriygazda/project-learnplatform/blob/main/public/courses/data-courses.json"
click node_featured "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/sectionTopCourses.js"
click node_catalog "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/courses-sort-filter-pagin.js"
click node_courseview "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/course-idNumber.js"
click node_card "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/createCard.js"
click node_menujs "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/menu.js"
click node_menuhtml "https://github.com/andriygazda/project-learnplatform/blob/main/public/html/menu.html"
click node_footerjs "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/footer.js"
click node_footerhtml "https://github.com/andriygazda/project-learnplatform/blob/main/public/html/footer.html"
click node_map "https://github.com/andriygazda/project-learnplatform/blob/main/src/js/contact-map.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_home,node_listing,node_detail,node_contactpage toneBlue
class node_data,node_featured,node_catalog,node_courseview,node_card toneAmber
class node_menujs,node_menuhtml,node_footerjs,node_footerhtml toneMint
class node_map,node_tiles,node_formsubmit toneRose
class node_visitor toneIndigo
```

## Components

### Site Pages

- [Home page](https://github.com/andriygazda/project-learnplatform/blob/main/index.html): `index.html`
- [Courses page](https://github.com/andriygazda/project-learnplatform/blob/main/public/html/courses.html): `public/html/courses.html`
- [Course detail](https://github.com/andriygazda/project-learnplatform/blob/main/public/html/course.html): `public/html/course.html`
- [Contact page](https://github.com/andriygazda/project-learnplatform/blob/main/public/html/contact.html): `public/html/contact.html`

### Course Discovery

- [Course data](https://github.com/andriygazda/project-learnplatform/blob/main/public/courses/data-courses.json): `public/courses/data-courses.json`
- [Featured carousel](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/sectionTopCourses.js): `src/js/sectionTopCourses.js`
- [Catalog controls](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/courses-sort-filter-pagin.js): `src/js/courses-sort-filter-pagin.js`
- [Course detail renderer](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/course-idNumber.js): `src/js/course-idNumber.js`
- [Course card builder](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/createCard.js): `src/js/createCard.js`

### Shared Interface

- [Menu loader](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/menu.js): `src/js/menu.js`
- [Menu markup](https://github.com/andriygazda/project-learnplatform/blob/main/public/html/menu.html): `public/html/menu.html`
- [Footer loader](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/footer.js): `src/js/footer.js`
- [Footer markup](https://github.com/andriygazda/project-learnplatform/blob/main/public/html/footer.html): `public/html/footer.html`

### Contact

- [Location map](https://github.com/andriygazda/project-learnplatform/blob/main/src/js/contact-map.js): `src/js/contact-map.js`
- **OpenStreetMap tiles**
- **FormSubmit service**

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Visitor → Courses page: browses
- Visitor → Contact page: contacts
- Home page → Featured carousel: shows featured
- Featured carousel → Course data: fetches
- Featured carousel → Course card builder: builds cards
- Visitor → Catalog controls: searches and filters
- Catalog controls → Course data: fetches
- Catalog controls → Course card builder: builds cards
- Course card builder → Course detail: links to
- Course detail → Course detail renderer: shows course
- Course detail renderer → Course data: fetches
- Visitor → Contact page: requests consultation
- Contact page → FormSubmit service: submits form
- Contact page → Location map: shows location
- Location map → OpenStreetMap tiles: loads map tiles
- Location map → Visitor: opens map link
- Menu loader → Menu markup: fetches markup
- Footer loader → Footer markup: fetches markup