# kangyuuuuf/makrine_public architecture

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

- Interactive diagram: https://gitdiagram.com/kangyuuuuf/makrine_public
- Repository: https://github.com/kangyuuuuf/makrine_public

## Overview

Makrine is a product-discovery and sales-inquiry website for life-saving and fire-fighting equipment. Visitors enter through the routed site, browse divisions and filtered catalog listings, inspect product details, then submit a quotation or product-information request; the footer also provides a general contact-message form. The graph includes the documented email integrations and the visible catalog, product-detail, and presentation layers. Some source excerpts are partial, so uncertain data-source wiring and component relationships are omitted.

Main entry points: [`src/app/App.jsx`](https://github.com/kangyuuuuf/makrine_public/blob/main/src/app/App.jsx) (App routing), [`src/pages/Catalog/CatalogPage.jsx`](https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Catalog/CatalogPage.jsx) (Catalog page), [`src/components/inquiry/QuotationInquiryModal.jsx`](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/inquiry/QuotationInquiryModal.jsx) (Quotation inquiry), [`src/components/FooterSection/FooterSection.jsx`](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/FooterSection/FooterSection.jsx) (Site footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site experience"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App routing<br/>[App.jsx]"]
  node_home["Home page<br/>[index.jsx]"]
  node_about["About page<br/>[AboutPage.jsx]"]
  node_contact["Contact page<br/>[ContactPage.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Site footer<br/>[FooterSection.jsx]"]
end

subgraph group_catalog["Catalog discovery"]
  node_catalogpage["Catalog page<br/>[CatalogPage.jsx]"]
  node_catalogfilters["Catalog filters<br/>[CatalogSidebar.jsx]"]
  node_productcard["Product card<br/>[ProductCard.jsx]"]
  node_catalogdata["Catalog display data"]
  node_featured["Featured products"]
end

subgraph group_product["Product details"]
  node_detailpage["Product detail page"]
  node_detailview["Product detail view"]
  node_detailaside["Product summary"]
end

subgraph group_inquiry["Sales inquiries"]
  node_quotation["Quotation inquiry"]
  node_inquirypopup["Inquiry feedback<br/>[InquiryPopup.jsx]"]
  node_sendinquiry["Inquiry email API<br/>[send-inquiry.js]"]
  node_contactapi["Contact email API"]
end

node_visitor(("Site visitor"))
node_resend(("Resend email service"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_catalogpage
node_app -->|"routes to"| node_detailpage
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_catalogpage -->|"renders"| node_catalogfilters
node_catalogpage -->|"renders"| node_productcard
node_catalogpage -->|"loads and maps"| node_catalogdata
node_home -->|"presents"| node_featured
node_featured -->|"loads and maps"| node_catalogdata
node_detailpage -->|"renders"| node_detailview
node_detailview -->|"renders"| node_detailaside
node_catalogpage -->|"opens inquiry"| node_quotation
node_detailaside -->|"starts inquiry"| node_quotation
node_quotation -->|"posts inquiry"| node_sendinquiry
node_quotation -->|"shows feedback"| node_inquirypopup
node_footer -->|"posts message"| node_contactapi
node_footer -->|"shows feedback"| node_inquirypopup
node_sendinquiry -.->|"sends email"| node_resend
node_contactapi -.->|"sends email"| node_resend

click node_entry "https://github.com/kangyuuuuf/makrine_public/blob/main/src/app/main.jsx"
click node_app "https://github.com/kangyuuuuf/makrine_public/blob/main/src/app/App.jsx"
click node_home "https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Home/index.jsx"
click node_about "https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/About/AboutPage.jsx"
click node_contact "https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Contact/ContactPage.jsx"
click node_navbar "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/Navbar/Navbar.jsx"
click node_footer "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/FooterSection/FooterSection.jsx"
click node_catalogpage "https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Catalog/CatalogPage.jsx"
click node_catalogfilters "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/catalog/CatalogSidebar.jsx"
click node_productcard "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/catalog/ProductCard.jsx"
click node_catalogdata "https://github.com/kangyuuuuf/makrine_public/blob/main/src/data/productDisplayUtils.js"
click node_featured "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/FeaturedProductsShowcase/FeaturedProductsShowcase.jsx"
click node_detailpage "https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/ProductDetail/ProductDetailPage.jsx"
click node_detailview "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/product-detail/ProductDetailPage.jsx"
click node_detailaside "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/product-detail/ProductDetailAside.jsx"
click node_quotation "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/inquiry/QuotationInquiryModal.jsx"
click node_inquirypopup "https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/inquiry/InquiryPopup.jsx"
click node_sendinquiry "https://github.com/kangyuuuuf/makrine_public/blob/main/apps/api/api/send-inquiry.js"
click node_contactapi "https://github.com/kangyuuuuf/makrine_public/blob/main/apps/api/api/send-contact-message.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_app,node_home,node_about,node_contact,node_navbar,node_footer toneBlue
class node_catalogpage,node_catalogfilters,node_productcard,node_catalogdata,node_featured toneAmber
class node_detailpage,node_detailview,node_detailaside toneMint
class node_quotation,node_inquirypopup,node_sendinquiry,node_contactapi toneRose
class node_visitor,node_resend toneIndigo
```

## Components

### Site experience

- [React entry](https://github.com/kangyuuuuf/makrine_public/blob/main/src/app/main.jsx): `src/app/main.jsx`
- [App routing](https://github.com/kangyuuuuf/makrine_public/blob/main/src/app/App.jsx): `src/app/App.jsx`
- [Home page](https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Home/index.jsx): `src/pages/Home/index.jsx`
- [About page](https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/About/AboutPage.jsx): `src/pages/About/AboutPage.jsx`
- [Contact page](https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Contact/ContactPage.jsx): `src/pages/Contact/ContactPage.jsx`
- [Navigation](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Site footer](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/FooterSection/FooterSection.jsx): `src/components/FooterSection/FooterSection.jsx`

### Catalog discovery

- [Catalog page](https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/Catalog/CatalogPage.jsx): `src/pages/Catalog/CatalogPage.jsx`
- [Catalog filters](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/catalog/CatalogSidebar.jsx): `src/components/catalog/CatalogSidebar.jsx`
- [Product card](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/catalog/ProductCard.jsx): `src/components/catalog/ProductCard.jsx`
- [Catalog display data](https://github.com/kangyuuuuf/makrine_public/blob/main/src/data/productDisplayUtils.js): `src/data/productDisplayUtils.js`
- [Featured products](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/FeaturedProductsShowcase/FeaturedProductsShowcase.jsx): `src/components/FeaturedProductsShowcase/FeaturedProductsShowcase.jsx`

### Product details

- [Product detail page](https://github.com/kangyuuuuf/makrine_public/blob/main/src/pages/ProductDetail/ProductDetailPage.jsx): `src/pages/ProductDetail/ProductDetailPage.jsx`
- [Product detail view](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/product-detail/ProductDetailPage.jsx): `src/components/product-detail/ProductDetailPage.jsx`
- [Product summary](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/product-detail/ProductDetailAside.jsx): `src/components/product-detail/ProductDetailAside.jsx`

### Sales inquiries

- [Quotation inquiry](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/inquiry/QuotationInquiryModal.jsx): `src/components/inquiry/QuotationInquiryModal.jsx`
- [Inquiry feedback](https://github.com/kangyuuuuf/makrine_public/blob/main/src/components/inquiry/InquiryPopup.jsx): `src/components/inquiry/InquiryPopup.jsx`
- [Inquiry email API](https://github.com/kangyuuuuf/makrine_public/blob/main/apps/api/api/send-inquiry.js): `apps/api/api/send-inquiry.js`
- [Contact email API](https://github.com/kangyuuuuf/makrine_public/blob/main/apps/api/api/send-contact-message.js): `apps/api/api/send-contact-message.js`

### Other components

- **Site visitor**
- **Resend email service**

## Connections

- Site visitor → React entry: opens site
- React entry → App routing: renders
- App routing → Home page: routes to
- App routing → About page: routes to
- App routing → Contact page: routes to
- App routing → Catalog page: routes to
- App routing → Product detail page: routes to
- App routing → Navigation: renders
- App routing → Site footer: renders
- Catalog page → Catalog filters: renders
- Catalog page → Product card: renders
- Catalog page → Catalog display data: loads and maps
- Home page → Featured products: presents
- Featured products → Catalog display data: loads and maps
- Product detail page → Product detail view: renders
- Product detail view → Product summary: renders
- Catalog page → Quotation inquiry: opens inquiry
- Product summary → Quotation inquiry: starts inquiry
- Quotation inquiry → Inquiry email API: posts inquiry
- Quotation inquiry → Inquiry feedback: shows feedback
- Site footer → Contact email API: posts message
- Site footer → Inquiry feedback: shows feedback
- Inquiry email API → Resend email service: sends email
- Contact email API → Resend email service: sends email