# gupta-yuraj/greet-tech_ind_08 architecture

> Architecture diagram of the GitHub repository gupta-yuraj/greet-tech_ind_08, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-17). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gupta-yuraj/greet-tech_ind_08
- Repository: https://github.com/gupta-yuraj/greet-tech_ind_08

## Overview

1. **Overall shape**
   - This is a **Vite + React single-page frontend**. There is no backend, API client layer, or routing tree visible in the repo.
   - The app is assembled from a set of self-contained UI sections under `src/components`, with content sourced from static data files in `src/data`.

2. **Entry and composition layer**
   - `src/main.jsx` is the runtime entry point that mounts the app.
   - `src/App.jsx` is the top-level composition component.
   - `src/pages/Home.jsx` appears to be the primary page shell, likely stitching together the main sections into one long scrolling experience.

3. **Primary user experience**
   - The repository is organized like a **ceremonial/celebration dashboard** rather than a generic business app.
   - Major sections include:
     - hero/banner
     - company info
     - statistics
     - balance sheet
     - appreciation report
     - message wall
     - photo/video journals
     - shayari/poetry
     - finale
   - This suggests a narrative, presentation-style flow where the page is read top-to-bottom.

4. **Data-driven content layer**
   - The app’s main content is not hardcoded in the JSX tree; it is fed from static modules:
     - `src/data/ledgerData.js`
     - `src/data/messages.js`
     - `src/data/photos.js`
     - `src/data/shayariData.js`
     - `src/data/videos.js`
   - These modules are the key content boundary: components consume structured arrays/objects and render them into cards, ledgers, galleries, and text blocks.

5. **Section components and their roles**
   - `Hero/HeroSection.jsx` is the landing section.
   - `CompanyInfo/CompanyCard.jsx` provides organization/profile-style information.
   - `Statistics/StatisticsDashboard.jsx` likely visualizes summarized metrics.
   - `BalanceSheet/FinalBalanceSheet.jsx`, `KnowledgeLedger/KnowledgeLedger.jsx`, and `FunnyLedger/FunnyMomentsLedger.jsx` suggest multiple ledger-style panels with different content themes.
   - `Appreciation/AppreciationReport.jsx` and `Finale/GrandFinale.jsx` act as closing or summary sections.

6. **Media-heavy subflows**
   - `PhotoVoucher/PhotoVoucherRegister.jsx` and `PhotoVoucher/Lightbox.jsx` implement an image gallery flow with an overlay viewer.
   - `VideoJournal/VideoJournal.jsx`, `VideoCard.jsx`, `VideoModal.jsx`, and `VideoVoucherRegister.jsx` form a video browsing flow with modal playback/details.
   - `public/kiliye.mp3` plus `MusicPlayer/MusicToggle.jsx` indicate optional background audio control.

7. **Interaction and UI state boundaries**
   - `ThemeToggle/ThemeToggle.jsx` suggests a light/dark or visual theme switch at app level.
   - `Loader/TallyLoader.jsx` suggests an initial loading state or animated transition before content appears.
   - Modal/lightbox components imply shared transient UI state, probably controlled at the section level rather than by a global state store.

8. **Message and sentiment layer**
   - `MessageWall/TeamMessageWall.jsx` and `src/data/messages.js` represent a curated message board or testimonial stream.
   - `Shayari/ShayariSection.jsx` and `src/data/shayariData.js` add poetic content, reinforcing that the app is a personalized, commemorative experience.
   - These sections are content presentation features, not user-generated workflows.

9. **Asset organization**
   - `public/` contains static resources, including audio and images (`public/pic`).
   - This indicates that the app relies on bundled static media rather than remote asset delivery or CMS integration.

10. **Styling and build tooling**
   - `src/index.css` is the global stylesheet entry.
   - `eslint.config.js` handles code quality.
   - `vite.config.js` defines the frontend build/dev environment.
   - `package.json` / lockfile imply a standard Node-based toolchain with Vite as the bundler/runtime for development.

11. **Important architectural boundary**
   - The main boundary in this repo is between **presentation components** and **static content datasets**.
   - Nearly all sections appear to be reusable display components that transform imported data into themed UI blocks.
   - There is no evidence of persisted application state, database access, server rendering, or external service integration.

12. **How to diagram it**
   - A good architecture diagram would show:
     - Vite/React runtime at the top
     - `App`/`Home` as the page assembler
     - a set of independent content sections beneath it
     - static data modules feeding those sections
     - public media assets feeding the image/audio/video UI
     - overlays/modals/theme/music/loader as cross-cutting UI utilities

Main entry points: [`src/pages/Home.jsx`](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/pages/Home.jsx) (Home), [`src/App.jsx`](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/App.jsx) (App), [`src/components/PhotoVoucher/PhotoVoucherRegister.jsx`](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/PhotoVoucher/PhotoVoucherRegister.jsx) (Photos), [`src/components/VideoJournal/VideoVoucherRegister.jsx`](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoVoucherRegister.jsx) (Video Register)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_src_main["main<br/>entry<br/>[main.jsx]"]
  node_src_app["App<br/>shell<br/>[App.jsx]"]
  node_src_home["Home<br/>page<br/>[Home.jsx]"]
  node_theme_toggle(("Theme<br/>ui toggle<br/>[ThemeToggle.jsx]"))
  node_music_toggle(("Music<br/>ui toggle<br/>[MusicToggle.jsx]"))
  node_tally_loader(("Loader<br/>loading ui<br/>[TallyLoader.jsx]"))
end

subgraph group_sections["Sections"]
  node_hero_section["Hero<br/>banner<br/>[HeroSection.jsx]"]
  node_company_card["Company<br/>profile card<br/>[CompanyCard.jsx]"]
  node_stats_dashboard["Stats<br/>metrics panel"]
  node_final_balance["Balance<br/>ledger view"]
  node_knowledge_ledger["Knowledge<br/>ledger view"]
  node_funny_ledger["Funny Ledger<br/>ledger view"]
  node_appreciation_report["Appreciation<br/>summary report"]
  node_message_wall["Messages<br/>message wall"]
  node_photo_register["Photos<br/>gallery"]
  node_video_journal["Videos<br/>media journal<br/>[VideoJournal.jsx]"]
  node_shayari_section["Shayari<br/>poetry section<br/>[ShayariSection.jsx]"]
  node_grand_finale["Finale<br/>closing scene<br/>[GrandFinale.jsx]"]
  node_photo_lightbox(("Lightbox<br/>overlay<br/>[Lightbox.jsx]"))
  node_video_card["Video Card<br/>media card<br/>[VideoCard.jsx]"]
  node_video_modal(("Video Modal<br/>overlay<br/>[VideoModal.jsx]"))
  node_video_register["Video Register<br/>media registry"]
end

subgraph group_content["Content"]
  node_ledger_data[("Ledger Data<br/>static data<br/>[ledgerData.js]")]
  node_messages_data[("Messages Data<br/>static data<br/>[messages.js]")]
  node_photos_data[("Photos Data<br/>static data<br/>[photos.js]")]
  node_shayari_data[("Shayari Data<br/>static data<br/>[shayariData.js]")]
  node_videos_data[("Videos Data<br/>static data<br/>[videos.js]")]
  node_audio_asset["kiliye.mp3<br/>audio asset<br/>[kiliye.mp3]"]
  node_photo_assets["Pic Assets<br/>image assets"]
end

node_src_main -->|"bootstraps"| node_src_app
node_src_app -->|"renders"| node_src_home
node_src_app -->|"uses"| node_theme_toggle
node_src_app -->|"uses"| node_music_toggle
node_src_app -->|"shows"| node_tally_loader
node_src_home -->|"assembles"| node_hero_section
node_src_home -->|"assembles"| node_company_card
node_src_home -->|"assembles"| node_stats_dashboard
node_src_home -->|"assembles"| node_final_balance
node_src_home -->|"assembles"| node_knowledge_ledger
node_src_home -->|"assembles"| node_funny_ledger
node_src_home -->|"assembles"| node_appreciation_report
node_src_home -->|"assembles"| node_message_wall
node_src_home -->|"assembles"| node_photo_register
node_src_home -->|"assembles"| node_video_register
node_src_home -->|"assembles"| node_shayari_section
node_src_home -->|"assembles"| node_grand_finale
node_final_balance -->|"reads"| node_ledger_data
node_knowledge_ledger -->|"reads"| node_ledger_data
node_funny_ledger -->|"reads"| node_ledger_data
node_message_wall -->|"reads"| node_messages_data
node_photo_register -->|"reads"| node_photos_data
node_photo_register -->|"opens"| node_photo_lightbox
node_photo_register -->|"uses"| node_photo_assets
node_video_register -->|"reads"| node_videos_data
node_video_register -->|"renders"| node_video_card
node_video_register -->|"opens"| node_video_modal
node_shayari_section -->|"reads"| node_shayari_data
node_music_toggle -->|"controls"| node_audio_asset

click node_src_main "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/main.jsx"
click node_src_app "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/App.jsx"
click node_src_home "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/pages/Home.jsx"
click node_theme_toggle "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/ThemeToggle/ThemeToggle.jsx"
click node_music_toggle "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/MusicPlayer/MusicToggle.jsx"
click node_tally_loader "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Loader/TallyLoader.jsx"
click node_hero_section "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Hero/HeroSection.jsx"
click node_company_card "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/CompanyInfo/CompanyCard.jsx"
click node_stats_dashboard "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Statistics/StatisticsDashboard.jsx"
click node_final_balance "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/BalanceSheet/FinalBalanceSheet.jsx"
click node_knowledge_ledger "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/KnowledgeLedger/KnowledgeLedger.jsx"
click node_funny_ledger "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/FunnyLedger/FunnyMomentsLedger.jsx"
click node_appreciation_report "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Appreciation/AppreciationReport.jsx"
click node_message_wall "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/MessageWall/TeamMessageWall.jsx"
click node_photo_register "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/PhotoVoucher/PhotoVoucherRegister.jsx"
click node_video_journal "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoJournal.jsx"
click node_shayari_section "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Shayari/ShayariSection.jsx"
click node_grand_finale "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Finale/GrandFinale.jsx"
click node_ledger_data "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/ledgerData.js"
click node_messages_data "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/messages.js"
click node_photos_data "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/photos.js"
click node_shayari_data "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/shayariData.js"
click node_videos_data "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/videos.js"
click node_audio_asset "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/public/kiliye.mp3"
click node_photo_assets "https://github.com/gupta-yuraj/greet-tech_ind_08/tree/main/public/pic"
click node_photo_lightbox "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/PhotoVoucher/Lightbox.jsx"
click node_video_card "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoCard.jsx"
click node_video_modal "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoModal.jsx"
click node_video_register "https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoVoucherRegister.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_src_main,node_src_app,node_src_home,node_theme_toggle,node_music_toggle,node_tally_loader toneBlue
class node_hero_section,node_company_card,node_stats_dashboard,node_final_balance,node_knowledge_ledger,node_funny_ledger,node_appreciation_report,node_message_wall,node_photo_register,node_video_journal,node_shayari_section,node_grand_finale,node_photo_lightbox,node_video_card,node_video_modal,node_video_register toneAmber
class node_ledger_data,node_messages_data,node_photos_data,node_shayari_data,node_videos_data,node_audio_asset,node_photo_assets toneMint
```

## Components

### Runtime

Vite/React entry, app shell, and global UI controls.

- [main](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/main.jsx): entry · React mount point · `src/main.jsx`
- [App](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/App.jsx): shell · Top-level app composition · `src/App.jsx`
- [Home](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/pages/Home.jsx): page · Primary page assembler · `src/pages/Home.jsx`
- [Theme](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/ThemeToggle/ThemeToggle.jsx): ui toggle · Light/dark or visual theme switch · `src/components/ThemeToggle/ThemeToggle.jsx`
- [Music](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/MusicPlayer/MusicToggle.jsx): ui toggle · Background audio control · `src/components/MusicPlayer/MusicToggle.jsx`
- [Loader](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Loader/TallyLoader.jsx): loading ui · Initial loading or transition state · `src/components/Loader/TallyLoader.jsx`

### Sections

Top-level presentation blocks assembled into the scrolling page.

- [Hero](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Hero/HeroSection.jsx): banner · Landing section · `src/components/Hero/HeroSection.jsx`
- [Company](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/CompanyInfo/CompanyCard.jsx): profile card · Organization or company info block · `src/components/CompanyInfo/CompanyCard.jsx`
- [Stats](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Statistics/StatisticsDashboard.jsx): metrics panel · Summary statistics display · `src/components/Statistics/StatisticsDashboard.jsx`
- [Balance](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/BalanceSheet/FinalBalanceSheet.jsx): ledger view · Primary balance sheet section · `src/components/BalanceSheet/FinalBalanceSheet.jsx`
- [Knowledge](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/KnowledgeLedger/KnowledgeLedger.jsx): ledger view · Knowledge-themed ledger section · `src/components/KnowledgeLedger/KnowledgeLedger.jsx`
- [Funny Ledger](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/FunnyLedger/FunnyMomentsLedger.jsx): ledger view · Humorous ledger section · `src/components/FunnyLedger/FunnyMomentsLedger.jsx`
- [Appreciation](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Appreciation/AppreciationReport.jsx): summary report · Closing appreciation section · `src/components/Appreciation/AppreciationReport.jsx`
- [Messages](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/MessageWall/TeamMessageWall.jsx): message wall · Curated team messages · `src/components/MessageWall/TeamMessageWall.jsx`
- [Photos](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/PhotoVoucher/PhotoVoucherRegister.jsx): gallery · Photo voucher or gallery register · `src/components/PhotoVoucher/PhotoVoucherRegister.jsx`
- [Videos](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoJournal.jsx): media journal · Video browsing section · `src/components/VideoJournal/VideoJournal.jsx`
- [Shayari](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Shayari/ShayariSection.jsx): poetry section · Poetry or shayari block · `src/components/Shayari/ShayariSection.jsx`
- [Finale](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/Finale/GrandFinale.jsx): closing scene · Final closing section · `src/components/Finale/GrandFinale.jsx`
- [Lightbox](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/PhotoVoucher/Lightbox.jsx): overlay · Image viewer overlay · `src/components/PhotoVoucher/Lightbox.jsx`
- [Video Card](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoCard.jsx): media card · Single video presentation card · `src/components/VideoJournal/VideoCard.jsx`
- [Video Modal](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoModal.jsx): overlay · Video playback or detail overlay · `src/components/VideoJournal/VideoModal.jsx`
- [Video Register](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/components/VideoJournal/VideoVoucherRegister.jsx): media registry · Video list or registry wrapper · `src/components/VideoJournal/VideoVoucherRegister.jsx`

### Content

Static datasets and bundled media consumed by the UI.

- [Ledger Data](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/ledgerData.js): static data · Structured ledger content · `src/data/ledgerData.js`
- [Messages Data](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/messages.js): static data · Curated message content · `src/data/messages.js`
- [Photos Data](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/photos.js): static data · Photo metadata and gallery content · `src/data/photos.js`
- [Shayari Data](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/shayariData.js): static data · Poetry content · `src/data/shayariData.js`
- [Videos Data](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/src/data/videos.js): static data · Video metadata and journal content · `src/data/videos.js`
- [kiliye.mp3](https://github.com/gupta-yuraj/greet-tech_ind_08/blob/main/public/kiliye.mp3): audio asset · Bundled background music · `public/kiliye.mp3`
- [Pic Assets](https://github.com/gupta-yuraj/greet-tech_ind_08/tree/main/public/pic): image assets · Bundled static images · `public/pic`

## Connections

- main → App: bootstraps · Mounts the React application
- App → Home: renders · Delegates primary page composition
- App → Theme: uses · Provides global theme switching
- App → Music: uses · Provides background audio control
- App → Loader: shows · Initial loading state
- Home → Hero: assembles · Lays out the landing section
- Home → Company: assembles · Adds profile/company content
- Home → Stats: assembles · Adds summary metrics
- Home → Balance: assembles · Adds the main ledger section
- Home → Knowledge: assembles · Adds the knowledge ledger
- Home → Funny Ledger: assembles · Adds the humor ledger
- Home → Appreciation: assembles · Adds closing appreciation content
- Home → Messages: assembles · Adds curated messages
- Home → Photos: assembles · Adds the photo gallery flow
- Home → Video Register: assembles · Adds the video journal flow
- Home → Shayari: assembles · Adds poetry content
- Home → Finale: assembles · Ends with the finale section
- Balance → Ledger Data: reads · Consumes structured ledger content
- Knowledge → Ledger Data: reads · Shares the ledger dataset
- Funny Ledger → Ledger Data: reads · Shares the ledger dataset
- Messages → Messages Data: reads · Consumes message content
- Photos → Photos Data: reads · Consumes photo metadata
- Photos → Lightbox: opens · Uses overlay viewer for images
- Photos → Pic Assets: uses · Displays bundled images
- Video Register → Videos Data: reads · Consumes video metadata
- Video Register → Video Card: renders · Builds individual video cards
- Video Register → Video Modal: opens · Uses overlay playback or details
- Shayari → Shayari Data: reads · Consumes poetry content
- Music → kiliye.mp3: controls · Toggles bundled audio playback