# prestonwanttorevenge/gdglexi architecture

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

- Interactive diagram: https://gitdiagram.com/prestonwanttorevenge/gdglexi
- Repository: https://github.com/prestonwanttorevenge/gdglexi

## Overview

GDGLexi is a static landing page for IELTS and VSTEP courses. Visitors explore course information, filter or search the catalog, save courses for later, and can request consultation through a validated form. The page also presents the program’s methodology, testimonials, FAQ, and GDG background. `main.js` orchestrates partial loading, rendering, and feature initialization; the README documents the partial-based page structure and local-storage behavior. Several presentation modules are represented from documented capabilities because their implementation was not sampled.

Main entry points: [`src/js/main.js`](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/main.js) (Application coordinator), [`src/data/mockData.js`](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/data/mockData.js) (Course data), [`src/js/modules/courses.js`](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/courses.js) (Course search and details), [`src/js/modules/faq.js`](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/faq.js) (FAQ accordion)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Landing page"]
  node_entry["Page entry<br/>[index.html]"]
  node_sections["Page sections"]
  node_about["GDG background<br/>[about.tpl]"]
  node_hero["Hero section<br/>[hero.tpl]"]
  node_methodology["Course methodology<br/>[methodology.tpl]"]
  node_testimonials["Student testimonials<br/>[testimonials.tpl]"]
end

subgraph group_catalog["Course discovery"]
  node_catalog_ui["Course catalog<br/>[courses.tpl]"]
  node_course_data["Course data<br/>[mockData.js]"]
  node_course_browser["Course search and details<br/>[courses.js]"]
  node_wishlist_ui["Wishlist drawer<br/>[overlays.tpl]"]
  node_wishlist["Wishlist behavior<br/>[wishlist.js]"]
end

subgraph group_engagement["Visitor interactions"]
  node_faq_ui["FAQ section<br/>[faq.tpl]"]
  node_faq["FAQ accordion<br/>[faq.js]"]
  node_contact_ui["Contact form<br/>[contact.tpl]"]
  node_contact["Consultation form<br/>[contactForm.js]"]
  node_toast["Toast feedback<br/>[toast.js]"]
  node_navigation["Navigation drawer<br/>[navbar.js]"]
  node_theme["Theme control<br/>[theme.js]"]
  node_motion["Scroll and hero motion<br/>[motion.js]"]
end

subgraph group_runtime["Page runtime"]
  node_storage[("Browser preferences<br/>[storage.js]")]
  node_dom_helpers["DOM helpers<br/>[dom.js]"]
  node_partial_loader["Partial loader<br/>[partialLoader.js]"]
  node_app["Application coordinator<br/>[main.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_entry
node_entry -.->|"starts"| node_app
node_app -->|"loads partials"| node_partial_loader
node_partial_loader -->|"fetches sections"| node_sections
node_app -->|"renders content"| node_course_data
node_app -->|"fills section"| node_methodology
node_app -->|"fills section"| node_testimonials
node_visitor -->|"browses courses"| node_course_browser
node_course_browser -->|"filters data"| node_course_data
node_app -->|"initializes"| node_course_browser
node_course_browser -->|"uses helpers"| node_dom_helpers
node_visitor -->|"saves courses"| node_wishlist
node_app -->|"initializes"| node_wishlist
node_wishlist -->|"looks up courses"| node_course_data
node_app -->|"loads and saves wishlist"| node_storage
node_visitor -->|"opens answers"| node_faq
node_app -->|"initializes"| node_faq
node_faq -->|"reads FAQ items"| node_course_data
node_faq -->|"creates icons"| node_dom_helpers
node_visitor -->|"requests consultation"| node_contact
node_app -->|"initializes form"| node_contact
node_contact -->|"populates choices"| node_course_data
node_contact -->|"shows confirmation"| node_toast
node_app -->|"initializes"| node_toast
node_visitor -->|"uses navigation"| node_navigation
node_app -->|"initializes"| node_navigation
node_visitor -->|"changes theme"| node_theme
node_app -->|"initializes"| node_theme
node_theme -->|"reads and saves theme"| node_storage
node_app -->|"starts motion"| node_motion
node_visitor -->|"learns about program"| node_about
node_visitor -->|"views introduction"| node_hero

click node_entry "https://github.com/prestonwanttorevenge/gdglexi/blob/main/index.html"
click node_sections "https://github.com/prestonwanttorevenge/gdglexi/tree/main/src/partials"
click node_about "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/about.tpl"
click node_hero "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/hero.tpl"
click node_methodology "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/methodology.tpl"
click node_testimonials "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/testimonials.tpl"
click node_catalog_ui "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/courses.tpl"
click node_course_data "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/data/mockData.js"
click node_course_browser "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/courses.js"
click node_wishlist_ui "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/overlays.tpl"
click node_wishlist "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/wishlist.js"
click node_faq_ui "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/faq.tpl"
click node_faq "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/faq.js"
click node_contact_ui "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/contact.tpl"
click node_contact "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/contactForm.js"
click node_toast "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/toast.js"
click node_navigation "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/navbar.js"
click node_theme "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/theme.js"
click node_motion "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/motion.js"
click node_storage "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/core/storage.js"
click node_dom_helpers "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/core/dom.js"
click node_partial_loader "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/core/partialLoader.js"
click node_app "https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/main.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_entry,node_sections,node_about,node_hero,node_methodology,node_testimonials toneBlue
class node_catalog_ui,node_course_data,node_course_browser,node_wishlist_ui,node_wishlist toneAmber
class node_faq_ui,node_faq,node_contact_ui,node_contact,node_toast,node_navigation,node_theme,node_motion toneMint
class node_storage,node_dom_helpers,node_partial_loader,node_app toneRose
class node_visitor toneIndigo
```

## Components

### Landing page

- [Page entry](https://github.com/prestonwanttorevenge/gdglexi/blob/main/index.html): `index.html`
- [Page sections](https://github.com/prestonwanttorevenge/gdglexi/tree/main/src/partials): `src/partials`
- [GDG background](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/about.tpl): `src/partials/about.tpl`
- [Hero section](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/hero.tpl): `src/partials/hero.tpl`
- [Course methodology](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/methodology.tpl): `src/partials/methodology.tpl`
- [Student testimonials](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/testimonials.tpl): `src/partials/testimonials.tpl`

### Course discovery

- [Course catalog](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/courses.tpl): `src/partials/courses.tpl`
- [Course data](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/data/mockData.js): `src/data/mockData.js`
- [Course search and details](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/courses.js): `src/js/modules/courses.js`
- [Wishlist drawer](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/overlays.tpl): `src/partials/overlays.tpl`
- [Wishlist behavior](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/wishlist.js): `src/js/modules/wishlist.js`

### Visitor interactions

- [FAQ section](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/faq.tpl): `src/partials/faq.tpl`
- [FAQ accordion](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/faq.js): `src/js/modules/faq.js`
- [Contact form](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/partials/contact.tpl): `src/partials/contact.tpl`
- [Consultation form](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/contactForm.js): `src/js/modules/contactForm.js`
- [Toast feedback](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/toast.js): `src/js/modules/toast.js`
- [Navigation drawer](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/navbar.js): `src/js/modules/navbar.js`
- [Theme control](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/theme.js): `src/js/modules/theme.js`
- [Scroll and hero motion](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/modules/motion.js): `src/js/modules/motion.js`

### Page runtime

- [Browser preferences](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/core/storage.js): `src/js/core/storage.js`
- [DOM helpers](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/core/dom.js): `src/js/core/dom.js`
- [Partial loader](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/core/partialLoader.js): `src/js/core/partialLoader.js`
- [Application coordinator](https://github.com/prestonwanttorevenge/gdglexi/blob/main/src/js/main.js): `src/js/main.js`

### Other components

- **Visitor**

## Connections

- Visitor → Page entry: opens (evidence: `README.md`)
- Page entry → Application coordinator: starts
- Application coordinator → Partial loader: loads partials (evidence: `src/js/main.js`)
- Partial loader → Page sections: fetches sections (evidence: `README.md`)
- Application coordinator → Course data: renders content (evidence: `src/js/main.js`)
- Application coordinator → Course methodology: fills section (evidence: `src/js/main.js`)
- Application coordinator → Student testimonials: fills section (evidence: `src/js/main.js`)
- Visitor → Course search and details: browses courses (evidence: `README.md`)
- Course search and details → Course data: filters data (evidence: `src/js/modules/courses.js`)
- Application coordinator → Course search and details: initializes (evidence: `src/js/main.js`)
- Course search and details → DOM helpers: uses helpers (evidence: `src/js/modules/courses.js`)
- Visitor → Wishlist behavior: saves courses (evidence: `README.md`)
- Application coordinator → Wishlist behavior: initializes (evidence: `src/js/main.js`)
- Wishlist behavior → Course data: looks up courses (evidence: `src/js/modules/wishlist.js`)
- Application coordinator → Browser preferences: loads and saves wishlist (evidence: `src/js/main.js`)
- Visitor → FAQ accordion: opens answers (evidence: `README.md`)
- Application coordinator → FAQ accordion: initializes (evidence: `src/js/main.js`)
- FAQ accordion → Course data: reads FAQ items (evidence: `src/js/modules/faq.js`)
- FAQ accordion → DOM helpers: creates icons (evidence: `src/js/modules/faq.js`)
- Visitor → Consultation form: requests consultation (evidence: `README.md`)
- Application coordinator → Consultation form: initializes form (evidence: `src/js/main.js`)
- Consultation form → Course data: populates choices (evidence: `src/js/modules/contactForm.js`)
- Consultation form → Toast feedback: shows confirmation (evidence: `src/js/main.js`)
- Application coordinator → Toast feedback: initializes (evidence: `src/js/main.js`)
- Visitor → Navigation drawer: uses navigation (evidence: `README.md`)
- Application coordinator → Navigation drawer: initializes (evidence: `src/js/main.js`)
- Visitor → Theme control: changes theme (evidence: `README.md`)
- Application coordinator → Theme control: initializes (evidence: `src/js/main.js`)
- Theme control → Browser preferences: reads and saves theme (evidence: `src/js/modules/theme.js`)
- Application coordinator → Scroll and hero motion: starts motion (evidence: `src/js/main.js`)
- Visitor → GDG background: learns about program (evidence: `README.md`)
- Visitor → Hero section: views introduction (evidence: `README.md`)