# yantokumar/jajan-yuks-kaka architecture

> Architecture diagram of the GitHub repository yantokumar/jajan-yuks-kaka, 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/yantokumar/jajan-yuks-kaka
- Repository: https://github.com/yantokumar/jajan-yuks-kaka

## Overview

Jajan Yuks is a customer-facing snack storefront and lightweight ordering landing page. Visitors browse product and business information, add snacks to a persistent cart, enter delivery details, and open a prefilled WhatsApp order to send manually. The graph distinguishes storefront content, cart/order handling, shared state and formatting, and site configuration. README documents additional landing-page sections not sampled; their connections are shown only where the page composition is explicit.

Main entry points: [`src/app/page.tsx`](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/app/page.tsx) (Home composition), [`src/lib/cart.tsx`](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/lib/cart.tsx) (Cart context), [`src/components/Contact.tsx`](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Contact.tsx) (Contact and maps), [`src/components/CartDrawer.tsx`](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/CartDrawer.tsx) (Cart drawer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home composition<br/>[page.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_features["Features<br/>[Features.tsx]"]
  node_products["Product catalog<br/>[Products.tsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_faq["FAQ<br/>[FAQ.tsx]"]
  node_contact["Contact and maps<br/>[Contact.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_ordering["Cart and order"]
  node_cartbutton["Floating cart<br/>[CartButton.tsx]"]
  node_drawer["Cart drawer<br/>[CartDrawer.tsx]"]
end

subgraph group_shared["Shared runtime"]
  node_cartstate["Cart context<br/>[cart.tsx]"]
  node_utilities["Order utilities<br/>[utils.ts]"]
end

subgraph group_config["Site configuration"]
  node_siteconfig["Store settings<br/>[site.ts]"]
end

node_customer(("Customer"))
node_localstorage[("Browser localStorage")]
node_whatsapp(("WhatsApp"))
node_instagram(("Instagram"))
node_maps(("Google Maps"))

node_customer -->|"views storefront"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_features
node_home -->|"renders"| node_products
node_home -->|"renders"| node_testimonials
node_home -->|"renders"| node_about
node_home -->|"renders"| node_faq
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_home -->|"renders"| node_cartbutton
node_home -->|"renders"| node_drawer
node_home -->|"provides context"| node_cartstate
node_products -->|"adds items"| node_cartstate
node_navbar -->|"opens cart"| node_cartstate
node_cartbutton -->|"opens cart"| node_cartstate
node_drawer -->|"reads and updates"| node_cartstate
node_cartstate -->|"persists items"| node_localstorage
node_cartstate -->|"restores items"| node_localstorage
node_drawer -->|"formats order"| node_utilities
node_drawer -->|"reads WhatsApp number"| node_siteconfig
node_utilities -->|"builds order link"| node_whatsapp
node_customer -->|"sends prepared order"| node_whatsapp
node_contact -->|"reads contact details"| node_siteconfig
node_contact -->|"creates chat link"| node_utilities
node_contact -->|"links profile"| node_instagram
node_contact -->|"embeds location"| node_maps

click node_home "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/app/page.tsx"
click node_navbar "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Hero.tsx"
click node_features "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Features.tsx"
click node_products "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Products.tsx"
click node_testimonials "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Testimonials.tsx"
click node_about "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/About.tsx"
click node_faq "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/FAQ.tsx"
click node_contact "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Contact.tsx"
click node_footer "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Footer.tsx"
click node_cartbutton "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/CartButton.tsx"
click node_drawer "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/CartDrawer.tsx"
click node_cartstate "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/lib/cart.tsx"
click node_utilities "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/lib/utils.ts"
click node_siteconfig "https://github.com/yantokumar/jajan-yuks-kaka/blob/main/config/site.ts"

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_home,node_navbar,node_hero,node_features,node_products,node_testimonials,node_about,node_faq,node_contact,node_footer toneBlue
class node_cartbutton,node_drawer,node_localstorage toneAmber
class node_cartstate,node_utilities toneMint
class node_siteconfig toneRose
class node_customer,node_whatsapp,node_instagram,node_maps toneIndigo
```

## Components

### Storefront

- [Home composition](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Navigation](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Hero](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Features](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Features.tsx): `src/components/Features.tsx`
- [Product catalog](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Products.tsx): `src/components/Products.tsx`
- [Testimonials](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Testimonials.tsx): `src/components/Testimonials.tsx`
- [About](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [FAQ](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/FAQ.tsx): `src/components/FAQ.tsx`
- [Contact and maps](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`
- [Footer](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Cart and order

- [Floating cart](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/CartButton.tsx): `src/components/CartButton.tsx`
- [Cart drawer](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/components/CartDrawer.tsx): `src/components/CartDrawer.tsx`

### Shared runtime

- [Cart context](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/lib/cart.tsx): `src/lib/cart.tsx`
- [Order utilities](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Site configuration

- [Store settings](https://github.com/yantokumar/jajan-yuks-kaka/blob/main/config/site.ts): `config/site.ts`

### Other components

- **Customer**
- **Browser localStorage**
- **WhatsApp**
- **Instagram**
- **Google Maps**

## Connections

- Customer → Home composition: views storefront
- Home composition → Navigation: renders
- Home composition → Hero: renders
- Home composition → Features: renders
- Home composition → Product catalog: renders
- Home composition → Testimonials: renders
- Home composition → About: renders
- Home composition → FAQ: renders
- Home composition → Contact and maps: renders
- Home composition → Footer: renders
- Home composition → Floating cart: renders
- Home composition → Cart drawer: renders
- Home composition → Cart context: provides context
- Product catalog → Cart context: adds items
- Navigation → Cart context: opens cart
- Floating cart → Cart context: opens cart
- Cart drawer → Cart context: reads and updates
- Cart context → Browser localStorage: persists items
- Cart context → Browser localStorage: restores items
- Cart drawer → Order utilities: formats order
- Cart drawer → Store settings: reads WhatsApp number
- Order utilities → WhatsApp: builds order link
- Customer → WhatsApp: sends prepared order
- Contact and maps → Store settings: reads contact details
- Contact and maps → Order utilities: creates chat link
- Contact and maps → Instagram: links profile
- Contact and maps → Google Maps: embeds location