# csia25/khumbu architecture

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

- Interactive diagram: https://gitdiagram.com/csia25/khumbu
- Repository: https://github.com/csia25/khumbu

## Overview

#### Purpose and Runtime
This is a Lovable-managed, static React single-page site for an organization’s story, programs, impact, team, gallery, contact, and support content. It runs in the browser as a Vite-built TypeScript application using React, Tailwind CSS, and shadcn/ui. Development starts through the Vite entry configuration and production publishing is handled through Lovable. Key entry points: `src/main.tsx`, `src/App.tsx`, `vite.config.ts`.

#### Application Composition and Navigation
`App.tsx` is the application shell and likely owns client-side route selection/layout composition. Content is split into dedicated page-level views for major destinations, including the home page, programs, team, story, gallery, support, and fallback/not-found state. Paths: `src/App.tsx`, `src/pages/Index.tsx`, `src/pages/NotFound.tsx`.

#### Home Page Content Pipeline
The landing experience is assembled from reusable section components rather than a backend-driven CMS. It presents organizational overview, programs, process, impact, team, partners, testimonials, social content, contact, and support calls to action. Primary section boundary: `src/pages/Index.tsx`; representative content modules: `src/components/Hero.tsx`, `src/components/Programs.tsx`, `src/components/Impact.tsx`.

#### Shared Site Chrome and Interaction
Header/footer components provide persistent navigation and site framing. Scroll behavior is encapsulated in a reusable scroll-to-top component/hook, while an animated background supports the site’s visual layer independently from page content. Paths: `src/components/Header.tsx`, `src/components/Footer.tsx`, `src/components/ScrollToTop.tsx`.

#### Destination Pages
Individual routes isolate fuller versions of key content domains from the home-page summaries. Gallery, organizational story, programs, support, and team are independently maintained page boundaries, enabling navigation without a server API or data layer. Paths: `src/pages/GalleryPage.tsx`, `src/pages/OurStoryPage.tsx`, `src/pages/ProgramsPage.tsx`.

#### Design-System Boundary
The project includes a local shadcn/ui component library for accessible primitives such as buttons, cards, dialogs, forms, navigation, carousels, and toast feedback. Site-specific components should compose these primitives rather than duplicate common interaction behavior. Paths: `src/components/ui/button.tsx`, `src/components/ui/card.tsx`, `src/components/ui/dialog.tsx`.

#### Styling, Assets, and External Services
Global styling is centralized in `src/index.css` and `src/App.css`, with Tailwind configured in `tailwind.config.ts`. Static visual assets are bundled under `src/assets`, while public crawler and web-manifest assets sit under `public`. No backend, database, authentication provider, or explicit external API integration is represented in the tree. Material external platform boundary: Lovable project hosting/publishing; local package runtimes are Node/npm (with Bun lockfile also present).

Main entry points: [`src/App.tsx`](https://github.com/csia25/khumbu/blob/main/src/App.tsx) (Application shell), [`src/components/Hero.tsx`](https://github.com/csia25/khumbu/blob/main/src/components/Hero.tsx) (Home sections), [`vite.config.ts`](https://github.com/csia25/khumbu/blob/main/vite.config.ts) (Vite build), [`src/main.tsx`](https://github.com/csia25/khumbu/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser application"]
  node_vite{{"Vite build<br/>build runtime<br/>[vite.config.ts]"}}
  node_main["React entry<br/>application entry<br/>[main.tsx]"]
  node_assets["Static assets<br/>bundled media"]
end

subgraph group_site["Site composition"]
  node_app["Application shell<br/>routing and layout<br/>[App.tsx]"]
  node_home["Home page<br/>page view<br/>[Index.tsx]"]
  node_destinations["Destination pages<br/>page views<br/>[GalleryPage.tsx]"]
  node_notfound["Not found page<br/>fallback view<br/>[NotFound.tsx]"]
  node_chrome["Site chrome<br/>shared layout<br/>[Header.tsx]"]
  node_scroll["Scroll behavior<br/>shared interaction<br/>[ScrollToTop.tsx]"]
  node_sections["Home sections<br/>content modules<br/>[Hero.tsx]"]
end

subgraph group_design["Design system"]
  node_ui["shadcn/ui primitives<br/>component library<br/>[button.tsx]"]
  node_styles["Global styles<br/>styling<br/>[index.css]"]
end

node_lovable{{"Lovable publishing<br/>hosting platform"}}

node_vite -->|"bundles"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders route"| node_home
node_app -->|"renders routes"| node_destinations
node_app -->|"fallback route"| node_notfound
node_app -->|"composes"| node_chrome
node_app -->|"uses"| node_scroll
node_home -->|"assembles"| node_sections
node_chrome -->|"composes"| node_ui
node_sections -->|"composes"| node_ui
node_app -->|"applies"| node_styles
node_sections -->|"uses"| node_assets
node_vite -.->|"production publish"| node_lovable

click node_vite "https://github.com/csia25/khumbu/blob/main/vite.config.ts"
click node_main "https://github.com/csia25/khumbu/blob/main/src/main.tsx"
click node_app "https://github.com/csia25/khumbu/blob/main/src/App.tsx"
click node_home "https://github.com/csia25/khumbu/blob/main/src/pages/Index.tsx"
click node_destinations "https://github.com/csia25/khumbu/blob/main/src/pages/GalleryPage.tsx"
click node_notfound "https://github.com/csia25/khumbu/blob/main/src/pages/NotFound.tsx"
click node_chrome "https://github.com/csia25/khumbu/blob/main/src/components/Header.tsx"
click node_scroll "https://github.com/csia25/khumbu/blob/main/src/components/ScrollToTop.tsx"
click node_sections "https://github.com/csia25/khumbu/blob/main/src/components/Hero.tsx"
click node_ui "https://github.com/csia25/khumbu/blob/main/src/components/ui/button.tsx"
click node_styles "https://github.com/csia25/khumbu/blob/main/src/index.css"
click node_assets "https://github.com/csia25/khumbu/tree/main/src/assets"

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_vite,node_main,node_assets toneBlue
class node_app,node_home,node_destinations,node_notfound,node_chrome,node_scroll,node_sections toneAmber
class node_ui,node_styles toneMint
class node_lovable toneNeutral
```

## Components

### Browser application

Vite-built React single-page site.

- [Vite build](https://github.com/csia25/khumbu/blob/main/vite.config.ts): build runtime · Starts development and builds the browser bundle. · `vite.config.ts`
- [React entry](https://github.com/csia25/khumbu/blob/main/src/main.tsx): application entry · `src/main.tsx`
- [Static assets](https://github.com/csia25/khumbu/tree/main/src/assets): bundled media · `src/assets`

### Site composition

- [Application shell](https://github.com/csia25/khumbu/blob/main/src/App.tsx): routing and layout · Selects page views and composes the site shell. · `src/App.tsx`
- [Home page](https://github.com/csia25/khumbu/blob/main/src/pages/Index.tsx): page view · Assembles the landing-page content pipeline. · `src/pages/Index.tsx`
- [Destination pages](https://github.com/csia25/khumbu/blob/main/src/pages/GalleryPage.tsx): page views · Independent gallery, story, programs, support, and team views. · `src/pages/GalleryPage.tsx`
- [Not found page](https://github.com/csia25/khumbu/blob/main/src/pages/NotFound.tsx): fallback view · `src/pages/NotFound.tsx`
- [Site chrome](https://github.com/csia25/khumbu/blob/main/src/components/Header.tsx): shared layout · Persistent navigation and footer framing. · `src/components/Header.tsx`
- [Scroll behavior](https://github.com/csia25/khumbu/blob/main/src/components/ScrollToTop.tsx): shared interaction · `src/components/ScrollToTop.tsx`
- [Home sections](https://github.com/csia25/khumbu/blob/main/src/components/Hero.tsx): content modules · Reusable hero, programs, impact, and related landing sections. · `src/components/Hero.tsx`

### Design system

- [shadcn/ui primitives](https://github.com/csia25/khumbu/blob/main/src/components/ui/button.tsx): component library · Accessible reusable controls, cards, dialogs, forms, and feedback. · `src/components/ui/button.tsx`
- [Global styles](https://github.com/csia25/khumbu/blob/main/src/index.css): styling · Global CSS with Tailwind design configuration. · `src/index.css`

### Other components

- **Lovable publishing**: hosting platform · Publishes the production static site.

## Connections

- Vite build → React entry: bundles
- React entry → Application shell: mounts
- Application shell → Home page: renders route
- Application shell → Destination pages: renders routes
- Application shell → Not found page: fallback route
- Application shell → Site chrome: composes
- Application shell → Scroll behavior: uses
- Home page → Home sections: assembles
- Site chrome → shadcn/ui primitives: composes
- Home sections → shadcn/ui primitives: composes
- Application shell → Global styles: applies
- Home sections → Static assets: uses
- Vite build → Lovable publishing: production publish