# bagusyajamana/sk3nakopee architecture

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

## Overview

Skena Coffee is a React cafe website organized as an editorial, interactive visitor experience. The principal journey is entering the page, exploring the coffee and food menu, and continuing through the brand story, brewing ritual, quote, location and closing section. The menu has distinct category selection, deck interaction and featured-item presentation stages. Layout hooks and the Pretext helper form an internal text-measurement layer for composed copy. Some section details come from the README; their wiring is shown only where documented.

Main entry points: [`src/App.jsx`](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/App.jsx) (Page composition), [`src/components/MenuHighlights.jsx`](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuHighlights.jsx) (Menu highlights), [`src/lib/pretext-helpers.js`](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/lib/pretext-helpers.js) (Pretext helpers), [`src/main.jsx`](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Page runtime"]
  node_entry["React entry<br/>[main.jsx]"]
  node_page["Page composition<br/>[App.jsx]"]
end

subgraph group_menu["Menu experience"]
  node_highlights["Menu highlights<br/>[MenuHighlights.jsx]"]
  node_menu_data["Menu content<br/>[menuItems.js]"]
  node_category_rail["Category rail"]
  node_deck_card["Menu deck card<br/>[MenuDeckCard.jsx]"]
  node_card_face["Card face<br/>[MenuCardFace.jsx]"]
  node_badge["Recommendation badge"]
  node_preview["Menu preview"]
end

subgraph group_editorial["Editorial sections"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Hero opening<br/>[Hero.jsx]"]
  node_about["Coffee story<br/>[About.jsx]"]
  node_brew["Brewing ritual<br/>[BrewGuide.jsx]"]
  node_quote["Pull quote<br/>[PullQuote.jsx]"]
  node_location["Location and hours<br/>[LocationHours.jsx]"]
  node_footer["Closing brand<br/>[Footer.jsx]"]
end

subgraph group_layout["Text layout"]
  node_menu_layout["Menu text layout"]
  node_about_layout["Obstacle text layout"]
  node_brew_layout["Brew text layout"]
  node_quote_layout["Quote text layout"]
  node_pretext["Pretext helpers<br/>[pretext-helpers.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_page
node_page -->|"renders"| node_navbar
node_page -->|"renders"| node_hero
node_page -->|"renders"| node_highlights
node_page -->|"renders"| node_about
node_page -->|"renders"| node_brew
node_page -->|"renders"| node_quote
node_page -->|"renders"| node_location
node_page -->|"renders"| node_footer
node_highlights -->|"reads categories"| node_menu_data
node_highlights -->|"renders and controls"| node_category_rail
node_highlights -->|"renders cards"| node_deck_card
node_highlights -->|"renders preview"| node_preview
node_highlights -->|"measures descriptions"| node_menu_layout
node_deck_card -->|"renders face"| node_card_face
node_card_face -->|"shows recommendation"| node_badge
node_about -->|"routes text"| node_about_layout
node_brew -->|"measures expansion"| node_brew_layout
node_quote -->|"wraps around obstacle"| node_quote_layout
node_menu_layout -->|"measures text"| node_pretext
node_about_layout -->|"lays out lines"| node_pretext
node_brew_layout -->|"measures text"| node_pretext
node_quote_layout -->|"lays out lines"| node_pretext

click node_entry "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/main.jsx"
click node_page "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/App.jsx"
click node_navbar "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/Navbar.jsx"
click node_hero "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/Hero.jsx"
click node_highlights "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuHighlights.jsx"
click node_menu_data "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/data/menuItems.js"
click node_category_rail "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/CategoryToggleRail.jsx"
click node_deck_card "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuDeckCard.jsx"
click node_card_face "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuCardFace.jsx"
click node_badge "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/RecommendedBadge.jsx"
click node_preview "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuPreviewImage.jsx"
click node_menu_layout "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/useMenuHighlightLayout.js"
click node_about "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/About.jsx"
click node_about_layout "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/useAboutOrbLayout.js"
click node_brew "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/BrewGuide.jsx"
click node_brew_layout "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/useBrewGuidePretext.js"
click node_quote "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/PullQuote.jsx"
click node_quote_layout "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/usePullQuoteLayout.js"
click node_location "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/LocationHours.jsx"
click node_footer "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/Footer.jsx"
click node_pretext "https://github.com/bagusyajamana/sk3nakopee/blob/master/src/lib/pretext-helpers.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_page toneBlue
class node_highlights,node_menu_data,node_category_rail,node_deck_card,node_card_face,node_badge,node_preview toneAmber
class node_navbar,node_hero,node_about,node_brew,node_quote,node_location,node_footer toneMint
class node_menu_layout,node_about_layout,node_brew_layout,node_quote_layout,node_pretext toneRose
class node_visitor toneIndigo
```

## Components

### Page runtime

- [React entry](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/App.jsx): `src/App.jsx`

### Menu experience

- [Menu highlights](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuHighlights.jsx): `src/components/MenuHighlights.jsx`
- [Menu content](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/data/menuItems.js): `src/data/menuItems.js`
- [Category rail](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/CategoryToggleRail.jsx): `src/components/CategoryToggleRail.jsx`
- [Menu deck card](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuDeckCard.jsx): `src/components/MenuDeckCard.jsx`
- [Card face](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuCardFace.jsx): `src/components/MenuCardFace.jsx`
- [Recommendation badge](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/RecommendedBadge.jsx): `src/components/RecommendedBadge.jsx`
- [Menu preview](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/MenuPreviewImage.jsx): `src/components/MenuPreviewImage.jsx`

### Editorial sections

- [Navigation](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Hero opening](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Coffee story](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/About.jsx): `src/components/About.jsx`
- [Brewing ritual](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/BrewGuide.jsx): `src/components/BrewGuide.jsx`
- [Pull quote](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/PullQuote.jsx): `src/components/PullQuote.jsx`
- [Location and hours](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/LocationHours.jsx): `src/components/LocationHours.jsx`
- [Closing brand](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/components/Footer.jsx): `src/components/Footer.jsx`

### Text layout

- [Menu text layout](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/useMenuHighlightLayout.js): `src/hooks/useMenuHighlightLayout.js`
- [Obstacle text layout](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/useAboutOrbLayout.js): `src/hooks/useAboutOrbLayout.js`
- [Brew text layout](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/useBrewGuidePretext.js): `src/hooks/useBrewGuidePretext.js`
- [Quote text layout](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/hooks/usePullQuoteLayout.js): `src/hooks/usePullQuoteLayout.js`
- [Pretext helpers](https://github.com/bagusyajamana/sk3nakopee/blob/master/src/lib/pretext-helpers.js): `src/lib/pretext-helpers.js`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site
- React entry → Page composition: renders
- Page composition → Navigation: renders
- Page composition → Hero opening: renders
- Page composition → Menu highlights: renders
- Page composition → Coffee story: renders
- Page composition → Brewing ritual: renders
- Page composition → Pull quote: renders
- Page composition → Location and hours: renders
- Page composition → Closing brand: renders
- Menu highlights → Menu content: reads categories
- Menu highlights → Category rail: renders and controls
- Menu highlights → Menu deck card: renders cards
- Menu highlights → Menu preview: renders preview
- Menu highlights → Menu text layout: measures descriptions
- Menu deck card → Card face: renders face
- Card face → Recommendation badge: shows recommendation
- Coffee story → Obstacle text layout: routes text
- Brewing ritual → Brew text layout: measures expansion
- Pull quote → Quote text layout: wraps around obstacle
- Menu text layout → Pretext helpers: measures text
- Obstacle text layout → Pretext helpers: lays out lines
- Brew text layout → Pretext helpers: measures text
- Quote text layout → Pretext helpers: lays out lines