# youronlymikey/nangkaan architecture

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

## Overview

This is a React tourism website for Nangkaan Lakeside Viewpoint, with a public destination page and a separate visitor-feedback flow. Visitors navigate the site to explore tours and destination information, can open a booking inquiry, and can submit experience ratings and visit details. The tree also indicates gallery, location, sustainability, and QR-code features. App routing and the sampled feedback and booking code support those flows; HomePage composition and several feature integrations were not sampled, so their wiring is left unspecified. Booking and feedback submissions are simulated, not persisted to a backend.

Main entry points: [`src/App.jsx`](https://github.com/youronlymikey/nangkaan/blob/master/src/App.jsx) (App Router), [`src/pages/FeedbackPage.jsx`](https://github.com/youronlymikey/nangkaan/blob/master/src/pages/FeedbackPage.jsx) (Feedback Form), [`src/components/BookingModal/BookingModal.jsx`](https://github.com/youronlymikey/nangkaan/blob/master/src/components/BookingModal/BookingModal.jsx) (Booking Inquiry), [`src/main.jsx`](https://github.com/youronlymikey/nangkaan/blob/master/src/main.jsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_app_router["App Router<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Site Footer<br/>[Footer.jsx]"]
end

subgraph group_visit["Visit Planning"]
  node_tour_data["Tours and Rates<br/>[tourPackages.js]"]
  node_tour_card["Tour Package Cards<br/>[TourCard.jsx]"]
  node_booking["Booking Inquiry<br/>[BookingModal.jsx]"]
end

subgraph group_destination["Destination Information"]
  node_home["Destination Page<br/>[HomePage.jsx]"]
  node_hero["Hero Section<br/>[Hero.jsx]"]
  node_gallery["Photo Gallery<br/>[Gallery.jsx]"]
  node_lightbox["Photo Lightbox<br/>[Lightbox.jsx]"]
  node_location["Location Details"]
  node_contact["Contact and Social<br/>[ContactSection.jsx]"]
  node_sustainability["Sustainability"]
  node_amenities_data["Amenity Content<br/>[amenities.js]"]
  node_sustainability_data["Sustainability Content<br/>[sustainability.js]"]
end

subgraph group_feedback["Visitor Feedback"]
  node_feedback_page["Feedback Form<br/>[FeedbackPage.jsx]"]
  node_rating["Rating Inputs<br/>[RatingInput.jsx]"]
  node_qr["Feedback QR Code<br/>[QRCodeSection.jsx]"]
end

node_visitor(("Visitor"))
node_social_platforms(("Social Platforms"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app_router
node_app_router -->|"renders"| node_navbar
node_app_router -->|"renders"| node_footer
node_app_router -->|"routes /"| node_home
node_app_router -->|"routes /feedback"| node_feedback_page
node_visitor -->|"requests booking"| node_booking
node_booking -->|"offers packages"| node_tour_data
node_booking -->|"shows inquiry status"| node_visitor
node_visitor -->|"shares visit feedback"| node_feedback_page
node_feedback_page -->|"collects ratings"| node_rating
node_feedback_page -->|"renders QR section"| node_qr
node_feedback_page -->|"shows confirmation"| node_visitor
node_contact -->|"links to"| node_social_platforms

click node_entry "https://github.com/youronlymikey/nangkaan/blob/master/src/main.jsx"
click node_app_router "https://github.com/youronlymikey/nangkaan/blob/master/src/App.jsx"
click node_navbar "https://github.com/youronlymikey/nangkaan/blob/master/src/components/Navbar/Navbar.jsx"
click node_footer "https://github.com/youronlymikey/nangkaan/blob/master/src/components/Footer/Footer.jsx"
click node_home "https://github.com/youronlymikey/nangkaan/blob/master/src/pages/HomePage.jsx"
click node_hero "https://github.com/youronlymikey/nangkaan/blob/master/src/components/Hero/Hero.jsx"
click node_gallery "https://github.com/youronlymikey/nangkaan/blob/master/src/components/Gallery/Gallery.jsx"
click node_lightbox "https://github.com/youronlymikey/nangkaan/blob/master/src/components/Lightbox/Lightbox.jsx"
click node_location "https://github.com/youronlymikey/nangkaan/blob/master/src/components/LocationSection/LocationSection.jsx"
click node_contact "https://github.com/youronlymikey/nangkaan/blob/master/src/components/ContactSection/ContactSection.jsx"
click node_sustainability "https://github.com/youronlymikey/nangkaan/blob/master/src/components/SustainabilityCard/SustainabilityCard.jsx"
click node_amenities_data "https://github.com/youronlymikey/nangkaan/blob/master/src/data/amenities.js"
click node_sustainability_data "https://github.com/youronlymikey/nangkaan/blob/master/src/data/sustainability.js"
click node_tour_data "https://github.com/youronlymikey/nangkaan/blob/master/src/data/tourPackages.js"
click node_tour_card "https://github.com/youronlymikey/nangkaan/blob/master/src/components/TourCard/TourCard.jsx"
click node_booking "https://github.com/youronlymikey/nangkaan/blob/master/src/components/BookingModal/BookingModal.jsx"
click node_feedback_page "https://github.com/youronlymikey/nangkaan/blob/master/src/pages/FeedbackPage.jsx"
click node_rating "https://github.com/youronlymikey/nangkaan/blob/master/src/components/RatingInput/RatingInput.jsx"
click node_qr "https://github.com/youronlymikey/nangkaan/blob/master/src/components/QRCodeSection/QRCodeSection.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_entry,node_app_router,node_navbar,node_footer toneBlue
class node_tour_data,node_tour_card,node_booking toneAmber
class node_home,node_hero,node_gallery,node_lightbox,node_location,node_contact,node_sustainability,node_amenities_data,node_sustainability_data toneMint
class node_feedback_page,node_rating,node_qr toneRose
class node_visitor,node_social_platforms toneIndigo
```

## Components

### Application

- [React Entry](https://github.com/youronlymikey/nangkaan/blob/master/src/main.jsx): `src/main.jsx`
- [App Router](https://github.com/youronlymikey/nangkaan/blob/master/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/youronlymikey/nangkaan/blob/master/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Site Footer](https://github.com/youronlymikey/nangkaan/blob/master/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`

### Visit Planning

- [Tours and Rates](https://github.com/youronlymikey/nangkaan/blob/master/src/data/tourPackages.js): `src/data/tourPackages.js`
- [Tour Package Cards](https://github.com/youronlymikey/nangkaan/blob/master/src/components/TourCard/TourCard.jsx): `src/components/TourCard/TourCard.jsx`
- [Booking Inquiry](https://github.com/youronlymikey/nangkaan/blob/master/src/components/BookingModal/BookingModal.jsx): `src/components/BookingModal/BookingModal.jsx`

### Destination Information

- [Destination Page](https://github.com/youronlymikey/nangkaan/blob/master/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [Hero Section](https://github.com/youronlymikey/nangkaan/blob/master/src/components/Hero/Hero.jsx): `src/components/Hero/Hero.jsx`
- [Photo Gallery](https://github.com/youronlymikey/nangkaan/blob/master/src/components/Gallery/Gallery.jsx): `src/components/Gallery/Gallery.jsx`
- [Photo Lightbox](https://github.com/youronlymikey/nangkaan/blob/master/src/components/Lightbox/Lightbox.jsx): `src/components/Lightbox/Lightbox.jsx`
- [Location Details](https://github.com/youronlymikey/nangkaan/blob/master/src/components/LocationSection/LocationSection.jsx): `src/components/LocationSection/LocationSection.jsx`
- [Contact and Social](https://github.com/youronlymikey/nangkaan/blob/master/src/components/ContactSection/ContactSection.jsx): `src/components/ContactSection/ContactSection.jsx`
- [Sustainability](https://github.com/youronlymikey/nangkaan/blob/master/src/components/SustainabilityCard/SustainabilityCard.jsx): `src/components/SustainabilityCard/SustainabilityCard.jsx`
- [Amenity Content](https://github.com/youronlymikey/nangkaan/blob/master/src/data/amenities.js): `src/data/amenities.js`
- [Sustainability Content](https://github.com/youronlymikey/nangkaan/blob/master/src/data/sustainability.js): `src/data/sustainability.js`

### Visitor Feedback

- [Feedback Form](https://github.com/youronlymikey/nangkaan/blob/master/src/pages/FeedbackPage.jsx): `src/pages/FeedbackPage.jsx`
- [Rating Inputs](https://github.com/youronlymikey/nangkaan/blob/master/src/components/RatingInput/RatingInput.jsx): `src/components/RatingInput/RatingInput.jsx`
- [Feedback QR Code](https://github.com/youronlymikey/nangkaan/blob/master/src/components/QRCodeSection/QRCodeSection.jsx): `src/components/QRCodeSection/QRCodeSection.jsx`

### Other components

- **Visitor**
- **Social Platforms**

## Connections

- Visitor → React Entry: opens site
- React Entry → App Router: renders
- App Router → Navigation: renders
- App Router → Site Footer: renders
- App Router → Destination Page: routes /
- App Router → Feedback Form: routes /feedback
- Visitor → Booking Inquiry: requests booking
- Booking Inquiry → Tours and Rates: offers packages
- Booking Inquiry → Visitor: shows inquiry status
- Visitor → Feedback Form: shares visit feedback
- Feedback Form → Rating Inputs: collects ratings
- Feedback Form → Feedback QR Code: renders QR section
- Feedback Form → Visitor: shows confirmation
- Contact and Social → Social Platforms: links to