# louizyyy/zozo-birthday architecture

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

- Interactive diagram: https://gitdiagram.com/louizyyy/zozo-birthday
- Repository: https://github.com/louizyyy/zozo-birthday

## Overview

This is a React single-page baptismal invitation. A visitor opens the animated envelope, then views the celebrant, event details, gallery, program and message, and can submit an RSVP. App.tsx selects the desktop frame and coordinates which invitation sections render; the sections read shared invitation content where shown. RSVP submission is currently local-only (logged to the console), with no backend or email integration evidenced. The README is empty, so the graph follows the source index and sampled code; some presentational components were not sampled in full.

Main entry points: [`client/src/App.tsx`](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/App.tsx) (Invitation app), [`client/src/data/invitation.ts`](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/data/invitation.ts) (Invitation content), [`client/src/components/IntroEnvelope.tsx`](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/IntroEnvelope.tsx) (Opening envelope), [`client/src/components/Hero.tsx`](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Hero.tsx) (Celebrant hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and invitation"]
  node_app["Invitation app<br/>[App.tsx]"]
  node_envelope["Opening envelope<br/>[IntroEnvelope.tsx]"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
end

subgraph group_event["Event content"]
  node_hero["Celebrant hero<br/>[Hero.tsx]"]
  node_details["Event details"]
  node_program["Event program<br/>[Program.tsx]"]
  node_gallery["Photo gallery<br/>[Gallery.tsx]"]
  node_invitation["Invitation content<br/>[invitation.ts]"]
  node_celebrant["Celebrant profile<br/>[Celebrant.tsx]"]
  node_venue["Venue details<br/>[Venue.tsx]"]
end

subgraph group_response["Guest response"]
  node_rsvp["RSVP form<br/>[RSVP.tsx]"]
end

subgraph group_closing["Closing content"]
  node_wish["Baptismal message"]
  node_footer["Invitation footer<br/>[Footer.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens invitation"| node_app
node_app -->|"renders first"| node_envelope
node_envelope -->|"signals opening"| node_app
node_app -->|"renders sections"| node_hero
node_app -->|"renders sections"| node_details
node_app -->|"renders sections"| node_gallery
node_app -->|"renders sections"| node_program
node_app -->|"renders sections"| node_rsvp
node_app -->|"renders sections"| node_wish
node_app -->|"renders footer"| node_footer
node_hero -->|"reads content"| node_invitation
node_details -->|"reads event"| node_invitation
node_program -->|"reads schedule"| node_invitation
node_gallery -->|"reads photos"| node_invitation
node_wish -->|"reads message"| node_invitation
node_footer -->|"reads celebrant"| node_invitation

click node_app "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/App.tsx"
click node_envelope "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/IntroEnvelope.tsx"
click node_hero "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Hero.tsx"
click node_details "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/BirthdayDetails.tsx"
click node_program "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Program.tsx"
click node_gallery "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Gallery.tsx"
click node_invitation "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/data/invitation.ts"
click node_rsvp "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/RSVP.tsx"
click node_wish "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/BirthdayMessage.tsx"
click node_footer "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Footer.tsx"
click node_celebrant "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Celebrant.tsx"
click node_venue "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Venue.tsx"
click node_navbar "https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Navbar.tsx"

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_app,node_envelope,node_navbar toneBlue
class node_hero,node_details,node_program,node_gallery,node_invitation,node_celebrant,node_venue toneAmber
class node_rsvp toneMint
class node_wish,node_footer toneRose
class node_visitor toneIndigo
```

## Components

### Entry and invitation

- [Invitation app](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Opening envelope](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/IntroEnvelope.tsx): `client/src/components/IntroEnvelope.tsx`
- [Navigation bar](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Navbar.tsx): `client/src/components/Navbar.tsx`

### Event content

- [Celebrant hero](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Hero.tsx): `client/src/components/Hero.tsx`
- [Event details](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/BirthdayDetails.tsx): `client/src/components/BirthdayDetails.tsx`
- [Event program](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Program.tsx): `client/src/components/Program.tsx`
- [Photo gallery](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Gallery.tsx): `client/src/components/Gallery.tsx`
- [Invitation content](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/data/invitation.ts): `client/src/data/invitation.ts`
- [Celebrant profile](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Celebrant.tsx): `client/src/components/Celebrant.tsx`
- [Venue details](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Venue.tsx): `client/src/components/Venue.tsx`

### Guest response

- [RSVP form](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/RSVP.tsx): `client/src/components/RSVP.tsx`

### Closing content

- [Baptismal message](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/BirthdayMessage.tsx): `client/src/components/BirthdayMessage.tsx`
- [Invitation footer](https://github.com/louizyyy/zozo-birthday/blob/main/client/src/components/Footer.tsx): `client/src/components/Footer.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Invitation app: opens invitation
- Invitation app → Opening envelope: renders first (evidence: `client/src/App.tsx`)
- Opening envelope → Invitation app: signals opening (evidence: `client/src/App.tsx`)
- Invitation app → Celebrant hero: renders sections (evidence: `client/src/App.tsx`)
- Invitation app → Event details: renders sections (evidence: `client/src/App.tsx`)
- Invitation app → Photo gallery: renders sections (evidence: `client/src/App.tsx`)
- Invitation app → Event program: renders sections (evidence: `client/src/App.tsx`)
- Invitation app → RSVP form: renders sections (evidence: `client/src/App.tsx`)
- Invitation app → Baptismal message: renders sections (evidence: `client/src/App.tsx`)
- Invitation app → Invitation footer: renders footer (evidence: `client/src/App.tsx`)
- Celebrant hero → Invitation content: reads content (evidence: `client/src/components/Hero.tsx`)
- Event details → Invitation content: reads event (evidence: `client/src/components/BirthdayDetails.tsx`)
- Event program → Invitation content: reads schedule (evidence: `client/src/components/Program.tsx`)
- Photo gallery → Invitation content: reads photos (evidence: `client/src/components/Gallery.tsx`)
- Baptismal message → Invitation content: reads message (evidence: `client/src/components/BirthdayMessage.tsx`)
- Invitation footer → Invitation content: reads celebrant (evidence: `client/src/components/Footer.tsx`)