# joao4569/lovin_summer architecture

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

- Interactive diagram: https://gitdiagram.com/joao4569/lovin_summer
- Repository: https://github.com/joao4569/lovin_summer

## Overview

1. **Project shape**
   - This is a **static, client-side, multipage web app** deployed on **Netlify**.
   - There is **no server-side application code** in the repo; the browser does the rendering, geolocation, API calls, and map interaction.

2. **Page-level boundaries**
   - The app is split into three primary entry points:
     - `index.html` for the landing/content page
     - `map.html` for the interactive map experience
     - `contact.html` for the contact form
   - Each page has its own CSS where needed (`styles.css`, `map.css`, `contact.css`) but shares a common front-end codebase.

3. **Landing/content subsystem**
   - `index.html` + `index.js` + `script.js` appear to drive the main informational homepage.
   - This page likely handles the hero/intro content, article cards, and general navigation into the map and contact sections.
   - `assets/js/button.js` suggests some shared UI interaction for buttons or call-to-action controls on the front page.

4. **Interactive map subsystem**
   - `map.html` + `mapscript.js` is the core experience of the app.
   - This page is responsible for:
     - getting the user’s current location via the **browser Geolocation API**
     - showing a map with nearby or relevant points of interest
     - displaying attractions, events, and activities
   - The map layer uses **Leaflet**, with map tile providers referenced in the README and likely routing support via a Leaflet routing plugin.

5. **Data acquisition and external services**
   - The map experience depends on external APIs:
     - **REST Countries API** for country/location-related lookup or fallback behavior
     - **Fáilte Ireland Open Data API** for tourism-related activities and attractions
   - The browser calls these services directly from the front end, so the API boundary is at the client layer rather than through a backend.

6. **Location and fallback logic**
   - The README indicates the app tries to use the user’s location, but if the user is not in Ireland they can select a destination or default to Dublin.
   - That makes location a key branch in the data flow:
     - user grants geolocation
     - map centers on current position
     - if needed, the app switches to a chosen Irish destination
   - This is a major architectural decision because it shapes both the map UI and which external data gets shown.

7. **Shared rendering/utilities**
   - `helpers.js` and `html-renders.js` suggest a shared layer for:
     - DOM template generation
     - formatting API responses
     - reusing common UI fragments across pages
   - This likely keeps the page scripts thinner and centralizes view rendering logic.

8. **Content/data assets**
   - `assets/data/activities.json`, `attractions.json`, `testing.json`, and `testing2.json` indicate bundled JSON datasets.
   - These are probably used as sample data, fixtures, or fallback content for the map/content pages.
   - The presence of test datasets suggests the app can be exercised without always relying on live API responses.

9. **Media and map assets**
   - `assets/images/markers` and `assets/images/icons` support map markers and UI icons.
   - `assets/images/readme_images` is documentation-only, while the rest of the image assets are part of the runtime UI.
   - These assets are important because the map experience is visually encoded through custom marker and iconography.

10. **Contact subsystem**
   - `contact.html` + `contact.css` form a separate page for user communication.
   - It is a front-end form page rather than a backend mail service in this repository, so any submission handling is likely minimal or external.

11. **Design/system style**
   - The app is explicitly **mobile-first** and uses **Bootstrap** for responsive layout behavior.
   - `styles.css` likely provides global styling, while page-specific styles handle the map and contact layout differences.
   - This means the architecture is UI-centric, with responsiveness treated as a cross-cutting concern rather than an afterthought.

12. **Operational/deployment boundary**
   - The entire site is hosted as a static build on **Netlify**.
   - GitHub is used for workflow and project management, but not as an execution runtime.
   - There is no evidence of custom infrastructure, databases, or an application server in this repo.

13. **High-level data flow**
   - User opens a page → page-specific JS initializes UI → geolocation or user input determines location → external APIs and/or local JSON data provide attractions/events/activities → shared render helpers format the results → Leaflet/map UI displays them.
   - The key architectural boundary is between **browser UI logic** and **third-party data/services**.

14. **What to show in an architecture diagram**
   - Draw three front-end page modules under one static site.
   - Show a shared client-side utility/rendering layer feeding both landing and map views.
   - Show the map page connecting outward to Geolocation, REST Countries, Fáilte Ireland, and map tile/routing providers.
   - Show bundled assets/data as local inputs to the front end.

Main entry points: [`mapscript.js`](https://github.com/joao4569/lovin_summer/blob/main/mapscript.js) (Map logic), [`index.js`](https://github.com/joao4569/lovin_summer/blob/main/index.js) (Homepage logic), [`index.html`](https://github.com/joao4569/lovin_summer/blob/main/index.html) (Home page), [`map.html`](https://github.com/joao4569/lovin_summer/blob/main/map.html) (Map page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_site["Static site"]
  node_node_index_html["Home page<br/>entry page<br/>[index.html]"]
  node_node_map_html["Map page<br/>entry page<br/>[map.html]"]
  node_node_contact_html["Contact page<br/>entry page<br/>[contact.html]"]
  node_node_styles_css["Global styles<br/>stylesheet<br/>[styles.css]"]
  node_node_map_css["Map styles<br/>stylesheet<br/>[map.css]"]
  node_node_contact_css["Contact styles<br/>stylesheet<br/>[contact.css]"]
end

subgraph group_group_shared["Shared client code"]
  node_node_index_js["Homepage logic<br/>page script<br/>[index.js]"]
  node_node_script_js["Shared UI<br/>page script<br/>[script.js]"]
  node_node_button_js["Button UI<br/>ui helper<br/>[button.js]"]
  node_node_helpers_js["Helpers<br/>[helpers.js]"]
  node_node_renders_js["Renders<br/>view helpers<br/>[html-renders.js]"]
end

subgraph group_group_map["Map experience"]
  node_node_mapscript_js["Map logic<br/>page script<br/>[mapscript.js]"]
end

subgraph group_group_assets["Local assets"]
  node_node_activities_json["Activities<br/>dataset<br/>[activities.json]"]
  node_node_attractions_json["Attractions<br/>dataset<br/>[attractions.json]"]
  node_node_testing_json["Test data<br/>fixture<br/>[testing.json]"]
  node_node_testing2_json["Test data 2<br/>fixture<br/>[testing2.json]"]
  node_node_markers_icons[("Map icons<br/>image assets")]
end

subgraph group_group_external["External services"]
  node_node_rest_countries{{"REST Countries<br/>external api"}}
  node_node_failte_ireland{{"Fáilte Ireland API<br/>external api"}}
  node_node_geolocation{{"Geolocation<br/>browser api"}}
  node_node_leaflet{{"Leaflet<br/>map library"}}
  node_node_tiles_routing{{"Tiles & routing<br/>map services"}}
end

node_node_index_html -->|"loads"| node_node_index_js
node_node_index_html -->|"loads"| node_node_script_js
node_node_index_html -->|"uses"| node_node_button_js
node_node_index_html -->|"styles"| node_node_styles_css
node_node_index_js -->|"formats"| node_node_helpers_js
node_node_index_js -->|"renders"| node_node_renders_js
node_node_script_js -->|"delegates"| node_node_button_js
node_node_index_js -->|"reads"| node_node_activities_json
node_node_index_js -->|"reads"| node_node_attractions_json
node_node_map_html -->|"loads"| node_node_mapscript_js
node_node_map_html -->|"styles"| node_node_map_css
node_node_map_html -->|"styles"| node_node_styles_css
node_node_mapscript_js -->|"calls"| node_node_geolocation
node_node_mapscript_js -->|"renders"| node_node_leaflet
node_node_mapscript_js -->|"uses"| node_node_tiles_routing
node_node_mapscript_js -->|"calls"| node_node_rest_countries
node_node_mapscript_js -->|"calls"| node_node_failte_ireland
node_node_mapscript_js -->|"formats"| node_node_helpers_js
node_node_mapscript_js -->|"renders"| node_node_renders_js
node_node_mapscript_js -->|"reads"| node_node_activities_json
node_node_mapscript_js -->|"reads"| node_node_attractions_json
node_node_mapscript_js -->|"reads"| node_node_testing_json
node_node_mapscript_js -->|"reads"| node_node_testing2_json
node_node_mapscript_js -->|"uses"| node_node_markers_icons
node_node_contact_html -->|"styles"| node_node_contact_css
node_node_contact_html -->|"styles"| node_node_styles_css

click node_node_index_html "https://github.com/joao4569/lovin_summer/blob/main/index.html"
click node_node_map_html "https://github.com/joao4569/lovin_summer/blob/main/map.html"
click node_node_contact_html "https://github.com/joao4569/lovin_summer/blob/main/contact.html"
click node_node_index_js "https://github.com/joao4569/lovin_summer/blob/main/index.js"
click node_node_script_js "https://github.com/joao4569/lovin_summer/blob/main/script.js"
click node_node_button_js "https://github.com/joao4569/lovin_summer/blob/main/assets/js/button.js"
click node_node_helpers_js "https://github.com/joao4569/lovin_summer/blob/main/helpers.js"
click node_node_renders_js "https://github.com/joao4569/lovin_summer/blob/main/html-renders.js"
click node_node_mapscript_js "https://github.com/joao4569/lovin_summer/blob/main/mapscript.js"
click node_node_styles_css "https://github.com/joao4569/lovin_summer/blob/main/styles.css"
click node_node_map_css "https://github.com/joao4569/lovin_summer/blob/main/map.css"
click node_node_contact_css "https://github.com/joao4569/lovin_summer/blob/main/contact.css"
click node_node_activities_json "https://github.com/joao4569/lovin_summer/blob/main/assets/data/activities.json"
click node_node_attractions_json "https://github.com/joao4569/lovin_summer/blob/main/assets/data/attractions.json"
click node_node_testing_json "https://github.com/joao4569/lovin_summer/blob/main/assets/data/testing.json"
click node_node_testing2_json "https://github.com/joao4569/lovin_summer/blob/main/assets/data/testing2.json"
click node_node_markers_icons "https://github.com/joao4569/lovin_summer/tree/main/assets/images/markers"

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_node_index_html,node_node_map_html,node_node_contact_html,node_node_styles_css,node_node_map_css,node_node_contact_css toneBlue
class node_node_index_js,node_node_script_js,node_node_button_js,node_node_helpers_js,node_node_renders_js toneAmber
class node_node_mapscript_js toneMint
class node_node_activities_json,node_node_attractions_json,node_node_testing_json,node_node_testing2_json,node_node_markers_icons toneRose
class node_node_rest_countries,node_node_failte_ireland,node_node_geolocation,node_node_leaflet,node_node_tiles_routing toneIndigo
```

## Components

### Static site

Client-side multipage web app

- [Home page](https://github.com/joao4569/lovin_summer/blob/main/index.html): entry page · Landing and content entry point · `index.html`
- [Map page](https://github.com/joao4569/lovin_summer/blob/main/map.html): entry page · Interactive map entry point · `map.html`
- [Contact page](https://github.com/joao4569/lovin_summer/blob/main/contact.html): entry page · Contact form entry point · `contact.html`
- [Global styles](https://github.com/joao4569/lovin_summer/blob/main/styles.css): stylesheet · Shared site-wide styling · `styles.css`
- [Map styles](https://github.com/joao4569/lovin_summer/blob/main/map.css): stylesheet · Map page layout and controls · `map.css`
- [Contact styles](https://github.com/joao4569/lovin_summer/blob/main/contact.css): stylesheet · Contact page layout and form styling · `contact.css`

### Shared client code

Common browser logic and rendering

- [Homepage logic](https://github.com/joao4569/lovin_summer/blob/main/index.js): page script · Main landing page behavior · `index.js`
- [Shared UI](https://github.com/joao4569/lovin_summer/blob/main/script.js): page script · Common homepage interactions · `script.js`
- [Button UI](https://github.com/joao4569/lovin_summer/blob/main/assets/js/button.js): ui helper · Shared button and call-to-action behavior · `assets/js/button.js`
- [Helpers](https://github.com/joao4569/lovin_summer/blob/main/helpers.js): utility · Common formatting and DOM helpers · `helpers.js`
- [Renders](https://github.com/joao4569/lovin_summer/blob/main/html-renders.js): view helpers · HTML template and view rendering helpers · `html-renders.js`

### Map experience

Interactive location and POI flow

- [Map logic](https://github.com/joao4569/lovin_summer/blob/main/mapscript.js): page script · Geolocation, map setup, and POI loading · `mapscript.js`

### Local assets

Bundled data and media

- [Activities](https://github.com/joao4569/lovin_summer/blob/main/assets/data/activities.json): dataset · Bundled activity data · `assets/data/activities.json`
- [Attractions](https://github.com/joao4569/lovin_summer/blob/main/assets/data/attractions.json): dataset · Bundled attraction data · `assets/data/attractions.json`
- [Test data](https://github.com/joao4569/lovin_summer/blob/main/assets/data/testing.json): fixture · Sample data fixture · `assets/data/testing.json`
- [Test data 2](https://github.com/joao4569/lovin_summer/blob/main/assets/data/testing2.json): fixture · Secondary sample data fixture · `assets/data/testing2.json`
- [Map icons](https://github.com/joao4569/lovin_summer/tree/main/assets/images/markers): image assets · Custom markers and UI icons · `assets/images/markers`

### External services

Browser-called APIs and map providers

- **REST Countries**: external api · Country and location lookup
- **Fáilte Ireland API**: external api · Tourism attractions and activities data
- **Geolocation**: browser api · Browser location access
- **Leaflet**: map library · Client-side map rendering
- **Tiles & routing**: map services · Map tiles and routing providers

## Connections

- Home page → Homepage logic: loads · Homepage bootstrap
- Home page → Shared UI: loads · Shared landing interactions
- Home page → Button UI: uses · CTA and button behavior
- Home page → Global styles: styles · Global page styling
- Homepage logic → Helpers: formats · Shared utility support
- Homepage logic → Renders: renders · Content and card templates
- Shared UI → Button UI: delegates · Button interactions
- Homepage logic → Activities: reads · Local content/data fallback
- Homepage logic → Attractions: reads · Local content/data fallback
- Map page → Map logic: loads · Map experience bootstrap
- Map page → Map styles: styles · Map layout styling
- Map page → Global styles: styles · Global styling
- Map logic → Geolocation: calls · Current location access
- Map logic → Leaflet: renders · Interactive map UI
- Map logic → Tiles & routing: uses · Tile and route services
- Map logic → REST Countries: calls · Country and destination lookup
- Map logic → Fáilte Ireland API: calls · Tourism data source
- Map logic → Helpers: formats · Shared data shaping
- Map logic → Renders: renders · Map results and cards
- Map logic → Activities: reads · Bundled fallback data
- Map logic → Attractions: reads · Bundled fallback data
- Map logic → Test data: reads · Fixture data for testing
- Map logic → Test data 2: reads · Fixture data for testing
- Map logic → Map icons: uses · Custom map markers and icons
- Contact page → Contact styles: styles · Contact page styling
- Contact page → Global styles: styles · Global styling